The complete guide to configuration for Tailwind in the Gatsby framework. We'll explore all required changes and we'll make our project bulletproof.
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
- Autoprefixer is a PostCSS plugin that automatically adds vendor prefixes to your CSS code, ensuring compatibility with various web browsers and reducing the need for manual prefixing,
- PostCSS is a versatile tool for processing CSS, offering a wide range of plugins to transform and optimize your stylesheets,
- Gatsby-plugin-postcss integrates PostCSS into Gatsby projects, allowing you to leverage the capabilities of PostCSS to enhance your site's CSS and optimize performance,
- TailwindCSS is a utility-first CSS framework that simplifies and streamlines the process of creating responsive and well-structured user interfaces.
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.
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.
- 1. Introduction
- 2. Creating project