在 Gatsby 中安装 Tailwind CSS

创建您的工程

如果您还没有建立一个新的 Gatsby 项目，请先创建一个新的项目。最常见的方法是使用 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

创建您的配置文件

接下来，生成您的 ​tailwind.config.js​ 和 ​postcss.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: [],
}

这也将会创建一个包含已配置好的 ​tailwindcss ​和 ​autoprefixer ​的 ​postcss.config.js​ 配置文件：

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

配置 Tailwind 来移除生产环境下没有使用到的样式声明

在您的 ​tailwind.config.js​ 文件中，配置 ​purge ​选项指定所有的 pages 和 components 文件，使得 Tailwind 可以在生产构建中对未使用的样式进行摇树优化。

    // 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

创建 ​./src/styles/global.css​ 文件 并使用 ​@tailwind​ 指令来包含 Tailwind的 ​base​、 ​components ​和 ​utilities ​样式，来替换掉原来的文件内容。

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

Tailwind 会在构建时将这些指令转换成所有基于您配置的设计系统生成的样式文件。

最后，如果在您的项目根目录不存在 ​./gatsby-browser.js​ 文件，请创建一个，并导入您的 CSS 文件。

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

阅读有关使用全局样式的 Gatsby 文档，以了解有关在 Gatsby 中使用全局 CSS 文件的更多信息。

您已经完成了所有步骤！现在，当您运行 ​gatsby develop​, Tailwind CSS 就可以在您的 Gatsby 项目中使用了。