4

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

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

  • npm 安装自动前缀
  • 修改了gridsome.config.js文件（请参阅下面的修改代码以及我更改的注释）
  • 冉gridsome develop
  • 将类添加flex到 ap以查看是否添加了任何供应商前缀。

结果...

没有什么。没有前缀（只有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
      }
    }
  }
};
4

1 回答 1

1

事实证明它正在工作——我只是检查了错误的课程。它不会为display: flex（因为，我理解，所有主要浏览器都支持display: flex;）添加 prfixies。

所以我尝试了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

于 2019-11-18T14:11:13.417 回答