نصب و تنظیم tailwind در انگولار 11

توی این پست قصد دارم در مورد استفاده از فریم ورک tailwind در angular توضیح بدم.

اول بریم سراغ این که tailwind چیه و چیکار می کنه؟ به طور خلاصه tailwind یه فریم ورک سطح پایین css ه، که بر خلاف فریم ورک های دیگه مثل bootstrap یا material به جای این که یک سری کامپوننت و المنتهای از پیش ساخته شده به شما بده با utility های css کار می کنه و به شما این اجازه رو میده که بدون نوشتن کد css استایل دلخواهتون رو پیاده سازی کنید.

اگه میخواید راجع به tailwind بیشتر بخونید میتونید اینجا رو ببینید.

استفاده از این فریم ورک می تونه پیاده سازی فرانت اند رو خیلی ساده کنه ولی مشکلی که وجود داره اینه که توی داکیومنت رسمی tailwind خبری از راهنمای نصب و تنظیم اون برای انگولار نیست و ظاهرا انگولار، خیلی راحت با این فریم ورک کنار نمیاد، البته تا قبل از ورژن 11.2، خبر خوب این که انگولار از ورژن 11.2 به بعد از tailwind پشتیبانی می کنه و با مراحل زیر با استفاده از چند تا دستور ساده می تونید این فریم ورک رو به پروژه ی انگولارتون اضافه کنید.

مرحله اول - آپدیت انگولار (اگر از ورژن 11.2 یا بالاتر انگولار استفاده می کنید می تونید این مرحله رو رد کنید)

همونطور که گفتم برای استفاده از tailwind باید از انگولار 11.2 به بعد استفاده کنید پس اگر ورژن انگولارتون قدیمی تره لازمه که اول با استفاده از دستور زیر انگولار رو آپدیت کنید.

ng update @angular/[email protected]  @angular/[email protected]

البته میتونید با این دستور انگولار رو تا آخرین ورژن هم آپدیت کنید.

ng update @angular/core @angular/cli

فقط حواستون باشه که ممکنه بعد از آپدیت انگولار لازم باشه یه سری تغییرات تو پروژه انجام بدید. اگر برای آپدیت انگولار نیاز به راهنمایی داشتید یه سر به اینجا بزنید.

مرحله دوم - نصب tailwind

حالا میریم سراغ نصب پکیج tailwind

// using npm
npm install tailwindcss
// using yarn
yarn add tailwind css

بعد از نصب tailwind باید dapendancy هاش رو نصب کنید:

//using npm
npm install postcss@latest autoprefixer@latest
//using yarn
yarn add postcss@latest autoprefixer@latest

مرحله سوم - اضافه کردن فایل های tailwind به پروژه

برای اینکه استایل های tailwind در تمام پروژه قابل استفاده باشه باید سه تا فایل رو به استایل های پروژتون اضافه کنید. برای این کار کافیه که این چند خط رو توی فایل استایل اصلی (گلوبال) پروژه کپی کنید.

(این فایل با اسم styles.scss یا styles.css توی فولدر src قرار داره)

@import "tailwindcss/base"
@import "tailwindcss/components"
@import "tailwindcss/utilities"

خب تا اینجای کار تونستیم tailwind رو به پروژه اضافه کنیم ولی برای استفاده از tailwind هنوز یه کار دیگه مونده که باید انجام بدیم.

مرحله ی چهارم - تنظیم و config کردن tailwind

یکی از ویژگی های tailwind که اونو از سایر کتابخونه های css متمایز می کنه قابلیت config کردن و شخصی سازی اونه.

npx tailwindcss init

این دستور یک فایل به اسم tailwind.config.js رو به root پروژه اضافه می کنه. که اگر اون رو باز کنید محتواش این شکلیه:

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

با تغییر این فایل شما می تونید کتابخونه ی tailwind رو با انعطاف خیلی بالایی شخصی سازی کنید، براش تم تعریف کنید، به اسم کلاس ها پیشوند اضافه کنید و کلی تنظیمات دیگه که می تونید جزئیاتشون رو توی سایت tailwind پیدا کنید.

مرحله آخر:

کار دیگه ای نمونده، الان دیگه می تونید با خیال راحت از tailwind توی پروژتون استفاده کنید. :)