This package has been deprecated

    Author message:

    This package is no longer maintained.


    4.1.1 • Public • Published

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


    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.


    npm install -D gridsome-plugin-tailwindcss tailwindcss@latest

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


    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.


    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.


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


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


    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.


    Happy coding!

    Buy Me A Coffee


    npm i gridsome-plugin-tailwindcss

    DownloadsWeekly Downloads






    Unpacked Size

    6.59 kB

    Total Files


    Last publish


    • brandonpittman