DEV Community

Cover image for How to integrate TailwindCSS with ReactJS ? (In 9 easy steps)
Nishit Bansal
Nishit Bansal

Posted on

How to integrate TailwindCSS with ReactJS ? (In 9 easy steps)

1) Create a react application(with a name of your choice):

create-react-app tailwind-react

2) Install the following dev dependencies:

npm i -D tailwindcss postcss-cli autoprefixer

3) Generate the tailwind config file (has a list of all the classes):

npx tailwind init tailwind.js -full

4) Create a postcss.config.js file:

touch postcss.config.js

5) Write the following code in postcss.config.js:

const tailwind = require("tailwindcss");
module.exports = {
    plugins: {
        tailwindcss("./tailwind.js)
        require("autoprefixer)
    }
}
Enter fullscreen mode Exit fullscreen mode

6) In the src folder create a new folder 'assets' and create 2 new files "tailwind.css" and "main.css"

cd src

mkdir assets && cd assets

touch tailwind.css main.css

7) In tailwind.css write the following piece of code:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utility";
Enter fullscreen mode Exit fullscreen mode

8)Now, in package.json add follwing to

"scripts":{}

"start": "npm run watch:css && react-scripts start",
"build": "npm build build:css && react-scripts build",
"build:css":"postcss src/assets/tailwind.css -o src/assets/main.css",
"watch:css":"postcss src/assets/tailwind.css -o src/assets/main.css",
Enter fullscreen mode Exit fullscreen mode

Your scripts object should look something like this:

"scripts": {
    "start": "npm run watch:css && react-scripts start",
    "build": "npm run build:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:css": "postcss src/assets/tailwind.css -o src/assets/main.css",
    "watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css"
  },
Enter fullscreen mode Exit fullscreen mode

9) Finally, run your react app:

npm run start

or

npm start

For a video demonstration of this entire process, please refer to @traversymedia 's video
https://www.youtube.com/watch?v=FiGmAI5e91M&t=488s

Top comments (13)

Collapse
 
agnesfrank profile image
AgnesFrank

It will help in managing data in a easy way with all the features on building data table using react table. sorts de rupture

Collapse
 
batuhanbilginn profile image
batuhanbilginn

Great post, thanks!

Collapse
 
vashuharitasya profile image
Vashu Haritasya

Nice man 👍🏻!!

Collapse
 
korosensei27 profile image
Nishit Bansal
Collapse
 
swagwik profile image
Sattwik Sahu

Would you prefer to use ViteJS instead of CRA for a React project? Why / why not?

ViteJS is sponsored by TailwindLabs

Collapse
 
vaishnavigit07 profile image
vaishnavi-git07

Nice bro!

Collapse
 
korosensei27 profile image
Nishit Bansal

Thanks @vaishnavigit07 :)

Collapse
 
sanidhyakashyap profile image
Sanidhya Kashyap

Well explained 👍

Collapse
 
korosensei27 profile image
Nishit Bansal

Thanks @sanidhyakashyap :)

Collapse
 
vksuvam profile image
Vivek Kumar Suvam

Noice!

Collapse
 
korosensei27 profile image
Nishit Bansal

Thanks @vksuvam :)

Collapse
 
damiensn profile image
Damien S

Thanks ! For me, I use Vite, which have a native tailwindcss integration

Collapse
 
korosensei27 profile image
Nishit Bansal

I don't know about Vite, thanks for the information! I'll definitely check it out!