DEV Community

Karthikeyan
Karthikeyan

Posted on • Updated on

Install tailwind CSS properly in React JS

Hi everyone i hope you are doing well ok let get into the point
here i will show you how to install tailwind css in react js , you can say it is already available in tailwind documentation but i will show another way to install tailwind

if you need official tailwind css documentation go to this link

Tailwind css installation

here we can see how to install this from step by step

first install all the neccesary things
here you need

  • postcss
  • auto prefixer
  • postcss
npm install tailwindcss postcss-cli autoprefixer@9.8.6 -D
Enter fullscreen mode Exit fullscreen mode
npm i postcss@latest
Enter fullscreen mode Exit fullscreen mode

after install everything from above you need to generate tailwind config file using below command

npx tailwind init tailwind.js --full
Enter fullscreen mode Exit fullscreen mode

and you need to create a assets folder inside src. create two new files tailwind.css and main.css

copy the below text and paste it inside the tailwind.css file and leave main.css empty. The main.css will hold the styles that are generated as a result of what we have in the tailwind.css file

@tailwind base;

@tailwind components;

@tailwind utilities;

Enter fullscreen mode Exit fullscreen mode

create postcss.config.js inside myapp(your project name)

postcss.config.js
Enter fullscreen mode Exit fullscreen mode

paste the below text

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

inside package.json add this

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

ok we are coming to final step

import main.css inside index.js file

import React from "react";
import ReactDOM from "react-dom";
import './assets/main.css';
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"));
Enter fullscreen mode Exit fullscreen mode

that's all folks

Top comments (0)