让AutoRefixer与TailwindCSS和Gridsome一起工作

Question

我已经成功地建立了TailwindCSS上Gridsome以下说明：https://gridsome.org/docs/assets-css/#tailwind

但是，这些说明并没有提到如何设置autoprefixer。因此，我自己尝试了一下，如下所示：

• npm安装自动刷新器
• 修改了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
      }
    }
  }
};

Answer 1

结果证明它是有效的——我只是检查了错误的类。它没有为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