如何让Tailwind.css与Gatsby.js一起工作？

问题描述

是否有人成功使用Tailwind.css使用Gatsby.js？

使用Gatsby配置postcss插件有点棘手...如果有人已经成功地安装了TailWind并与盖茨比一起运行，我很想知道是如何做到的！

推荐答案

多亏了this post，我才能让它正常工作(包括热重新加载)。

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

npm install autoprefixer postcss-cli

我在My Gatsby Site文件夹的根目录下添加了postcss.config.js，其中包含以下内容(Tailwind.js是我的尾风配置--您的配置可能会有不同的名称)：

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

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

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

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

这篇关于如何让Tailwind.css与Gatsby.js一起工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！