This content originally appeared on DEV Community and was authored by Karthikeyan
Hi everyone i hope you are doing well ok let get into the point
her i will show you how to install tailwind css in react js , you can say this is already available in tailwind documentation but i will show some other way to install
if you need officail 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 neceesary things
here you need postcss, auto prefixer , postcss
npm install tailwindcss postcss-cli autoprefixer@9.8.6 -D
npm -D 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 assests 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
@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
This content originally appeared on DEV Community and was authored by Karthikeyan
Karthikeyan | Sciencx (2021-10-17T13:56:04+00:00) Install tailwind CSS properly in React JS. Retrieved from https://www.scien.cx/2021/10/17/install-tailwind-css-properly-in-react-js/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.