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

有没有人设法让Tailwind.css与Gatsby.js一起工作？

用Gatsby配置postCSS插件有点棘手...如果有人设法通过Gatsby启动Tailwind并运行，我很想知道如何做!

最佳答案

多亏了this post，我才能使它正常工作(包括热重装)。

基本上我必须另外安装postcss和autoprefixer:
npm install autoprefixer postcss-cli
我在此内容的Gatsby网站文件夹的根目录中添加了一个postcss.config.js(tailwind.js是我的Tailwind配置-您的名称可能有所不同):

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

然后，我在package.json中添加了一个CSS watch和build脚本，并将这些脚本包括在默认的build和build脚本中:

"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)文件名和位置特定于我的元素。请随意使用您自己的约定。)

让我知道，如果这对您有用。

关于css - 如何使Tailwind.css与Gatsby.js一起使用？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48272554/