کانفیگ tailwindCSS در فریمورک next.js

درود به همگی امیدوارم حالتون خوب باشه

امروز اومدم با یک پست آموزشی

توی این پست قراره فریمورک TailwindCSS رو روی یک پروژه NextJS یی بدون هیچ مشکل خاصی کانفیگ کنیم. پس بیا گاماس گاماس پیش بریم:)))))

اگر بار اولتونه که میخواید یک پروژه نکست بیارید بالا از دستور زیر توی ترمینالتون استفاده کنید: (کلا از صفر پروژه رو بزنید) اگر هم نه برید مرحله بعد که حوصلتون سر نره:)

// for npm
npx create-next-app@latest
// or yarn
yarn create next-app

اگر میخواید تایپ اسکریپت رو داشته باشید پس حتما فلگ --typescript رو بعد از next app بزنید

بعد از اینکه پروژمون رو ساختیم میریم سراغ نصب TailwindCSS:

برای نصب اون حتما حتما این پکیج هارو نصب کنین (در ادامه میگم اینا چین)

npm install -D tailwindcss postcss autoprefixer

npx 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 هست رو بنویسید و تماممم ✌