gridsome-plugin-tailwindcss

This plugin will add Tailwind to your Gridsome project.

Who's This 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 crap in there, you'll wind up fighting this plugin.

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 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.

To use this plugin, run npm install -D gridsome-plugin-tailwindcss add the following to your gridsome.config.js.

module.exports = {
  plugins: [
    {
      use: 'gridsome-plugin-tailwindcss',
      /* These are the default options. You don't need to set any options to get going.
      options: {
        tailwindConfig: './some/file/js',
        purgeConfig: {},
        presetEnvConfig: {},
        shouldPurge: true,
        shouldImport: true,
        shouldTimeTravel: true
      }
      */
    }
  ]
}

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

The following PostCSS plugins are also included with this plugin:

PurgeCSS

PurgeCSS is enabled by default. If you'd like to disable it, pass shouldPurge: false to the plugin options object.

postcss-import

postcss-import included by default. Pass shouldImport: false to disable.

postcss-preset-env

postcss-preset-env included by default. Pass shouldTimeTravel: false to disable. 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 (including @apply) in your Vue components when necessary.

Examples

Example project

Happy coding!