Tailwind CSS

Tailwind CSS (opens in a new tab) یک چارچوب CSS است که برای اولین بار از ابزار استفاده می‌کند، امکان طراحی‌های سفارشی سریع را با ترکیب کلاس‌های ابزار فراهم می‌کند که به طور فوق العاده ای با Next.js کار می کند.

نصب Tailwind

پکیج های Tailwind CSS را نصب کنید و دستور init را برای ایجاد هر دو فایل tailwind.config.js و postcss.config.js اجرا کنید:

Terminal

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

پیکربندی Tailwind

داخل tailwind.config.js مسیرهایی به فایل هایی که از نام کلاس های Tailwind CSS استفاده می کنند، اضافه کنید:

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
	content: [
		'./app/**/*.{js,ts,jsx,tsx,mdx}', // Note the addition of the `app` directory.
		'./pages/**/*.{js,ts,jsx,tsx,mdx}',
		'./components/**/*.{js,ts,jsx,tsx,mdx}',
 
		// Or if using `src` directory:
		'./src/**/*.{js,ts,jsx,tsx,mdx}',
	],
	theme: {
		extend: {},
	},
	plugins: [],
}

نیازی به تغییر postcss.config.js ندارید.

ایمپورت کردن استایل ها

Tailwind CSS directives (opens in a new tab) را اضافه کنید که Tailwind برای تزریق استایل های تولید شده به یک Global Stylesheet در برنامه شما استفاده می کند، به عنوان مثال:

app/globals.css

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

داخل طرح بندی ریشه (app/layout.tsx)، استایل‌شیت globals.css را ایمپورت کنید تا استایل‌ها را به تمام مسیرهای برنامه خود اعمال کنید.

app/layout.tsx

import type { Metadata } from 'next'
 
// These styles apply to every route in the application
import './globals.css'
 
export const metadata: Metadata = {
	title: 'Create Next App',
	description: 'Generated by create next app',
}
 
export default function RootLayout({
	children,
}: {
	children: React.ReactNode
}) {
	return (
		<html lang="en">
			<body>{children}</body>
		</html>
	)
}

استفاده از کلاس ها

پس از نصب Tailwind CSS و اضافه کردن استایل های سراسری، می توانید از کلاس های کاربردی Tailwind در برنامه خود استفاده کنید.

app/page.tsx

export default function Page() {
	return <h1 className="text-3xl font-bold underline">Hello, Next.js!</h1>
}

استفاده با Turbopack

از Next.js 13.1 به بعد، Tailwind CSS و PostCSS با Turbopack (opens in a new tab) پشتیبانی می شوند.

ماژول های CSS CSS-in-JS