Tailwind CSS در React – آموزش utility-first و نصب در Vite

Tailwind CSS فریم‌ورک utility-first است: به‌جای نوشتن CSS سفارشی زیاد، کلاس‌های آماده را مستقیم در className می‌گذارید. هر کلاس یک کار کوچک انجام می‌دهد — p-4 برای padding، text-center برای وسط‌چین — و با ترکیب آن‌ها UI ساخته می‌شود.

مزایای Tailwind در React

• سرعت توسعه — بدون جابه‌جایی بین فایل CSS و JSX
• کاهش CSS سفارشی — هزاران utility آماده
• Responsive — پیشوندهای sm:، md:، lg:
• حجم بهینه در build — فقط کلاس‌های استفاده‌شده در خروجی

نصب (Vite + React)

۱. نصب پکیج‌ها

npm install -D tailwindcss postcss autoprefixer

۲. init

npx tailwindcss init -p

۳. تنظیم tailwind.config.js

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

۴. directives در index.css

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

استفاده در JSX

<div className="p-4 bg-blue-500 text-white rounded-lg hover:bg-red-500 transition-colors">
  محتوا
</div>

Responsive

<div className="text-sm md:text-lg lg:text-xl">
  متن responsive
</div>

• sm: — موبایل بزرگ‌تر
• md: — تبلت
• lg: — دسکتاپ

مقایسه با روش‌های دیگر

مستندات

کلاس‌های بیشتر در مستندات رسمی Tailwind.

جمع‌بندی

Tailwind CSS برای React و Vite setup ساده دارد و با utility classها UI را سریع می‌سازد. content path را در config درست تنظیم کنید تا purge کار کند و bundle سبک بماند. اگر از className زیاد در JSX راحت هستید، Tailwind یکی از پرکاربردترین انتخاب‌های امروز است.