CODEWITHSUNDEEP
vue.jsvuejs2autoprefixertailwind-cssgridsome
Moshe
Moshe

Reputation: 6997

Getting Autoprefixer to Work with TailwindCSS and Gridsome

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:

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

Upvotes: 4

Views: 2431

Answers (1)

Moshe
Moshe

Reputation: 6997

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

Upvotes: 1

Related Questions