مرحله ۱: نصب 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 گسترش یابند.