Question

我已按照以下说明成功在Gridsome上设置了TailwindCSS：https://gridsome.org/docs/assets-css/#tailwind

但是，这些说明没有提及如何设置自动前缀。因此，我自己尝试一下-如下：

npm安装自动前缀
修改了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
      }
    }
  }
};

Answer 1

事实证明它正在运行-我只是在检查错误的类。它不会为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

使Autoprefixer与TailwindCSS和Gridsome一起使用

1 个答案: