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
Top comments (0)