我已按照以下说明在Gridsome上成功设置了TailwindCSS:https://gridsome.org/docs/assets-css/#tailwind
但是,这些说明没有提及如何也设置自动前缀。因此,我自己尝试一下-如下:
gridsome.config.js
文件(有关修改后的代码,请参见下文,其中包含我所做的更改)gridsome develop
flex
的类别添加到p
以查看是否添加了任何供应商前缀。结果...
没事。无前缀(仅display: flex;
)。
任何想法如何使它起作用?
谢谢
Modified gridsome.config.js文件:
const autoprefixer = require("autoprefixer"); // ADDED THIS LINE
const tailwind = require("tailwindcss");
const purgecss = require("@fullhuman/postcss-purgecss");
const postcssPlugins = [tailwind(), autoprefixer()]; // ADDED `autoprefixer()` to postcssPlugins array
if (process.env.NODE_ENV === "production") postcssPlugins.push(purgecss());
module.exports = {
siteName: "Gridsome",
plugins: [],
css: {
loaderOptions: {
postcss: {
plugins: postcssPlugins
}
}
}
};
事实证明它正在工作-我只是在检查错误的类。它不会为display: flex
添加任何前缀(因为据我了解,所有主流浏览器都支持display: flex;
)。
所以我尝试了appearance-none
类(设置了appearance: none;
)。确实,它添加了前缀。
顺便说一句,特别感谢reddit上的Earthboundkid提出了答案:https://www.reddit.com/r/vuejs/comments/dy28wg/getting_autoprefixer_to_work_with_tailwindcss_and/f7y3agc?utm_source=share&utm_medium=web2x