Skip to content
A Tailwind plugin for Gridsome.
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/workflows Create npmpublish.yml Feb 14, 2020
.gitignore Fix the order of postcss-import and tailwindcss (#9) Jun 2, 2019
LICENSE Create LICENSE Oct 2, 2019
README.md wip Feb 7, 2020
gridsome.client.js Update deps Dec 25, 2019
gridsome.server.js
package-lock.json Bump xo from 0.26.0 to 0.26.1 (#28) Feb 15, 2020
package.json Bump xo from 0.25.3 to 0.26.0 (#27) Feb 13, 2020
tags wip Dec 25, 2019

README.md

gridsome-plugin-tailwindcss

Example project

This plugin will add Tailwind to your Gridsome project. 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.

Happy coding!

Buy Me A Coffee

You can’t perform that action at this time.