نصب Tailwind CSS v3 در اپلیکیشن Next.js – استایل‌دهی سریع و مدرن با پیکربندی ساده

Tailwind CSS نسخه ۳ به‌صورت کامل با Next.js سازگار است و امکان استایل‌دهی سریع و قابل توسعه را فراهم می‌کند. این مقاله مراحل نصب، پیکربندی مسیرها، افزودن دستورات CSS، و اتصال فایل‌های استایل به layout اصلی را آموزش می‌دهد.

Tailwind CSSNext.jsglobals.csslayout.tsx

مرحله ۱: نصب Tailwind CSS v3

ابتدا پکیج‌های مورد نیاز را نصب کنید:

pnpm add -D tailwindcss@^3 postcss autoprefixer
npx tailwindcss init -p

این دستور دو فایل tailwind.config.js و postcss.config.js را ایجاد می‌کند.

مرحله ۲: پیکربندی مسیرهای قالب

در فایل tailwind.config.js مسیرهای فایل‌های JSX/TSX را مشخص کنید:

module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

مرحله ۳: افزودن دستورات Tailwind به فایل CSS

در فایل app/globals.css دستورات زیر را اضافه کنید:

@tailwind base;
@tailwind components;
@tailwind utilities;

مرحله ۴: اتصال فایل CSS به layout اصلی

در فایل app/layout.tsx فایل CSS را ایمپورت کنید:

import './globals.css'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

جمع‌بندی

با نصب Tailwind CSS v3 در Next.js، می‌توانید به‌سرعت رابط کاربری مدرن و واکنش‌گرا بسازید. این تنظیمات پایه‌ای هستند و می‌توانند با پلاگین‌ها، تم‌های سفارشی، و کلاس‌های utility گسترش یابند.