gridsome-plugin-tailwindcss2

This plugin will add latest version of Tailwind (currently v2) to your Gridsome project.

What's the difference between this plugin and gridsome-plugin-tailwindcss?

This plugin lets you use the full power of the latest TailwindCSS (with JIT mode and all the good stuff It seems that the compatibility build now also supports JIT and is identical to the PostCSS 8 build). The other plugin relies on TailwindCSS PostCSS7 compatibility build.

Install

yarn add -D gridsome-plugin-tailwindcss2 tailwindcss@latest postcss@latest autoprefixer@latest

Usage

Have a main CSS file with the following:

@tailwind base;
@tailwind components;
@tailwind utilities;
// rest of the file

If you need to create tailwind.config.js, run ./node_modules/.bin/tailwind init to create one.

Customize

Set any options you want to set in gridsome.config.js.

module.exports = {
  plugins: [
    {
      use: "gridsome-plugin-tailwindcss2",
      options: {
        tailwindConfigFile: './tailwind.config.js',
        mainCssFile: './src/assets/css/main.css',
      }
    },
    // ...
  ],
};

Credits

• gridsome-plugin-tailwindcss