استایل‌دهی در Next.js – استفاده از Tailwind، CSS Modules، و مدیریت ترتیب فایل‌ها

Tailwind CSS

Tailwind یک فریم‌ورک utility-first است که کلاس‌های سطح پایین برای طراحی سفارشی ارائه می‌دهد.

برای نصب:

pnpm add -D tailwindcss @tailwindcss/postcss

در فایل postcss.config.mjs:

export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

در فایل app/globals.css:

@import 'tailwindcss';

و در app/layout.tsx:

import './globals.css'

اکنون می‌توان کلاس‌های Tailwind را استفاده کرد:

<h1 className="text-4xl font-bold">Welcome to Next.js!</h1>

CSS Modules

CSS Modules کلاس‌ها را به‌صورت محلی scope می‌کند و از برخورد نام‌ها جلوگیری می‌کند.

فایل با پسوند .module.css ایجاد کنید:

// app/blog/blog.module.css
.blog {
  padding: 24px;
}

// app/blog/page.tsx
import styles from './blog.module.css'
<main className={styles.blog}></main>

Global CSS

برای اعمال استایل سراسری، فایل app/global.css ایجاد و در layout وارد کنید:

// app/global.css
body {
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
}

// app/layout.tsx
import './global.css'

توصیه: از Global CSS فقط برای استایل‌های پایه استفاده شود، و برای استایل‌های کامپوننتی از Tailwind یا CSS Modules استفاده شود.

External Stylesheets

می‌توان فایل‌های CSS خارجی مانند Bootstrap را وارد کرد:

import 'bootstrap/dist/css/bootstrap.css'

در React 19 می‌توان از <link rel="stylesheet" /> نیز استفاده کرد.

ترتیب و ادغام فایل‌های CSS

در حالت تولید، Next.js فایل‌های CSS را chunk و minify می‌کند. ترتیب فایل‌ها بر اساس ترتیب import در کد تعیین می‌شود:

// ترتیب import تعیین‌کنندهٔ ترتیب CSS است
import { BaseButton } from './base-button'
import styles from './page.module.css'

توصیه‌ها

• استایل‌ها را در یک فایل ورودی متمرکز نگه دارید
• استایل‌های سراسری و Tailwind را در layout اصلی وارد کنید
• از Tailwind برای اکثر نیازهای طراحی استفاده کنید
• از CSS Modules برای استایل‌های خاص کامپوننت استفاده کنید
• نام‌گذاری یکنواخت برای فایل‌های CSS داشته باشید
• استایل‌های مشترک را در کامپوننت‌های مشترک استخراج کنید
• از auto-sort در ESLint برای importها اجتناب کنید

توسعه در مقابل تولید

• در حالت توسعه (next dev): Fast Refresh فعال است
• در حالت تولید (next build): CSS minify و code-split می‌شود
• در تولید، CSS بدون جاوااسکریپت نیز بارگذاری می‌شود
• ترتیب CSS در توسعه ممکن است متفاوت باشد؛ همیشه خروجی تولید را بررسی کنید