将 Tailwind 与 Gatsby JS 结合使用

我开始用 Gatsby JS 重建我的个人网站，当然也想用我最喜欢的 CSS 框架 Tailwind CSS！我四处寻找 Gatsby 和 Tailwind 的搭配指南，却找不到完整的解决方案，所以我决定写这篇文章，作为 Gatsby 和 Tailwind 搭配使用的权威指南™ 😄。

仅供参考：如果您遵循本指南，热重新加载仍然有效，并且当您更改 Tailwind 配置文件时也会重新加载！

步骤 1：安装 gatsby-plugin-postcss

gatsby-plugin-postcss是一款 Gatsby 插件，允许你在导入页面/组件的 CSS 文件中使用 PostCSS 功能。Tailwind 是基于 PostCSS 构建的，所以这是一个很好的起点！

要安装插件，请使用您最喜欢的包管理器。

# Using NPM
npm install --save gatsby-plugin-postcss

# Using Yarn
yarn add gatsby-plugin-postcss

步骤 2：配置 Gatsby 以使用 PostCSS 插件

现在我们已经安装了插件，我们需要配置 Gatsby 来使用它！

打开你的gatsby-config.js，并将“gatsby-plugin-postcss”添加到插件数组中。

// gatsby-config.js

module.exports = {
    siteMetadata: { ... },
    plugins: [
        'gatsby-plugin-postcss',
        // ...
    ]
}

步骤3：添加PostCSS配置文件

我们的 PostCSS 插件已经安装完毕，Gatsby 也正在使用它，所以剩下的就是配置 PostCSS 方面了！要配置 PostCSS，请postcss.config.js在项目根目录（与gatsby-config.js文件相同的文件夹）中创建一个空文件。

步骤 4：安装 Tailwind

现在，在我们配置 PostCSS 以使用 Tailwind 之前，我们需要安装它。

# Using NPM
npm install tailwindcss --save-dev

# Using Yarn
yarn add tailwindcss --dev

步骤5：生成Tailwind配置文件

要配置 Tailwind，我们需要添加一个 Tailwind 配置文件。幸运的是，Tailwind 有一个内置脚本可以执行此操作。只需运行以下命令（同样，在项目的根目录中）。

./node_modules/.bin/tailwind init

这将创建一个tailwind.js包含 Tailwind 默认配置的文件。

步骤6：配置PostCSS

好的，我们已经安装并配置了 Tailwind，现在回到 PostCSS 配置。我们需要将 Tailwind 添加到 PostCSS 的插件列表中。

// postcss.config.js

const tailwind = require('tailwindcss')

module.exports = () => ({
    plugins: [tailwind('./tailwind.js')],
})

在上面的示例中，您会看到我们传递了一个文件路径。这就是我们配置文件的路径。因此，如果您想移动或重命名 Tailwind 配置文件，只需记住在postcss.config.js文件中更改文件路径即可。

注意：您可以在插件数组中的 Tailwind 之前或之后添加您想要使用的任何其他 PostCSS 插件，例如 autoprefixer。

步骤 7：添加带有 Tailwind 指令的 CSS 文件

一切准备就绪，我们现在需要做的就是在 CSS 中使用global.cssTailwind！首先，创建一个文件。我的文件位于src/css/global.css。然后，将以下 Tailwind 指令添加到新文件中：

// global.css

@tailwind preflight;

@tailwind components;

@tailwind utilities;

对于这一步，我选择创建一个新global.css文件，但您也可以轻松地将 Tailwind 指令放入现有的 CSS 文件中。

步骤 8：导入我们的 Tailwind CSS

我们需要做的最后一件事是将新的 CSS 文件导入到页面或布局中，以便将 Tailwind CSS 真正注入到页面中。在 中layout.js，或者任何你希望 Tailwind CSS 出现的位置，添加以下导入：

// layout.js

import '../css/global.css'

你完成了！

就是这样，您应该拥有一个功能齐全的 Tailwind + Gatsby 设置，其中包含 Tailwind 配置和热重载！

如果您在此过程中遇到任何问题，请在评论中告诉我，我会很乐意提供帮助和/或修改本文并进行任何更正！

我在一家很棒的公司 Good Work 工作。我们是一支专业的网页开发团队，致力于帮助代理机构、品牌和初创公司的设计团队构建网页和移动端产品。

如果您正在寻找某人来帮助 Gatsby、Vue、Tailwind 或其他项目，请随时联系我们！