「及時」模式:全新世代的 Tailwind CSS
Tailwind CSS on GitHub

在 Next.js 安裝 Tailwind CSS

在 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 CSS

Tailwind CSS 需要 Node.js 12.13.0 以上版本。

使用 npm 安裝 Tailwind

使用 npm 安裝 Tailwind 和它需要的依賴套件 (peer-dependencies):

# 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

Next.js v9 和 older 尚未支援 PostCSS 8 ,所以你需要安裝 Tailwind CSS v2.0 PostCSS 7 相容版本,如我們在上方顯示的。

建立設定檔案 files

然後產生 tailwind.config.jspostcss.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: [],
}

想了解更多關於 Tailwind 的設定可以到 配置文件

這也會同時建立 postcss.config.js 檔案,並包含 tailwindcssautoprefixer 的設定:

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

如果你打算使用別的 PostCSS 插件,你應該要閱讀我們在 using PostCSS as your preprocessor 的文件獲得更完整的資訊,來找出最合適的方式跟 Tailwind 一同運作。

讓 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 中直接引用 (import) 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.cssHome.module.css,只是也記得從它們的依賴元件中刪除其引用關聯。

在你的 CSS 中使用 Tailwind

打開 Next.js 預先為你建立好的 ./styles/globals.css 檔案

使用 @tailwind 指令來引用 Tailwind 的 basecomponentsutilities 樣式,並且取代原本檔案的內容:

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

Tailwind 會在建置時將這些指令替換成你配置系統時所對應的樣式內容。

閱讀我們的 增加基底樣式提取成元件增加新功能 文件以使用 Tailwind 為你自定義的 CSS 做最好的擴充。

最後,確保你的 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 專案中運行。

接著來了解功能優先流程