Integrating Tailwind CSS into a React Application

Tailwind CSS is a low-level CSS framework that’s highly customizable. Unlike other frameworks or UI kits that provide pre-designed components (buttons, cards, modals, etc.) to help you get started quickly but can be cumbersome to customize later, Tailwind focuses on low-level utility classes (utility-first), allowing you to build your own design without worrying about overriding existing styles.

In this post, I’ll guide you on how to integrate Tailwind CSS into a React app

Create a React App

The simplest way to create a React app is by using the create-react-app script with npx

Using npx lets you run the create-react-app script without needing to install the package.

Adding dependencies

Install the following devDependencies to set up Tailwind CSS

Besides Tailwind CSS, we’ll also install:

PostCSS: A tool for analyzing and transforming styling using JS plugins, which helps with CSS suggestions, supporting variables and mixins, compiling new CSS features, etc.
Autoprefixer: A PostCSS plugin that automatically adds vendor prefix (-webkit-, -moz-, -ms-, -o-, etc.) based on data from Can I Use to ensure your CSS works on multiple browsers.

Configuring PostCSS

PostCSS helps manage and configure your CSS build process.

Create a config file:

Add the following config:

This build process uses two plugins: tailwindcss and autoprefixer.

Injecting Tailwind CSS

Create a sub-folder named styles inside the src folder. In the styles folder, create a file called tailwind.css.

Or use the command line:

Import the following modules from Tailwind CSS:

You can place the tailwind.css file in any folder you like, such as src/static, src/assets, src/styles ...

Adding build script

Open the package.json file and add the following build script (inside the scripts object):

This script uses PostCSS CLI to build the CSS based on the config in the tailwind.css file, with the output (flag -o) as main.css.

You can choose the file name and location as you like. Here, I’m putting both the input config file and output in the same folder: src/styles.

Now you can manually trigger the build with the command:

After configuring and building, your project structure should look like this:

Project structure

To make things easier, you can integrate the build:css command into the start and build scripts of your project, ensuring that your CSS is always rebuilt with the latest updates each time you start the project:

Now to build the CSS and start the project, you just need to run yarn start.

Using Tailwind CSS in a React component

Import the built CSS into the start file of your project (mine is index.js):

Create a basic component:

Here’s the result

Tailwind css result

Conclusion

I hope you can integrate and use Tailwind CSS in your project through this tutorial. Personally, I find this framework quite simple, easy to use, and of good quality.

Leave your comments below if you have any feedback