Tailwind CSS یک فریم‌ورک CSS محبوب است که رویکرد منحصربه‌فردی را برای ایجاد رابط‌های کاربری مدرن و ریسپانسیو ارائه می‌دهد. برخلاف فریم‌ورک‌های سنتی CSS که کامپوننت‌های از پیش طراحی‌شده را ارائه می‌کنند، Tailwind CSS بر ارائه مجموعه‌ای جامع از کلاس‌های utility تمرکز دارد که می‌توانیم مستقیماً روی المنت‌های HTML خود اعمال کنیم. هنگامی که Tailwind CSS با استفاده از Next.js، که یک فریم‌ورک قدرتمند React برای ساخت برنامه‌های رندر شده در سمت سرور است ترکیب می‌شود، می‌توانیم یک توسعه یکپارچه را تجربه کرده و اپلیکیشن‌های مقیاس‌پذیر بسازیم.

ما در این مقاله قصد داریم تا فرآیند راه‌اندازی Tailwind CSS با استفاده از Next.js را بررسی کنیم تا بتوانیم از قدرت کلاس‌های utility تیلویند در پروژه‌های Next.js خود بهره‌مند شویم.

Tailwind CSS و کلاس‌های Utility چگونه کار می‌کنند؟

Tailwind CSS از یک رویکرد کاربردی برای استایل‌دهی پیروی می‌کند. به این ترتیب مجموعه وسیعی از کلاس‌های utility کوچک و تک منظوره را ارائه می‌دهد که می‌توانیم مستقیماً روی المنت‌های HTML خود اعمال کنیم.

هر کلاس utility یک ویژگی خاص و یا ترکیبی از ویژگی‌های CSS را نشان می‌دهد، که ساخت کامپوننت‌های UI پیچیده را با ترکیب این کلاس‌ها باهم آسان می‌کند.

به عنوان مثال، می‌توانیم به جای تعریف یک کلاس CSS سفارشی برای تنظیم رنگ یک دکمه، این کار را با استفاده از کلاس utility تحت عنوان text-blue-500به سادگی انجام دهیم تا به جلوه مورد نظر خود برسیم.

کلاس‌های utility در Tailwind CSS طوری طراحی شده‌اند که بسیار انعطاف‌پذیر و قابل تنظیم هستند. با استفاده از قراردادهای نامگذاری بصری ارائه شده توسط Tailwind، می‌توانیم به راحتی ویژگی‌هایی مانند margin، padding، اندازه فونت، رنگ ها و موارد دیگر را تنظیم کنیم.

این رویکرد سطح دقیقی از کنترل را بر روی استایل‌های ما ارائه می‌کند و نیاز به نوشتن CSS سفارشی، برای اکثر سناریوهای استایل‌دهی معمولی را از بین می‌برد.

چرا باید از Tailwind CSS همراه با Next.js استفاده کنیم؟

Next.js یک فریم‌ورک قدرتمند برای ساخت برنامه‌های React رندر شده در سمت سرور است. این فریم‌ورک یک تجربه توسعه عالی را ارائه می‌دهد و ویژگی‌هایی مانند split خودکار کد، رندر سمت سرور و تولید سایت ایستا را عرضه می‌کند.

هنگامی که از Next.js همراه با Tailwind CSS استفاده می‌کنیم، این امکان را به ما می‌دهد تا به راحتی بتوانیم کلاس‌های utility تیلویند را در گردش کار توسعه برنامه خود ادغام کنیم.

Next.js تحویل استایل‌های CSS با استفاده از tree-shaking خودکار CSS استفاده نشده در طول فرآیند ساخت را بهینه می‌کند. این بدان معنی است که حتی اگر Tailwind CSS مجموعه گسترده‌ای از کلاس‌های utility را ارائه می‌دهد، فقط استایل‌هایی که ما واقعاً در برنامه خود استفاده می‌کنیم در بسته نهایی گنجانده می‌شوند. این رویکرد تضمین می‌کند که برنامه ما سبک باقی می‌ماند و کارآمد است.

می‌توانیم با استفاده از ترکیب Tailwind CSS و Next.js، به سرعت رابط‌های کاربری ریسپانسیو را نمونه‌سازی، طراحی و ایجاد کنیم و در عین حال از مزایای یک فرآیند توسعه کارآمد و عملکرد بهینه بهره‌مند شویم.

اکنون که با مزایا و نحوه کار بین Tailwind CSS و Next.js آشنا شدیم، در ادامه می‌خواهیم تا روند گام به گام راه‌اندازی Tailwind CSS با استفاده از Next.js را بررسی کنیم.

گام ۱: یک پروژه Next.js جدید ایجاد می‌کنیم

برای شروع، یک پروژه Next.js جدید ایجاد می‌کنیم. ترمینال خود را باز کرده و دستور زیر را اجرا می‌کنیم:

npx create-next-app my-tailwind-project

این دستور یک پروژه جدید Next.js با نام my-tailwind-project در دایرکتوری با همین نام ایجاد می‌کند.

گام ۲: نصب Tailwind CSS

با اجرای دستور زیر به دایرکتوری پروژه می‌رویم:

cd my-tailwind-project

سپس Tailwind CSS و dependencyهای آن را با اجرای دستور زیر نصب می‌کنیم:

npm install tailwindcss postcss autoprefixer

گام ۳: پیکربندی Tailwind CSS

بعد از نصب Tailwind CSS، باید آن را برای کار با Next.js پیکربندی کنیم. یک فایل جدید به نام postcss.config.jsدر دایرکتوری root پروژه ایجاد کرده و کد زیر را به آن اضافه می‌کنیم:

