Prerequisites
Node.js installed on your machine
Steps
1. Create a New Project with Vite
First, create a new React project using Vite. Open your terminal and run the following commands:
npm create vite@latest my-react-app — –template react-ts
cd my-react-app
npm install
cd my-react-app
npm install
2. Install Tailwind CSS
Next, install Tailwind CSS and its dependencies:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
npx tailwindcss init -p
3. Configure Tailwind CSS
Replace the contents of tailwind.config.cjs with the following configuration:
module.exports = {
content: [
“./index.html”,
“./src/**/*.{js,ts,jsx,tsx}”,
],
theme: {
extend: {},
},
plugins: [],
}
content: [
“./index.html”,
“./src/**/*.{js,ts,jsx,tsx}”,
],
theme: {
extend: {},
},
plugins: [],
}
4. Add Tailwind Directives to Your CSS
Add the following directives to your src/index.css file:
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind components;
@tailwind utilities;
5. Start the Development Server
Finally, start the development server to see your project in action:
npm run dev
