Step 1 - Create a Project
Instead of creating a normal react project using create-react-app
We will be using VITE runtime. It will make our app even faster.
npm create vite@latest ./ ---> Inside the currect directory all the files
npm create vite@latest folder_name
Step 2 - Install Tailwind inside the project directory
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Step 3 - Configure your template paths
replace everything in tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
Step 4 - Add the Tailwind directives to your CSS
Copy this in index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
step 5 - Start your build process
Run your build process with npm run dev.
npm run dev