pnpm add -D tailwindcss @tailwindcss/postcss
postcss.config.mjs اضافه کنید:// postcss.config.mjs
export default {
plugins: {
'@tailwindcss/postcss': {},
},
}
/* app/globals.css */
@import 'tailwindcss';
// app/layout.tsx
import './globals.css'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
// 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 را بررسی کنید.
این محتوا کاملا رایگان توسط تیم کدلپر ترجمه شده و در اختیار شما کاربران عزیز قرار گرفته است، هر گونه کپی برداری برای مقاصد غیر رایگان و بدون ذکر منبع، مورد پیگیری قانونی قرار میگیرد.
ترجمه شده از منبع: https://nextjs.org/docs/app