vue.js - 让 Autoprefixer 与 TailwindCSS 和 Gridsome 一起工作

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