我已按照以下说明在 Gridsome 上成功设置 TailwindCSS:https://gridsome.org/docs/assets-css/#tailwind
但是,这些说明没有提到如何设置自动前缀。所以,我自己试了一下——如下:
gridsome.config.js
文件(有关修改后的代码以及我更改内容的注释,请参见下文)gridsome develop
flex
的类到 p
查看是否添加了任何供应商前缀。 结果...
没有。没有前缀(只有
display: flex;
)。知道如何让它发挥作用吗?
谢谢
修改 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
关于vue.js - 让 Autoprefixer 与 TailwindCSS 和 Gridsome 一起工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58914039/