在 Gatsby 中安裝 Tailwind CSS

創(chuàng)建您的工程

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

gatsby new my-project
cd my-project

初始化 Tailwind CSS

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

通過(guò) npm 安裝 Tailwind

安裝 ?gatsby-plugin-postcss? 和 Tailwind 以及其它依賴(lài)項(xiàng):

npm install -D gatsby-plugin-postcss tailwindcss@latest postcss@latest autoprefixer@latest

創(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: ['./src/**/*.{js,jsx,ts,tsx}'],
        darkMode: false, // or 'media' or 'class'
        theme: {
            extend: {},
        },
        variants: {
            extend: {},
        },
        plugins: [],
    }

啟用 gatsby-plugin-postcss

在您的 ?gatsby-config.js? 文件中，啟用 postcss 插件。

    // gatsby-config.js
    module.exports = {
        /* Your site config here */
        plugins: [],
        plugins: ['gatsby-plugin-postcss'],
    }

在您的 CSS 中引入 Tailwind

創(chuàng)建 ?./src/styles/global.css? 文件 并使用 ?@tailwind? 指令來(lái)包含 Tailwind的 ?base?、 ?components ?和 ?utilities ?樣式，來(lái)替換掉原來(lái)的文件內(nèi)容。

/* ./src/styles/global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

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

最后，如果在您的項(xiàng)目根目錄不存在 ?./gatsby-browser.js? 文件，請(qǐng)創(chuàng)建一個(gè)，并導(dǎo)入您的 CSS 文件。

    // ./gatsby-browser.js
    import './src/styles/global.css';

閱讀有關(guān)使用全局樣式的 Gatsby 文檔，以了解有關(guān)在 Gatsby 中使用全局 CSS 文件的更多信息。

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