創(chuàng)建您的工程

如果您還沒有建立一個新的 Next.js 項目，請先創(chuàng)建一個新的項目。最常見的方法是使用 ?Create Next App?：

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

這將根據官方 Next.js 示例自動配置您的 Tailwind 設置。如果您想手動配置 Tailwind，請繼續(xù)閱讀本指南的其余部分。

初始化 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

創(chuàng)建您的配置文件

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

npx tailwindcss init -p

這將會在您的項目根目錄創(chuàng)建一個最小化的 ?tailwind.config.js? 文件：

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

這也將會創(chuàng)建一個包含已配置好的 ?tailwindcss ?和 ?autoprefixer ?的 ?postcss.config.js? 配置文件：

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

配置 Tailwind 來移除生產環(huán)境下沒有使用到的樣式聲明

在您的 ?tailwind.config.js? 文件中，配置 ?purge ?選項指定所有的 pages 和 components 文件，使得 Tailwind 可以在生產構建中對未使用的樣式進行搖樹優(yōu)化。

// 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 默認為您創(chuàng)建的任何 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 會在構建時將這些指令轉換成所有基于您配置的設計系統(tǒng)生成的樣式文件。

最后，確保您的 CSS 文件被導入到您的 ?pages/_app.js? 組件中。

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

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

export default MyApp

如果您選擇使用與默認的 ?globals.css? 文件不同的文件，您需要相應地更新導入。

您已經完成了所有步驟！現(xiàn)在，當您運行 ?npm run dev?, Tailwind CSS 就可以在您的 Next.js 項目中使用了。