This article is updated, Please checkout the updated version of add tailwind to react

Tailwind CSS is a utility first CSS framework, It can be composed to build any design.

Create react app doesn’t support post CSS8 yet, so you need to install the tailwind CSS version 2.0 post CSS7 compatibility build.

autoprefixer and tailwindcss/form doesn’t come with default tailwind install so we are adding these additionally.

Now we need to install a new utility craco because create react app doesn’t support post CSS.

craco stands for create react app configuration override.

Note : if you get any error related to react scripts then run this command and reinstall above craco command.

After installing craco, open package.json file and update scripts property with following code.

Now we need to create a craco.config.js file inside the root location.

Now we need to set tailwind config file, To create tailwind.config.js file we need to install a npm command.

This above command will crate tailwind.config.js file.

Now configure tailwind to remove unused styles in produciton.

To include tailwind in our project now we just need to add few tailwind imports to index.css file.

Now the tailwind is successfully added to our project.

Now we can use tailwind css class in our react js components, here we are adding some tailwind classes in App component and making text font thin and increasing its size.

Output for the above code is :

I hope you like this blog, feel free to ask if you have any question.