Skip to content
A Tailwind plugin for Gridsome.
Branch: master
Clone or download

Latest commit

Latest commit 66a5ab9 May 22, 2020


Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/workflows Create npmpublish.yml Feb 14, 2020
.eslintrc.js 2.2.48 Apr 30, 2020
.gitignore Bump deps Mar 13, 2020 📝 Update Mar 6, 2020
LICENSE Create LICENSE Oct 2, 2019 Update May 22, 2020
gridsome.client.js 2.2.48 Apr 30, 2020
gridsome.server.js 2.2.48 Apr 30, 2020
package.json 2.2.48 Apr 30, 2020
tags 2.2.48 Apr 30, 2020


This plugin will add Tailwind to your Gridsome project.

Currently working on v3, which will remove PurgeCSS capabilities

(because Tailwind 1.4+ has it baked in)

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


npm install -D gridsome-plugin-tailwindcss


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.


Set any options you want to set in 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. Seriously, you don't need to declare tailwind.config.js.

      options: {
        tailwindConfig: './tailwind.config.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 is enabled by default. If you'd like to disable it, pass shouldPurge:false to the plugin options object.


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


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.


Happy coding!

Buy Me A Coffee

You can’t perform that action at this time.