This package has been deprecated

    Author message:

    This package is no longer maintained.

    gridsome-plugin-tailwindcss

    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.

    gridsome-plugin-tailwindcss

    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.

    Install

    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)

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

    Customize

    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.

    Plugins

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

    postcss-import

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

    postcss-preset-env

    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.

    Examples

    Happy coding!

    Buy Me A Coffee

    Install

    npm i gridsome-plugin-tailwindcss

    DownloadsWeekly Downloads

    1,100

    Version

    4.1.1

    License

    MIT

    Unpacked Size

    6.59 kB

    Total Files

    6

    Last publish

    Collaborators

    • brandonpittman