本文介绍了如何让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一起工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！