چطور از Tailwindcss توی انگولار استفاده کنم؟

چند وقت پیش یه پست کوتاه توی کانال تلگرامیم گذاشته بودم که چرا باید از Tailwindcss استفاده کنیم و چرا الان یکی از ترند‌های دنیای فرانت اند شده.
توی این پست می خوام نحوه استفاده از Tailwindcss توی انگولار رو آموزش بدم، چون یه مقدار چالش داره. ولی قبلش نیازه یه چیزایی رو توضیح بدم.

فریم‌ورک Tailwindcss فقط مجموعه ای از استایل ها نیست، بلکه به شما این اجازه رو می ده به یه روش خیلی تر و تمیز استایل های Tailwindcss رو دست‌کاری کنید و یا استایل های جدید بنویسید. حسن نوشتن استایل در قالب پلاگین اینه که می تونید از قابلیت های بی نظیر Tailwindcss استفاده کنید و استایل هایی کاملا Scalable داشته باشید.

شما می تونید Tailwindcss رو در قالب یک فایل CSS دانلود کنید و به پروژه ملحق کنید، اما در این صورت فقط می تونید از استایل‌های اون استفاده کنید و از قابلیت هایی مثل حذف کردن اتوماتیک استایل های بلااستفاده و یا پلاگین نویسی بی بهره می مانید. این روش اصلا مناسب نیست، چون بیشتر مزایای Tailwindcss رو زیر سوال می بره.

قبل از این که بگیم که چطوری باید از Tailwindcss توی انگولار استفاده کنید، باید بگیم خود Tailwindcss چطوری کار می کنه. Tailwindcss یه پلاگین برای Postcss است که بار اصلی پردازش استایل ها به عهده اونه. مثلا Postcss به Tailwindcss برای حذف استایل هایی که استفاده نشدن کمک می کنه. طبیعیه که Postcss برای این که کار بکنه، باید پروژه رو بررسی کنه و عملیاتی رو روی استایل ها انجام بده (از این به بعد بهش می گیم Build). شاید براتون جالب باشه که کامپایلر انگولار درون خودش از Postcss استفاده می کنه. چالشی که الان داریم اینه که چطوری پلاگین Tailwindcss رو به کامپایلر انگولار معرفی کنیم؟

یکی از راه های استفاده از Postcss، استفاده به عنوان پلاگین Webpack هست. ما قصد داریم از این روش استفاده کنیم. چالشی که وجود داره اینه که انگولار در حالت عادی به ما این اجازه رو نمی ده که تنظیمات Webpack رو دستکاری کنیم (امیدوارم در آینده این قابلیت به انگولار اضافه بشه)، اما به ما اجازه می ده که از کامپایلر های غیر Official انگولار استفاده کنیم. این کامپایلرها روی کامپایلر Official انگولار بنا شدن و همه قابلیت های اون رو دارن. توی این آموزش می خوایم از یکی از این کامپایلر‌ها استفاده کنیم که به ما قابلیت این رو می ده که از فایل کانفیگ دلخواه خودمون برای Webpack استفاده کنیم.

در قدم اول باید پیش نیازها رو نصب کنیم:

npm i -D @angular-builders/custom-webpack autoprefixer@^9.8.6 postcss-import@^12.0.1 postcss-loader@^3.0.0 postcss-scss@^2.1.1 postcss-url@^8.0.0 webpack-merge

• پکیج های بالا به عنوان Dev Dependency نصب شدن
• ورژن های ذکر شده، متناسب با ورژن Postcss انگولار 10 نوشته شده شده. برای انگولار های دیگه احتمالا باید از ورژن های دیگه ای استفاده کنید.
• فرض بر این گذاشته شده که از فرمت scss برای استایل ها استفاده می کنید، برای همین پکیج postcss-scss رو نصب کردیم.

طبیعتا باید خود Tailwindcss رو هم نصب کنیم:

npm i tailwindcss

بعد از نصب این پکیج ها، باید به انگولار بگیم که از کامپایلر جدید برای کامپایل کردن استفاده کنه. این کار رو با تغییر angular.json می تونیم انجام بدیم. شما می تونید این فایل رو دستی تغییر بدید، ولی من اینجا برای خوانایی بیشتر، از کامند ng config استفاده می کنم (جای PROJECT_NAME اسم پروژتون رو باید بذارید):

ng config projects.PROJECT_NAME.architect.build.builder @angular-builders/custom-webpack:browser

ng config projects.PROJECT_NAME.architect.build.options.customWebpackConfig.path webpack.config.js

ng config projects.PROJECT_NAME.architect.serve.builder @angular-builders/custom-webpack:dev-server

ng config projects.PROJECT_NAME.architect.serve.options.customWebpackConfig.path webpack.config.js

الان کامپایلرمون عوض شد. اگه دقیت کنید آدرس فایل کانفیگ Webpack رو هم مشخص کردیم که توی یه فایل کنار angular.json و با نام webpack.config.js باشه. پس این فایل رو با محتویات زیر می سازیم:

const {merge} = require('webpack-merge');

module.exports = (config) => {
  const isProd         = config.mode === &quotproduction&quot
  const tailwindConfig = require(&quot./tailwind.config.js&quot)(isProd);

  return merge(config, {
    module: {
      rules: [
        {
          test: /\.scss$/,
          use: [
            {
              loader: 'postcss-loader',
              options: {
                ident: 'postcss',
                syntax: 'postcss-scss',
                plugins: [
                  require('postcss-import'),
                  require(&quotpostcss-url&quot),
                  require('tailwindcss')(tailwindConfig),
                  require('autoprefixer'),
                ]
              }
            }
          ]
        }
      ]
    }
  });
};

به این صورت پلاگین Postcss به Webpack اضافه شد و چندتا پلاگین هم برای خود Postcss لود کردیم. دقت کنید که همه پلاگین های بالا باید لود بشن تا بتونید بدون مشکل از Postcss و Tailwindcss استفاده کنید.

توی فایل webpack.config.js به فایل tailwind.config.js اشاره شده که مربوط به تنظیمات Tailwindcss هست. پس این فایل رو با محتوای زیر می سازیم (این محتوا حداقلیه و شما می تونید طبق داکیومنت Tailwindcss اونو گسترش بدید):

module.exports = (isProd) => ({
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true
  },
  purge: {
    enabled: isProd,
    content: [
      '**/*.html',
      '**/*.scss',
      '**/*.ts',
    ]
  },
  theme: {}
});

به عنوان قدم آخر، فایل styles.scss رو باز کنید و سه خط زیر رو در ابتدای اون paste کنید:

@import '../node_modules/tailwindcss/base';
@import '../node_modules/tailwindcss/components';
@import '../node_modules/tailwindcss/utilities';

حالا می تونید از Tailwindcss لذت ببرید :)