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

Nishit Bansal — Wed, 27 Oct 2021 05:13:56 +0000

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)
    }
}

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";

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",

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"
  },

9) Finally, run your react app:

npm run start

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

DEV Community: Nishit Bansal

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