gridsome-plugin-tailwindcss2

This plugin will add latest version of Tailwind (currently v3) 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