我已经成功地建立了TailwindCSS上Gridsome以下说明:https://gridsome.org/docs/assets-css/#tailwind
但是,这些说明并没有提到如何设置autoprefixer。因此,我自己尝试了一下,如下所示:
gridsome。配置。js
文件(请参见下面的修改代码,其中包含我所更改内容的注释)gridsome develope
flex
类添加到p
以查看是否添加了任何供应商前缀李>结果。。。
没有什么没有前缀(只有display:flex;
)。
知道怎么让这个工作吗?
谢谢
修改网格。配置。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;
)。
所以我尝试了外观none
类(设置外观:none;
)。果然,它添加了前缀。
顺便说一句,特别感谢红迪网上的地球小子,他想出了答案:https://www.reddit.com/r/vuejs/comments/dy28wg/getting_autoprefixer_to_work_with_tailwindcss_and/f7y3agc?utm_source=share