🔰 Adding Tailwind to Gatsby project

Intro

The complete guide to configuration for Tailwind in the Gatsby framework. We'll explore all required changes and we'll make our project bulletproof.

Our goal

If you want to know the all course concepts, technologies and understand what kind of Node and npm versions you need, check the initial lesson - Course overview.

If you already read this article - jump into Gatsby5 | Tailwind | TypeScript | Cypress | jest and RTL template and check commits to understand the progress.

In previous lesson - 🌟 Adding Eslint with Prettier and Husky to project, we added configuration for Eslint, Husky and Prettier. Now, it's time to add Tailwind to our project.

We want to connect Tailwind framework to Gatsby. This duo is really powerful and makes our life/developer experience much easier. The setup is really easy. It's almost the same as described in the documentation, just some parts are different.

Installation of required dependencies

We need to install the required dependencies to make it work. To be precise, only development dependencies. So, type the following command in your terminal:

npm i --save-dev tailwind postcss gatsby-plugin-postcss autoprefixer

Adding default Tailwind styles

To make Tailwind work, we need to have its default styles attached to main style file. In our case let's create under src directory, the global.css file with following content:

With these 3 lines, we included basic styles like resets, paddings, and margins. Next, we added utility classes like "px-3", ...etc. If we would like to use components - the last line is responsible for adding styles for it.

Now, we need to attach this file with styles to gatsby-browser.ts file, which we need to create at the root of our repository - not under src!

Adding configuration files

Unfortunately, if we try to use styles in any of our components or pages, it will not work. Still, we need to add some configuration stuff. The first config will be the one for Tailwind. Create a tailwind.config.js file under the root directory.

The really important part is the content property. If you add new directories and you want to use styles inside components defined there, you need to add a pattern to the content property. So, if you'll add new components under src/components directory, you need to change this in the following way:

Now, it's time for postcss.config.js file. We need to create it at the root directory.

This file will have an empty configuration - we don't need for our case to add Autoprefixer or change the Tailwind behavior.

Last, the most important part - we need to add installed gatsby-plugin-postcss to our gatsby.config.ts file. This plugin integrates Tailwind with Gatsby and allows us to add additional configuration.

Testing the setup

Now, when you run the project on development environment via npm run start, you'll be able to use Tailwind!

To be sure that everything works correctly also on production build, run npm run build and then, npm run serve - the application will be opened on another port, and you'll have information about that.

The result

To get current result jump into Gatsby5 | Tailwind | TypeScript | Cypress | jest and RTL template and check commits to understand the progress.

Conclusions and next steps

Tailwind works. The setup was kinda quick. Thanks to plugins available in Gatsby ecosystem, it's really easy to configure all what we need.

In the next article, we'll set up a dark theme for Gatsby and Tailwind. Go to 🌟 TailwindCSS dark mode configuration in Gatsby lesson to check.