NextJS中文文档 - Tailwind Css

Tailwind CSS 是一个功能类优先的 CSS 框架，与 Next.js 完全兼容。本指南将引导你如何在 Next.js 应用程序中安装 Tailwind CSS。

安装 Tailwind

安装必要的 Tailwind CSS 包：

npm install -D tailwindcss @tailwindcss/postcss postcss

提示：如果你使用 create-next-app CLI 创建项目，Next.js 会询问你是否想要安装 Tailwind 并自动配置项目。

配置 Tailwind

在项目根目录中创建一个 postcss.config.mjs 文件，并将 @tailwindcss/postcss 插件添加到你的 PostCSS 配置中：

/** @type {import('tailwindcss').Config} */
export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

从 Tailwind v4 开始，默认情况下不需要任何配置。如果你确实需要配置 Tailwind，可以按照官方文档来配置全局 CSS 文件。

如果你有现有的 Tailwind v3 项目，还有一个升级 CLI 和指南。

与 Turbopack 一起使用

从 Next.js 13.1 开始，Turbopack 支持 Tailwind CSS 和 PostCSS。