کتابخانه Tailwind CSS یک فریم‌ورک مبتنی بر کلاس‌های کاربردی (Utility-first) است که کلاس‌های سطح پایین (Low-level) را برای ساخت طراحی‌های سفارشی در اختیار شما قرار می‌دهد.
نصب و راه‌اندازی Tailwind
برای شروع، ابتدا باید پکیج‌های مربوطه را نصب کنید:
pnpm add -D tailwindcss @tailwindcss/postcssسپس، پلاگین PostCSS را به فایل
postcss.config.mjs اضافه کنید:// postcss.config.mjs
export default {
plugins: {
'@tailwindcss/postcss': {},
},
}حالا باید Tailwind را در فایل CSS سراسری (Global) خود ایمپورت کنید:
/* app/globals.css */
@import 'tailwindcss';در مرحله بعد، فایل CSS را در Root Layout برنامه خود فراخوانی کنید:
// app/layout.tsx
import './globals.css'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}اکنون می‌توانید به راحتی از کلاس‌های کاربردی Tailwind در کامپوننت‌های خود استفاده کنید:
// app/page.tsx
export default function Page() {
return (
<main className="flex min-h-screen flex-col items-center justify-between p-24">
<h1 className="text-4xl font-bold">Welcome to Next.js!</h1>
</main>
)
}نکته مهم: اگر نیاز به پشتیبانی از مرورگرهای بسیار قدیمی دارید، حتماً دستورالعمل‌های نصب Tailwind CSS v3 را بررسی کنید.
این محتوا کاملا رایگان توسط تیم کدلپر ترجمه شده و در اختیار شما کاربران عزیز قرار گرفته است، هر گونه کپی برداری برای مقاصد غیر رایگان و بدون ذکر منبع، مورد پیگیری قانونی قرار میگیرد.
ترجمه شده از منبع: منبع مستندات