在 Next.js 中安装 Tailwind CSS

创建您的工程

如果您还没有建立一个新的 Next.js 项目，请先创建一个新的项目。最常见的方法是使用 ​Create Next App​：

npx create-next-app -e with-tailwindcss my-project
cd my-project

这将根据官方 Next.js 示例自动配置您的 Tailwind 设置。如果您想手动配置 Tailwind，请继续阅读本指南的其余部分。

初始化 Tailwind CSS

Tailwind CSS 需要 Node.js 12.13.0 或更高版本。

通过 npm 安装 Tailwind

安装 Tailwind 以及其它依赖项:

# If you're on Next.js v10 or newer
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

# If you're on Next.js v9 or older
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

创建您的配置文件

接下来，生成您的 ​tailwind.config.js​ 和 ​postcss.config.js​ 文件：

npx tailwindcss init -p

这将会在您的项目根目录创建一个最小化的 ​tailwind.config.js​ 文件：

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

这也将会创建一个包含已配置好的 ​tailwindcss ​和 ​autoprefixer ​的 ​postcss.config.js​ 配置文件：

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

配置 Tailwind 来移除生产环境下没有使用到的样式声明

在您的 ​tailwind.config.js​ 文件中，配置 ​purge ​选项指定所有的 pages 和 components 文件，使得 Tailwind 可以在生产构建中对未使用的样式进行摇树优化。

// tailwind.config.js
  module.exports = {
    purge: [],
    purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

在您的 CSS 中加入 Tailwind

当在 Next.js 项目的 CSS 中加入 Tailwind 时，有两种方法可以选择：

在您的 JS 中直接导入 Tailwind

如果您不打算在您的项目中编写任何自定义 CSS，最快的方法是直接在 ​pages/_app.js​ 中导入 Tailwind。

// pages/_app.js
  import '../styles/globals.css'
  import 'tailwindcss/tailwind.css'

  function MyApp({ Component, pageProps }) {
    return <Component {...pageProps} />
  }

  export default MyApp

如果您不打算使用它们，您可以安全地删除 Next.js 默认为您创建的任何 CSS 文件，如 ​globals.css​ 和 ​Home.module.css​。确保在您的组件中也删除对它们的任何引用。

在您的 CSS 中引入 Tailwind

打开 Next.js 默认为您生成的 ./styles/globals.css 文件 并使用 ​@tailwind​ 指令来包含 Tailwind的 ​base​、 ​components ​和 ​utilities ​样式，来替换掉原来的文件内容。

/* ./styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind 会在构建时将这些指令转换成所有基于您配置的设计系统生成的样式文件。

最后，确保您的 CSS 文件被导入到您的 ​pages/_app.js​ 组件中。

// pages/_app.js
import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

如果您选择使用与默认的 ​globals.css​ 文件不同的文件，您需要相应地更新导入。

您已经完成了所有步骤！现在，当您运行 ​npm run dev​, Tailwind CSS 就可以在您的 Next.js 项目中使用了。