使Autoprefixer与TailwindCSS和Gridsome一起使用

问题描述 投票:0回答:1

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

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

  • npm install autoprefixer
  • 修改了gridsome.config.js文件(有关修改后的代码,请参见下文,其中包含我所做的更改)
  • Ran gridsome develop
  • flex的类别添加到p以查看是否添加了任何供应商前缀。

结果...

没事。无前缀(仅display: flex;)。

任何想法如何使它起作用?

谢谢

Modified 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个回答
0
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.