🚨 If you get errors about PostCSS v8, check out Tailwind's docs for the latest info about the compat version.

gridsome-plugin-tailwindcss

This plugin will add Tailwind to your Gridsome project.

Who This Is For

If you want to set up Tailwind with the least amount of effort in a Gridsome project, this is for you. If you want to lean in to the Way of Tailwind—using tailwind.config.js or keep your CSS inside your Vue files' style blocks—this is the plugin for you. If you want to have a global CSS file and dump a bunch of shit in there, you should look elsewhere.

Install

npm install -D gridsome-plugin-tailwindcss [email protected]

npm install -D postcss-import postcss-preset-env #(if you want these plugins and you've updated the config)

Usage

I've gone ahead and automatically imported the default tailwind.css file from the Tailwind npm package. It's just add a CSS file that includes:

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

You do not need to import Tailwind into a CSS file.

You may be wondering, "Where do I add global CSS?!" Short answer, you don't. Long answer, read the Tailwind docs on creating plugins and use tailwind.config.js to add base styles and create components/utilities there.

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-tailwindcss",
      /**
      * These are the default options.

      options: {
        tailwindConfig: './tailwind.config.js',
        presetEnvConfig: {},
        shouldImport: false,
        shouldTimeTravel: false
      }
      */
    },
  ],
};

If you don't supply a config file path, Tailwind defaults will be used.

Plugins

The following PostCSS plugins can be enabled if you install their dependencies.

postcss-import

Install postcss-import and pass shouldImport: true to enable.

postcss-preset-env

Install postcss-preset-env and pass shouldTimeTravel: true to enable. You may also pass a config object to the plugin as presetEnvConfig.

With this one plugin, you should be ready to use Tailwind right away. Keep your customization to tailwind.config.js whenever possible, but you can use the full power of Tailwind in your Vue components when necessary.

Examples

• 🍸 Aperitif — A delectable starter template for your next Gridsome project.
• Example project

Happy coding!