How to set up Tailwind CSS with gridsome

Currently, installing tailwind (without specific versions) will not easily work with Gridsome, because of incompatibilities with Postcss 8.

You may get errors when running gridsome develop such as true is not a PostCSS plugin. This is likely due to PostCSS 8.

Here is how I got around these issues...

Add these dev dependencies to package.json:

    "@tailwindcss/postcss7-compat": "^2.0.2",
    "autoprefixer": "^9",
    "gridsome-plugin-tailwindcss": "^4.1.1",
    "postcss": "^7",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat"

(and run yarn to install them)

Then in gridsome.config.js:

// import tailwind at the top of the file
const tailwindcss = require("tailwindcss");

module.exports = {
 // ... (the rest of your config)

  css: {
    loaderOptions: {
      postcss: {
        plugins: [

  plugins: [
      use: "gridsome-plugin-tailwindcss",

      // these options are optional, as they are copies of the default values...
      options: {
        tailwindConfig: './tailwind.config.js',
        presetEnvConfig: {},
        shouldImport: false,
        shouldTimeTravel: false
    // ... the rest of your plugins

And lastly create a tailwind.config.js:

module.exports = {
  purge: [
  theme: {
    // your tailwind config goes here
    // container: {
    //  center: true,
    // },

And it should work! You can try it out by adding this in a vue component:

<p class="text-2xl mb-2 text-black text-center">Example of tailwind</p>

Or in your index.js add


And in app.css add some tailwind such as:

@tailwind base;
@tailwind tailwind;
@tailwind components;

body { background : bg-red text-blue; }

Probably by the time you read this the issues are resolved. The exact version of Gridsome that I used this with was 0.7.23.

(The config above will auto prune unused Tailwind css rules, to keep your css file size down.)

Comments How to set up Tailwind CSS with gridsome