DEV Community

Cover image for Setup of React project with Vite and TailwindCSS
Piyush Kumar
Piyush Kumar

Posted on

Setup of React project with Vite and TailwindCSS

To set up a React project with Vite, follow these steps:

Prerequisites:

Ensure you have Node.js installed on your system.

Create Vite Project

Open your terminal and run:

npm create vite@latest my-react-app 
--template react
Enter fullscreen mode Exit fullscreen mode

This command initializes a new Vite project with a React template.

Navigate to Project Directory

cd my-react-app
Enter fullscreen mode Exit fullscreen mode

Install Dependencies

npm install
Enter fullscreen mode Exit fullscreen mode

Start Development Server

npm run dev
Enter fullscreen mode Exit fullscreen mode

To set up Tailwind CSS in a Vite React project, follow these steps:

Install Tailwind Dependencies

npm install -D tailwindcss postcss 
autoprefixer
npx tailwindcss init -p
Enter fullscreen mode Exit fullscreen mode

Configure Tailwind Config

Update tailwind.config.js to include template path:

export default:
  content: [
    "./index.html",
      "./src/**/*.{js,ts,jsx,tsx}",
      ],
    theme: { extend: {} },
plugins: [],
}
Enter fullscreen mode Exit fullscreen mode

Add Tailwind Directives

In ./src/index.css, add:

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

Start Development Server

npm run dev
Enter fullscreen mode Exit fullscreen mode

This setup allows you to use Tailwind's utility classes directly in your React components.

Vite + Tailwind Setup:

● Combines fastest build tool (Vite) with most flexible styling framework (Tailwind)

● Extremely lightweight and performant

● Enables rapid UI development

● Zero-runtime utility-first CSS framework

● Seamless integration with React ecosystem

Key Advantages:

🚀 Faster development experience

💨 Minimal setup overhead

🎨 Highly customizable styling

📦 Optimized production builds

🔧 Easy configuration

Conclusion:

Vite React with Tailwind CSS is more than a development approach – it's a philosophy of building web applications that are fast, beautiful, and maintainable.

Whether you're a startup founder, a solo developer, or part of a large team, this stack offers the flexibility and power to bring your digital vision to life.

Happy Coding! 💻✨

Top comments (0)