این راهنمای جامع شما را در راه‌اندازی نسخه‌های 3 و 4 Tailwind CSS در پروژه‌های React و Next.js راهنمایی می‌کند که مراحل نصب، پیکربندی، الگوهای مؤلفه، اجرای حالت تاریک، بهترین شیوه‌ها و سناریوهای عیب‌یابی رایج را پوشش می‌دهد.

اگر اخیراً در حال ساخت برنامه های تحت وب بوده اید، احتمالاً در مورد Tailwind CSS شنیده اید. این که بسیاری از ما با اجازه دادن به ما طرح‌هایی را که مستقیماً در نشانه‌گذاری خود با استفاده از کلاس‌های کاربردی بنویسیم، به استایل نزدیک می‌شویم، تغییر می‌دهد. دیگر نیازی به پرش بین فایل‌های HTML و CSS یا برخورد با قراردادهای نام‌گذاری که به ناچار با رشد پروژه‌ها خراب می‌شوند، وجود ندارد.

این راهنما راه‌اندازی Tailwind CSS را در پروژه‌های React و Next.js ارائه می‌کند و نسخه 3 (هنوز به طور گسترده در تولید استفاده می‌شود) و نسخه 4 (آخرین نسخه با پیشرفت‌های قابل توجه) را پوشش می‌دهد. ما همچنین با تنظیم حالت تاریک گاهی گیج کننده که حتی توسعه دهندگان باتجربه را هم درگیر می کند، مقابله خواهیم کرد.

درک فلسفه Tailwind

قبل از فرو رفتن در راه اندازی، ارزش آن را دارد که بفهمیم چه چیزی Tailwind را متفاوت می کند. به جای نوشتن CSS سفارشی برای هر کامپوننت، کلاس های کاربردی از پیش ساخته شده را مستقیماً روی عناصر خود اعمال می کنید.

مانند داشتن یک جعبه ابزار عظیم فکر کنید که در آن هر کلاس یک کار خاص را به خوبی انجام می دهد. بالشتک می خواهید؟ p-4 را اضافه کنید. آیا به آن پاسخگو نیاز دارید؟ آن را md:p-8 بسازید. اگر از CSS سنتی استفاده می‌کنید، این رویکرد در ابتدا عجیب به نظر می‌رسد، اما پس از کلیک کردن، متوجه خواهید شد که رابط‌های بسیار سریعی ایجاد می‌کنید.

جادو در زمان ساخت زمانی اتفاق می‌افتد که Tailwind فایل‌های شما را اسکن می‌کند و فقط سبک‌هایی را که واقعاً استفاده می‌کنید شامل می‌شود. این بدان معناست که با وجود هزاران ابزار در دسترس، بسته نهایی CSS شما ناب می‌ماند.

راه اندازی Tailwind CSS v3 در React with Vite

بیایید با نسخه 3 در یک پروژه React با استفاده از Vite شروع کنیم. نسخه 3 بسیار محبوب است، به خصوص در پایگاه های کد موجود، و درک تنظیمات آن در حفظ پروژه های قدیمی کمک می کند.

ابتدا پروژه React خود را با Vite داربست کنید:

 npm create vite@latest my-react-app -- --template react-ts cd my-react-app

اکنون Tailwind و وابستگی های همتای آن را نصب کنید. این وابستگی‌های همتا (PostCSS و Autoprefixer) خط لوله تبدیل CSS را که Tailwind به آن متکی است، مدیریت می‌کنند:

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

دستور init -p دو فایل پیکربندی ایجاد می کند. پرچم -p به طور خاص یک پیکربندی PostCSS را در کنار پیکربندی Tailwind ایجاد می کند و یک مرحله دستی را برای شما ذخیره می کند.

