Tailwind CSS
Tailwind CSS 是一个实用至上的 CSS 框架,与 Next.js 完全兼容。
安装 Tailwind
安装必要的 Tailwind CSS 包
终端
npm install -D tailwindcss @tailwindcss/postcss postcss
配置 Tailwind
在你的项目根目录中创建一个 postcss.config.mjs
文件,并将 @tailwindcss/postcss
插件添加到你的 PostCSS 配置中
postcss.config.mjs
/** @type {import('tailwindcss').Config} */
export default {
plugins: {
'@tailwindcss/postcss': {},
},
}
从 Tailwind v4 开始,默认情况下无需任何配置。如果你确实需要配置 Tailwind,你可以参考官方文档来配置全局 CSS 文件。
如果你有一个现有的 Tailwind v3 项目,还有一个升级 CLI和指南。
导入样式
添加 Tailwind CSS 指令,Tailwind 将使用这些指令将其生成的样式注入到你应用中的全局样式表中,例如
app/globals.css
@import 'tailwindcss';
在根布局 (app/layout.tsx
) 中,导入 globals.css
样式表以将样式应用于你应用中的每个路由。
app/layout.tsx
import type { Metadata } from 'next'
// These styles apply to every route in the application
import './globals.css'
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
使用类
安装 Tailwind CSS 并添加全局样式后,你可以在你的应用中使用 Tailwind 的实用程序类。
app/page.tsx
export default function Page() {
return <h1 className="text-3xl font-bold underline">Hello, Next.js!</h1>
}
与 Turbopack 一起使用
从 Next.js 13.1 开始,Turbopack 支持 Turbopack 的 Tailwind CSS 和 PostCSS。
这是否有帮助?