如何让 Tailwind.css 与 Gatsby.js 一起使用？

有没有人设法得到Tailwind.css https://tailwindcss.com与...一起工作Gatsby.js https://www.gatsbyjs.org?

使用 Gatsby 配置 postCSS 插件有点棘手...如果有人设法让 Tailwind 与 Gatsby 一起运行并运行，我很想知道如何！

我设法让这个工作（包括热重载）感谢这个帖子 https://medium.com/@mikeeeeeeey/create-react-app-tailwind-css-feat-postcss-631d9e33ba8c.

基本上我还必须另外安装 postcss 和 autoprefixer ：

npm install autoprefixer postcss-cli

我添加了一个postcss.config.js到我的 Gatsby 站点文件夹的根目录，其中包含以下内容（tailwind.js 是我的 Tailwind 配置 - 你的配置可能会有所不同）：

const tailwindcss = require('tailwindcss');
module.exports = {
    plugins: [
        tailwindcss('./tailwind.js'),
        require('autoprefixer'),
    ],
};

然后我添加了一个CSS监视和构建脚本到我的package.json，并将这些脚本包含在我的默认开发和构建脚本中：

"scripts": {
  "build:css": "postcss src/layouts/index.css -o src/layouts/generated.css",
  "watch:css": "postcss src/layouts/index.css -o src/layouts/generated.css -w",
  "build": "npm run build:css && gatsby build",
  "develop": "npm run watch:css & gatsby develop",
  ...
}

（请注意，我的 css 的输入 (index.css) 和输出 ( generated.css) 文件名和位置特定于我的项目。请随意使用您自己的约定。）

如果这对您有用，请告诉我。