How to

How to add Tailwind CSS to a Gridsome project

Learn how to add Tailwind CSS to your Gridsome project
Jonathan Machado avatar picture

By Jonathan Machado

March 1, 2020

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:

Stay in touch

Receive updates about new articles as well as curated and helpful content for web devs. No spam, unsubscribe at any time.