在 Next.js 中安裝 Tailwind CSS

創(chuàng)建您的工程

如果您還沒(méi)有建立一個(gè)新的 Next.js 項(xiàng)目，請(qǐng)先創(chuàng)建一個(gè)新的項(xiàng)目。最常見(jiàn)的方法是使用 ?Create Next App?：

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

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

初始化 Tailwind CSS

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

通過(guò) npm 安裝 Tailwind

安裝 Tailwind 以及其它依賴(lài)項(xiàng):

# 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)建您的配置文件

接下來(lái)，生成您的 ?tailwind.config.js? 和 ?postcss.config.js? 文件：

npx tailwindcss init -p

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

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

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

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

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

在您的 ?tailwind.config.js? 文件中，配置 ?purge ?選項(xiàng)指定所有的 pages 和 components 文件，使得 Tailwind 可以在生產(chǎn)構(gòu)建中對(duì)未使用的樣式進(jìn)行搖樹(shù)優(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

當(dāng)在 Next.js 項(xiàng)目的 CSS 中加入 Tailwind 時(shí)，有兩種方法可以選擇：

在您的 JS 中直接導(dǎo)入 Tailwind

如果您不打算在您的項(xiàng)目中編寫(xiě)任何自定義 CSS，最快的方法是直接在 ?pages/_app.js? 中導(dǎo)入 Tailwind。

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

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

  export default MyApp

如果您不打算使用它們，您可以安全地刪除 Next.js 默認(rèn)為您創(chuàng)建的任何 CSS 文件，如 ?globals.css? 和 ?Home.module.css?。確保在您的組件中也刪除對(duì)它們的任何引用。

在您的 CSS 中引入 Tailwind

打開(kāi) Next.js 默認(rèn)為您生成的 ./styles/globals.css 文件 并使用 ?@tailwind? 指令來(lái)包含 Tailwind的 ?base?、 ?components ?和 ?utilities ?樣式，來(lái)替換掉原來(lái)的文件內(nèi)容。

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

Tailwind 會(huì)在構(gòu)建時(shí)將這些指令轉(zhuǎn)換成所有基于您配置的設(shè)計(jì)系統(tǒng)生成的樣式文件。

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

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

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

export default MyApp

如果您選擇使用與默認(rèn)的 ?globals.css? 文件不同的文件，您需要相應(yīng)地更新導(dǎo)入。

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