tailwind.config.js تولید شده را باز کنید و به Tailwind بگویید کجا به دنبال کلاس های پروژه شما بگردد:

 /** @type {import('tailwindcss').Config} */ export default { content: [ "./index.html", "./src/**/*.{js,ts,jsx,tsx}", ], theme: { extend: { // Your custom design tokens go here }, }, plugins: [], }

آرایه content بسیار مهم است. به Tailwind می گوید که کدام فایل ها را برای نام کلاس ها اسکن کند. مسیری را در اینجا از دست ندهید، و تعجب خواهید کرد که چرا سبک های شما کار نمی کنند.

سپس، محتویات src/index.css را با دستورات Tailwind جایگزین کنید:

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

این دستورالعمل ها استایل های Tailwind را به CSS شما تزریق می کنند. ترتیب مهم است: سبک‌های پایه بازنشانی‌ها و پیش‌فرض‌ها را ارائه می‌کنند، کامپوننت‌ها برای کلاس‌های مؤلفه از پیش ساخته شده‌اند، و ابزارهای کمکی، کلاس‌های کاربردی نان و کره شما هستند.

در نهایت، مطمئن شوید که این فایل CSS در src/main.tsx شما وارد شده است:

 import './index.css'

npm run dev اجرا کنید و آماده شروع استفاده از کلاس های Tailwind در کامپوننت های خود هستید!

راه اندازی Tailwind CSS v4 در React

نسخه 4 که در اواخر سال 2024 منتشر شد، نشان دهنده یک تغییر معماری قابل توجه است. بزرگترین تغییر؟ دیگر وابستگی PostCSS برای اکثر موارد استفاده وجود ندارد. Tailwind اکنون دارای موتور رعد و برق سریع خود است که به زبان Rust نوشته شده است، که راه‌اندازی را ساده‌تر و سریع‌تر می‌سازد.

با همان تنظیمات Vite شروع کنید:

 npm create vite@latest my-react-app -- --template react-ts cd my-react-app

نصب برای نسخه 4 بسیار ساده تر است:

 npm install tailwindcss @tailwindcss/vite

به جای پیکربندی PostCSS، Tailwind را مستقیماً به پیکربندی Vite خود اضافه خواهید کرد. vite.config.ts را به روز کنید:

 import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' import tailwindcss from '@tailwindcss/vite'
export default defineConfig({ plugins: [ react(), tailwindcss(), ], })

در src/index.css شما، نحو کمی تغییر می کند:

 @import "tailwindcss";

همین! نسخه 4 به طور خودکار فایل های محتوای شما را بدون پیکربندی صریح تشخیص می دهد. موتور جدید همه چیز را به صورت داخلی کنترل می‌کند و در نتیجه ساخت سریع‌تر و بارگیری مجدد داغ می‌شود.

راه اندازی Tailwind CSS v3 در Next.js

پروژه های Next.js ملاحظات خاص خود را دارند، به خصوص با روتر App معرفی شده در نسخه 13. اجازه دهید راه اندازی v3 را برای Next.js مرور کنیم:

 npx create-next-app@latest my-next-app --typescript --app cd my-next-app

پشته Tailwind را نصب کنید:

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

tailwind.config.js با مسیرهای خاص Next.js پیکربندی کنید:

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

توجه داشته باشید که هم دایرکتوری app و هم pages شامل می شود. این امر سازگاری را تضمین می کند، چه از App Router جدیدتر و چه از روتر صفحات سنتی استفاده کنید.

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

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

مطمئن شوید که این فایل CSS در طرح اصلی شما وارد شده است ( app/layout.tsx ):

 import './globals.css'
export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( <html lang="en"> <body>{children}</body> </html> ) } 

راه اندازی Tailwind CSS v4 در Next.js

برای نسخه 4 در Next.js، این فرآیند از PostCSS استفاده می کند (که به هر حال Next.js به صورت داخلی از آن استفاده می کند):

 npx create-next-app@latest my-next-app --typescript --app cd my-next-app

نسخه 4 را با افزونه PostCSS آن نصب کنید:

 npm install tailwindcss @tailwindcss/postcss

یک فایل postcss.config.mjs ایجاد کنید:

 /** @type {import('postcss-load-config').Config} */ const config = { plugins: { "@tailwindcss/postcss": {}, }, };
export default config; به روز رسانی /** @type {import('postcss-load-config').Config} */ const config = { plugins: { "@tailwindcss/postcss": {}, }, };
export default config;

app/globals.css :

 @import "tailwindcss";

عبارت import در طرح شما یکسان باقی می ماند. هوشمندی نسخه 4 به این معنی است که به طور خودکار فایل های محتوای شما را در پروژه Next.js پیدا می کند.

کار با کامپوننت ها

پس از راه اندازی، استفاده از Tailwind در تمام نسخه ها یکسان است. در اینجا یک جزء کارت عملی است که الگوهای رایج را به نمایش می گذارد:

 function Card({ title, description, highlighted = false }) { return ( <div className={` max-w-sm rounded-lg overflow-hidden shadow-lg p-6 ${highlighted ? 'bg-blue-50 border-2 border-blue-500' : 'bg-white'} hover:shadow-xl transition-shadow duration-300 `}> <h2 className="font-bold text-xl mb-2 text-gray-900"> {title} </h2> <p className="text-gray-700 text-base leading-relaxed"> {description} </p> </div> ); }

توجه داشته باشید که چگونه استایل شرطی را با حروف الفبای الگو مدیریت می کنیم. این الگو همزمان با استفاده از ابزارهای Tailwind، JSX شما را قابل خواندن نگه می دارد.

اجرای درست حالت تاریک

حالت تاریک جایی است که بسیاری از توسعه دهندگان با موانعی روبرو می شوند. رویکرد بین نسخه 3 و 4 متفاوت است و مستندات ممکن است گیج کننده باشد. بگذارید به وضوح آن را تجزیه کنم.

حالت تاریک در Tailwind نسخه 3

ابتدا حالت تاریک مبتنی بر کلاس را در tailwind.config.js خود فعال کنید:

 module.exports = { darkMode: 'class', // This enables manual control // ... rest of your config }

اکنون یک جزء تغییر تم ایجاد کنید که کلاس تاریک را در عنصر HTML شما مدیریت می کند:

 // components/ThemeToggle.tsx import { useEffect, useState } from 'react';
export function ThemeToggle() { const [theme, setTheme] = useState('light');
 useEffect(() => { // Check for saved preference or default to light const savedTheme = localStorage.getItem('theme'); const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;    
 const initialTheme = savedTheme || (prefersDark ? 'dark' : 'light'); setTheme(initialTheme);    
// Apply the theme if (initialTheme === 'dark') { document.documentElement.classList.add('dark'); } }, []);
 const toggleTheme = () => { const newTheme = theme === 'light' ? 'dark' : 'light'; setTheme(newTheme);    
// Update DOM if (newTheme === 'dark') { document.documentElement.classList.add('dark'); } else { document.documentElement.classList.remove('dark'); }    
// Save preference localStorage.setItem('theme', newTheme); };
 return ( <button onClick={toggleTheme} className="p-2 rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-gray-100 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors" aria-label="Toggle theme" > {theme === 'light' ? '🌙' : '☀️'} </button> ); }

برای جلوگیری از فلش تم نادرست در بارگذاری صفحه، این اسکریپت را به سر سند خود اضافه کنید. در Next.js یک کامپوننت ایجاد کنید:

 // app/ThemeScript.tsx export function ThemeScript() { const themeScript = ` (function() { const theme = localStorage.getItem('theme'); const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;      
 if (theme === 'dark' || (!theme && prefersDark)) { document.documentElement.classList.add('dark'); } })(); `;
 return ( <script dangerouslySetInnerHTML={{ __html: themeScript }} /> ); }

این را در چیدمان ریشه خود قبل از بدنه بگنجانید:

 // app/layout.tsx import { ThemeScript } from './ThemeScript';
export default function RootLayout({ children }) { return ( <html lang="en"> <head> <ThemeScript /> </head> <body>{children}</body> </html> ); } 

حالت تاریک در Tailwind نسخه 4

نسخه 4 رویکرد را کمی تغییر می دهد. به جای گزینه تنظیمات، رفتار حالت تاریک را با CSS تعریف می کنید. پس از وارد کردن Tailwind، این را به فایل CSS جهانی خود اضافه کنید:

 @import "tailwindcss";
/* Enable class-based dark mode */ @variant dark (&:where(.dark, .dark *));

مولفه تغییر موضوع یکسان باقی می ماند، اما موتور نسخه 4 به گونه ای کارآمدتر مدیریت می کند.

برای یک رویکرد پیچیده تر با استفاده از ویژگی های سفارشی CSS (در هر دو نسخه کار می کند):

 @import "tailwindcss";
:root { --color-background: 255 255 255; /* white */ --color-text: 17 24 39; /* gray-900 */ --color-primary: 59 130 246; /* blue-500 */ }
.dark { --color-background: 17 24 39; /* gray-900 */ --color-text: 243 244 246; /* gray-100 */ --color-primary: 96 165 250; /* blue-400 */ }

سپس پیکربندی Tailwind خود را برای استفاده از این متغیرها گسترش دهید:

 module.exports = { theme: { extend: { colors: { background: 'rgb(var(--color-background) / <alpha-value>)', text: 'rgb(var(--color-text) / <alpha-value>)', primary: 'rgb(var(--color-primary) / <alpha-value>)', }, }, }, }

اکنون می‌توانید از کلاس‌های bg-background ، text-text و text-primary استفاده کنید که به‌طور خودکار با موضوع سازگار می‌شوند.

بهترین روش ها از سنگرها

پس از کار با Tailwind در پروژه های متعدد، در اینجا روش هایی وجود دارد که به طور مداوم ارزشمند هستند:

تنظیمات خود را نازک نگه دارید. فقط زمانی تم را گسترش دهید که به مقادیر سفارشی ثابت در پروژه خود نیاز دارید. سبک های یکباره می توانند از مقادیر دلخواه مانند bg-[#1da1f2] استفاده کنند.

الگوهای اجزا را در آغوش بگیرید. در حالی که Tailwind کلاس‌های کاربردی را تشویق می‌کند، از ایجاد کلاس‌های مؤلفه برای الگوهای واقعاً تکراری خودداری نکنید. از دستورالعمل @apply به اندازه کافی استفاده کنید:

 @layer components { .btn-primary { @apply px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors; } }

از افزونه رسمی Prettier استفاده کنید. برای مرتب‌سازی خودکار کلاس‌هایتان به ترتیب ثابت prettier-plugin-tailwindcss نصب کنید. این کار بررسی کد را بسیار ساده تر می کند.

از IntelliSense استفاده کنید. پسوند رسمی VS Code، تکمیل خودکار، پیش نمایش های شناور و پر کردن را فراهم می کند. برای یادگیری نام کلاس ها و گرفتن اشتباهات املایی بسیار ارزشمند است.

دسترسی را در نظر بگیرید. اگر مراقب نباشید، Tailwind ساخت رابط‌های غیرقابل دسترس را آسان می‌کند. همیشه با پیمایش صفحه کلید و صفحه‌خوان‌ها تست کنید. در صورت لزوم از ویژگی های HTML معنایی و ARIA استفاده کنید.

عیب یابی مسائل رایج

اگر سبک‌ها اعمال نمی‌شوند، این موارد را به ترتیب بررسی کنید:

بررسی کنید مسیرهای محتوای شما در پیکربندی با ساختار فایل واقعی شما مطابقت دارند

مطمئن شوید که فایل CSS را در نقطه ورودی برنامه خود وارد می کنید

اشتباهات تایپی در نام کلاس ها را بررسی کنید (پسوند IntelliSense در اینجا کمک می کند)

در نسخه 3، مطمئن شوید که PostCSS به درستی پیکربندی شده است

کش ساخت خود را پاک کنید و سرور توسعه دهنده را مجددا راه اندازی کنید

برای ساخت‌های تولیدی که شکسته به نظر می‌رسند، احتمالاً به صورت پویا نام کلاس‌ها را تولید می‌کنید. Tailwind نمی تواند اینها را تشخیص دهد. همیشه از نام های کامل کلاس استفاده کنید یا آنها را در پیکربندی خود فهرست کنید.

منابع برای یادگیری عمیق تر

اسناد رسمی Tailwind CSS بهترین منبع برای درک برنامه‌های کاربردی و گزینه‌های پیکربندی است. برای راهنمایی خاص Next.js، مستندات استایل Next.js را بررسی کنید.

کتابخانه مؤلفه های Tailwind UI (پرداخت شده) الگوهای حرفه ای و بهترین شیوه ها را به نمایش می گذارد. حتی اگر آن را نخرید، نمونه‌های رایگان معماری اجزای جامد را نشان می‌دهند.

برای به روز ماندن در مورد پیشرفت های نسخه 4، مخزن Tailwind CSS GitHub و وبلاگ رسمی را دنبال کنید.

حرکت رو به جلو

Tailwind CSS اساساً تعداد بسیاری از ما را تغییر داده است. چه نسخه 3 پایدار را انتخاب کنید یا از پیشرفت های نسخه 4 استقبال کنید، یک ابزار آزمایش شده در نبرد دریافت می کنید که از نمونه های اولیه تا برنامه های تولیدی مقیاس می شود.

کلید تسلط بر Tailwind به خاطر سپردن هر کلاس کاربردی نیست. درک مدل ذهنی ساختن طرح ها از قطعات کوچک و هدفمند است. با اصول اولیه شروع کنید، به تدریج ویژگی های پیشرفته مانند انیمیشن ها و انواع سفارشی را کشف کنید، و از نگاه کردن به کد منبع سایت هایی که تحسین می کنید دریغ نکنید.

به یاد داشته باشید، Tailwind یک ابزار است، نه یک مذهب. آن را با رویکردهای دیگر که منطقی هستند ترکیب کنید. از ماژول های CSS برای انیمیشن های پیچیده استفاده کنید. در صورت نیاز CSS سفارشی بنویسید. هدف ارسال تجربیات عالی برای کاربران است و Tailwind به سادگی یک راه قدرتمند برای رسیدن سریعتر به آنجا است.

خبرکاو