module.exports = {
  plugins: [
    'tailwindcss',
    'postcss-flexbugs-fixes',
    'postcss-preset-env',
    [
      'postcss-normalize',
      {
        allowDuplicates: false,
      },
    ],
    [
      '@fullhuman/postcss-purgecss',
      {
        content: ['./pages/**/*.{js,jsx,ts,tsx}', './components/**/*.{js,jsx,ts,tsx}'],
        defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
      },
    ],
    'autoprefixer',
  ],
};

این کد پیکربندی Tailwind CSS را راه‌اندازی می‌کند، پلاگین‌های PostCSS لازم را اضافه می‌کند و PurgeCSS برای حذف CSSهای استفاده نشده در طول ساخت محصول را شامل می‌شود.

گام ۴: ایجاد پیکربندی Tailwind CSS

در این مرحله، باید یک فایل پیکربندی پیش‌فرض برای Tailwind CSS ایجاد کنیم. این فایل پیکربندی به ما این امکان را می‌دهد تا Tailwind CSS را با توجه به نیازهای خاص پروژه خود سفارشی کنیم. این فایل پالت رنگ، تنظیمات تایپوگرافی، ابزارهای فاصله‌گذاری و موارد دیگر را تعریف می‌کند.

فایل tailwind.config.jsبه عنوان هاب پیکربندی مرکزی برای Tailwind CSS عمل می‌کند. به این صورت که یک آبجکت جاوااسکریپت فراهم می‌کند که در آن می‌توانیم سفارشی‌سازی‌های خود را تعریف کرده و پیکربندی پیش‌فرض را گسترش دهیم.

با ایجاد فایل پیکربندی پیش‌فرض، انعطاف‌پذیری لازم برای تغییر جنبه‌های مختلف Tailwind CSS، از جمله سفارشی‌سازی تم، گسترش کلاس‌های utility و پاکسازی CSSهای بلااستفاده در طول ساخت محصول را داریم.

اکنون می‌خواهیم فایل تنظیمات پیش‌فرض را برای Tailwind CSS تولید کنیم. برای این منظور دستور زیر را اجرا می‌کنیم:

npx tailwindcss init

این دستور یک فایل tailwind.config.jsدر دایرکتوری root پروژه ما ایجاد می‌کند.

گام ۵: سفارشی‌سازی Tailwind CSS

فایل tailwind.config.jsرا باز کرده و Tailwind CSS را با توجه به نیاز پروژه خود سفارشی می‌کنیم. در ادامه یک نمونه از یک فایل سفارشی tailwind.config.jsرا داریم:

module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false,
  theme: {
    extend: {
      colors: {
        primary: '#FF0000',
        secondary: '#00FF00',
      },
      fontFamily: {
        sans: ['Roboto', 'Arial', 'sans-serif'],
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

در این مثال، ما پیکربندی Tailwind CSS را با استفاده از موارد زیر سفارشی می‌کنیم:

• با استفاده از گزینه purge فایل‌هایی که قرار است پاک شوند را مشخص می‌کنیم. این کار تضمین می‌کند که فقط کلاس‌های CSS مورد استفاده در پروژه در نسخه نهایی گنجانده می‌شود.
• عملکرد darkMode را با تنظیم گزینه darkMode روی false غیرفعال می‌کنیم.
• پالت رنگ را با استفاده از دو رنگ سفارشی primary و secondary گسترش می‌دهیم.
• یک فونت سفارشی به نام sans که شامل فونت‌های Roboto، Arial و sans-serif می‌شود را به فونت‌ها اضافه می‌کنیم.
• بخش‌های variants و plugins را برای این پیکربندی اولیه خالی نگه می‌داریم.

همچنین می‌توانیم Tailwind CSS را با تحقیق در سایر گزینه‌های پیکربندی موجود در مستندات رسمی آن سفارشی‌سازی کنیم.  Tailwind CSS انعطاف‌پذیری گسترده‌ای را ارائه می‌دهد و همین موضوع به ما این امکان را می‌دهد تا فریم‌ورک را مطابق با الزامات طراحی خاص پروژه خود تنظیم کنیم.

هنگامی که فایل tailwind.config.jsرا سفارشی کردیم، آن را ذخیره کرده و به گام بعدی می‌رویم.

گام ۶: نحوه import کردن استایل‌های Tailwind CSS

برای استفاده از استایل‌های Tailwind CSS در پروژه Next.js، استایل‌ها را در فایل pages/_app.jsخود import می‌کنیم. فایل را باز کرده و کد زیر را اضافه می‌نماییم:

import 'tailwindcss/tailwind.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

این کد، استایل‌های کامپایل شده Tailwind CSS را import کرده و آن‌ها را در کل برنامه ما اعمال می‌کند.

گام ۷: راه اندازی سرور توسعه

اکنون ما آماده هستیم تا سرور توسعه را راه اندازی کنیم و Tailwind CSS را در عمل ببینیم. برای این کار دستور زیر را اجرا می‌کنیم:

npm run dev

در این مرحله باید برنامه Next.js خود با استفاده از استایل‌های CSS Tailwind را در آدرس http://localhost:3000در مرورگر خود مشاهده کنیم.

جمع‌بندی

در این مقاله سعی کردیم تا Tailwind CSS را با استفاده از Next.js راه اندازی کنیم. اکنون می‌توانیم از کلاس‌های utility تیلویند برای ایجاد سریع کامپوننت‌های رابط کاربری زیبا و ریسپانسیو در پروژه‌های Next.js خود استفاده کنیم. همینطور برای آشنایی بیشتر با طیف گسترده‌ای از کلاس‌های utility موجود، مطالعه مستندات Tailwind CSS می‌تواند مفید باشد.