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

Latest commit

Latest commit 66a5ab9 May 22, 2020

Files

Permalink
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
CHANGELOG.md 📝 Update CHANGLOG.md Mar 6, 2020
LICENSE Create LICENSE Oct 2, 2019
README.md Update README.md 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

README.md

gridsome-plugin-tailwindcss

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.

Install

npm install -D gridsome-plugin-tailwindcss

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.

Customize

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.

Plugins

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

Happy coding!

Buy Me A Coffee

You can’t perform that action at this time.