在 Gatsby 中安裝 Tailwind CSS

創(chuàng)建您的工程

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

gatsby new my-project
cd my-project

初始化 Tailwind CSS

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

通過 npm 安裝 Tailwind

安裝 ?gatsby-plugin-postcss? 和 Tailwind 以及其它依賴項:

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

創(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 來移除生產(chǎn)環(huán)境下沒有使用到的樣式聲明

在您的 ?tailwind.config.js? 文件中，配置 ?purge ?選項指定所有的 pages 和 components 文件，使得 Tailwind 可以在生產(chǎn)構(gòu)建中對未使用的樣式進行搖樹優(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? 指令來包含 Tailwind的 ?base?、 ?components ?和 ?utilities ?樣式，來替換掉原來的文件內(nèi)容。

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

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

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

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

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

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