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

npm i postcss@latest

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

npx tailwind init tailwind.js --full

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;

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

postcss.config.js

paste the below text

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

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

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

that's all folks