让 Autoprefixer 与 TailwindCSS 和 Gridsome 一起工作答案

【问题标题】：Getting Autoprefixer to Work with TailwindCSS and Gridsome让 Autoprefixer 与 TailwindCSS 和 Gridsome 一起工作
【发布时间】：2020-03-13 19:00:07
【问题描述】：

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

但是，这些说明并未提及如何设置自动前缀。所以，我自己试了一下——如下：

npm install autoprefixer
修改了gridsome.config.js 文件（请参阅下面的修改后的代码以及我更改的 cmets）
跑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
      }
    }
  }
};

【问题讨论】：

标签： vue.js vuejs2 autoprefixer tailwind-css gridsome

【解决方案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

【讨论】：