Install Tailwind CSS with react js
You must need to follow some steps
Step1: Create your own project in react. and then go to the project directory
- npx create-react-app my-project
- cd my-project
Step2: Install Tailwind CSS follow the commands
First of all install Tailwind. and its peer dependencies via npm. and then generate both `tailwind.config.js` and `postcss.config.js`.
- npm install -D tailwindcss postcss autoprefixer
- npx tailwindcss init -p
Step3: Configure the Template Path
Add the paths to all of your template files in your `tailwind.config.js` file.
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
Step4: Tailwin directives add in `./src/index.css` file
@tailwind base;
@tailwind components;
@tailwind utilities;
Step5: Build the process with `npm run start`
Step6: Start your project with Tailwind CSS
export default function App() {
return (
<h1 className="text-5xl underline">
Hello, Elvi!
</h1>
)
}
0 comments:
Post a Comment