Setup Tailwind CSS in React

In this post we will see how to install tailwind.css in react

Installation

1. Install tailwind with the below command

2. Create a PostCSS configuration file in your root directory manually or you can use the command:

3. paste the below code in the config file

4. Create 2 .css files in src/assets/ name them as tailwind.css and main.css
5. Add below code to tailwind.css file

6. Go to package.json and change the scripts as below

7. Go to index.js and import the main.css and delete index.css import

That's it. whenever you run the build or start comand the tailwind css will be compiled and added to main.css file. Now you can use tailwind.css.