استایل‌دهی در 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 کلاس‌ها را به‌صورت محلی 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>

برای اعمال استایل سراسری، فایل 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 استفاده شود.

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

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

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

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

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