https://virgool.io/feed/@nafasebra fa 2026-06-16 14:27:02 https://files.virgool.io/upload/users/1721421/avatar/kTE9dI.png?height=120&width=120 https://virgool.io/@nafasebra https://virgool.io/@nafasebra/%DA%A9%D8%A7%D9%86%D9%81%DB%8C%DA%AF-tailwindcss-%D8%AF%D8%B1-%D9%81%D8%B1%DB%8C%D9%85%D9%88%D8%B1%DA%A9-nextjs-tlnpd8trozq0 درود به همگی امیدوارم حالتون خوب باشهامروز اومدم با یک پست آموزشیتوی این پست قراره فریمورک TailwindCSS رو روی یک پروژه NextJS یی بدون هیچ مشکل خاصی کانفیگ کنیم. پس بیا گاماس گاماس پیش بریم:)))))اگر بار اولتونه که میخواید یک پروژه نکست بیارید بالا از دستور زیر توی ترمینالتون استفاده کنید: (کلا از صفر پروژه رو بزنید) اگر هم نه برید مرحله بعد که حوصلتون سر نره:)// for npm npx create-next-app@latest // or yarn yarn create next-appاگر میخواید تایپ اسکریپت رو داشته باشید پس حتما فلگ --typescript رو بعد از next app بزنیدبعد از اینکه پروژمون رو ساختیم میریم سراغ نصب TailwindCSS:برای نصب اون حتما حتما این پکیج هارو نصب کنین (در ادامه میگم اینا چین)npm install -D tailwindcss postcss autoprefixernpx tailwindcss init -pاگر از yarn استفاده میکنید که باید به جای npm install از yarn add استفاده کنید.فلگ (از اونایی که قبلش - میذاریم) D برای اینکه که برای حالت Development نصب بشه. حق هم داره! چون ما فقط توی حالت Development کاریش داریم نه production!کار دستور دوم چیه؟ یعنی npx tailwindcss init -pیعنی فایل کانفیگ خود تیلویند و postcss رو توی ریشه یا روت پروژه بسازش.حالا چرا همراه tailwindcss باید postcss و autoprefixer نصب کنیم؟چون هرزمانی که از پروژتون اجرا یا بیلد میگیرید و چون باید استایل هاتون اعمال بشن اینها به صورت خودکار این کاررو میکنن وگر نه خودتون باید به صورت دستی پیش برید - توی پست های بعدی خواهم گفت چطوری.حالا نگفتی postcss چیه autoprefixer چیه؟پست سی اس اس یک ابزاره برای اینکه یکسری سینتکس سفارشی شده برای CSS تعریف کنی. اگر به هسته تیلویند تگاهی کرده باشی میبینی که یکسری سلکتور های خاصی پیاده سازی شده که وقتی داری کلاس برای المنتت تعریف میکنی به صورت سفارشی بهش مقدار بدی - دقیقا مثل این h-[200px]این autoprefixer هم تقریبا پیش پردازندس.بعد از اینکه نصب شد بریم فایل کانفیگ تیلویند رو یکم تغییر بدیم/** @type {import('tailwindcss').Config} */ module.exports = { content: [ &quot./app/**/*.{js,ts,jsx,tsx}&quot, &quot./pages/**/*.{js,ts,jsx,tsx}&quot, &quot./components/**/*.{js,ts,jsx,tsx}&quot, &quot./src/**/*.{js,ts,jsx,tsx}&quot, ], theme: { extend: {}, }, plugins: [], }عینا چیز هایی که توی بخش content هست رو بنویسید و تماممم ✌ نفس ابراهیمی نفس ابراهیمی Sun, 26 Mar 2023 13:13:32 +0330 https://virgool.io/@nafasebra/%D9%81%D9%88%D9%86%D8%AA-%D9%88-%D8%AA%D9%85%DB%8C-%DA%A9%D9%87-%D8%A8%D8%B1%D8%A7%DB%8C-vscode-%D8%A7%D9%85-%D8%B3%D8%AA-%DA%A9%D8%B1%D8%AF%D9%85-bki6buga7xa8 سلام و درود به همگی.توی این پست قراره کانفیگی که برای فونت و تم کد ادیتور VSCode ام انجام دادم رو اینجا بنویسم. شاید یه روزی یکی ازش استفاده کنه یا خودم :) چیزی که استفاده میکنم و توی تنظیمات ادیتور ست کردم رو خیلی توی بعضی از برنامه نویسا دیدم و خیلی ازش خوشم اومده :) و با کلی ور رفتن و سرچ زدن تونستم شبیه به چیزی که دوسش دارم دربیارم.در کل این چیزیه که توی روند کد نویسی بهم حس خوبی میده (اصلش هم همینه). حالا بریم تو کارش!1- از چه فونتی استفاده می کنم؟این حالت علامت هارو ممکنه توی Display Code بعضی از یوتیوبر و برنامه نویس ها دیده باشید که بنظرم فونت جذابیه! مخصوصا که جاوااسکریپت کار باشی که دیگه فبها:)بعد دیدم اینا از فونت FiraCode استفاده میکنن که خوشبختانه فونت اوپن سورس و رایگانی هست و یک ریپازیتوری توی گیت هاب دارهبعد دانلود فونت چکار میکنن؟ توی سیستم نصبش میکنن :)بعد از نصبش این کاررارو روی تنظیمات وی اس کد انجام میدیم:1- این عبارت رو توی بخش font family وی اس کدتون تایپ میکنید:'Fira Code', Vazirنکته: میتونید بعد از این فونت فارسی هم اضافه کنید که متن های فارسی داخل خودتون قشنگ دربیان. فونت فارسی که توی ادیتورم استفاده میکنم Vazir هست2- حالا برای اینکه علامت های فونت روی کد ادیتور اعمال بشن توی تنظیمات عبارت fontLigatures رو سرچ کنید و فایل JSON یی که باز میشه اون رو روی حالت True قرار بدید:&quoteditor.fontLigatures&quot: true,نکته: اگر خواستید ارتفاع نوشته هاتون زیاد بشه توی ستینگ عبارت line-height رو سرچ کنید و یه عدد بهش بدید که بیشتر از صفر باشه. مقداری که خودم تنظیم کردم مقدار 35 هستش.2- از چه تمی استفاده میکنم؟تمی که استفاده میکنم One Dark Pro عه که تم باحالی هست. خودم که دوسش دارم.برای آیکون های فولدر ها و فایل ها از اکستنشن Material icon theme استفاده میکنم که اینم عکسشه: (دیگه خودتون تست کنین)بعد از همه اینکارا VSCode رو ببندید دوباره باز کنید تا تنظیمات اعمال بشن. حالا کار جمعه و برید حالشو ببرید :)شما از چه فونت و تمی استفاده میکنید توی VSCode? اگر هم از وی اس کد استفاده نمیکنید هم اسم IDE یا ادیتورتون رو بگید. نفس ابراهیمی نفس ابراهیمی Wed, 15 Mar 2023 12:50:16 +0330