Getting Autoprefixer to Work with TailwindCSS and Gridsome

Question

I have successfully set up TailwindCSS on Gridsome by following these instructions: https://gridsome.org/docs/assets-css/#tailwind

However, those instructions do not mention how to also set up autoprefixer. So, I gave it a try on my own -- as follows:

npm install autoprefixer
Modified the gridsome.config.js file (see below for modified code with comments of what I changed)
Ran gridsome develop
Added the class of flex to a p to see whether or not there are any vendor prefixes added.

The result...

Nothing. No prefixes (just display: flex;).

Any idea how to get this to work?

Thanks

Modified gridsome.config.js file:

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
      }
    }
  }
};

Moshe Moshe · Accepted Answer · 2019-11-18T14:11:13

It turns out that it is working -- I was just checking the wrong class. It doesn't add prfixies for display: flex (since, I understand, all major browsers support display: flex;).

So I tried the appearance-none class (which sets appearance: none;). And sure enough, it added the prefixes.

A special thanks, btw, to earthboundkid on reddit who came up with the answer: https://www.reddit.com/r/vuejs/comments/dy28wg/getting_autoprefixer_to_work_with_tailwindcss_and/f7y3agc?utm_source=share&utm_medium=web2x

Getting Autoprefixer to Work with TailwindCSS and Gridsome

1 Answers