Instructions for adding Tailwind CSS to a React JS project

Tram Ho

Tailwind CSS and React JS

I find Tailwind CSS to be a very popular CSS library these days. With Bootstrap, customization is much lower than with Tailwind CSS. However, you have to remember more because each Tailwind class will correspond to a property in CSS.

1. Create a React project

  • Go to the project directory

2. Install Tailwind CSS

3. Add information to the file tailwind.config.js

file tailwind.config.js

4. Add the files of the Tailwin library to the project’s css file

For example, I will add the index.css file of React js. You can add other files of the project then add this file to the original index.html


5. Test run the project


Add the above code to the App.js file and test it. You can see the results of tailwind classes like text-3xl, font-bold

Share the news now

Source : Viblo