How to add Tailwind CSS to a Gridsome project

Although you can install and configure everything manually, it's easier to use the plugin as suggested in the Gridsome docs:

"The quickest and easiest way to get up and running with Tailwind CSS in your project is to install it with the Gridsome Tailwind Plugin. A Gridsome plugin will typically have the majority of the boilerplate and configuration done for you, eliminating a lot of the set up time." - Official docs

Adding Tailwind CSS to your project is really straightforward and can be done in 3 steps:

1. Install Tailwind as a plugin

npm install -D gridsome-plugin-tailwindcss

2. Create Tailwind configuration file

Run ./node_modules/.bin/tailwind init to create Talwind's configuration file (tailwind.config.js) which we can use later to customize colors and other properties:

$ ./node_modules/.bin/tailwind init

   tailwindcss 1.2.0
  
   ✅ Created Tailwind config file: tailwind.config.js

3. Configure the plugin

We will need to add the following configuration to our 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
      }
      */
    }
  ]
}

And that's it! You should be able to start adding Tailwind classes to your html now.

Please, check the official documentation if you need further details: https://gridsome.org/plugins/gridsome-plugin-tailwindcss.