Vite + React + Tailwind Setup (Simple Version)

This is my simple starter setup when I just want to build something without spending hours configuring things. Fast. Simple. No unnecessary stuff.

Create Project

npm create vite@latest my-project

If prompted to install Vite, type y and press Enter:

Need to install the following packages:
create-vite@x.x.x
Ok to proceed? (y)

Choose:

Framework: React
Variant:
- Javascript (simple)
- Typescript (recommended for larger projects)
Linter: ESLint

You will then be prompted:

Install with npm and start now?

Choose Yes. Vite will install the dependencies and start the development server automatically.

Open the URL shown in the terminal, usually:

http://localhost:5173/

If you see the default Vite + React page, everything is working.

Stop the server with Ctrl + C.

Now, go into the project folder:

cd my-project

Add Tailwind

Install Tailwind:

npm install tailwindcss @tailwindcss/vite

Update vite.config.js :

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),
  ],
});

Enable Tailwind

Open:

src/index.css

Replace everything:

@import "tailwindcss";

Done. Tailwind is ready.

Clean Default Files

Remove things I don’t need:

• App.css
• Everything inside src/assets/

Keep:

src/
├── App.jsx
├── main.jsx
├── index.css

Replace App.jsx with:

function App() {
  return (
    <h1 className="text-4xl font-bold">
      Yo... It works! 🙌🏻
    </h1>
  );
}

export default App;

My Basic Structure

src/
├── assets/
├── components/
├── config/
├── context/
├── layout/
├── pages/
├── routers/
├── utils/
├── App.jsx
├── index.css
└── main.jsx

Test Tailwind

Run:

npm run dev

If you see big bold text, everything works.

If Tailwind doesn’t work

Check:

• Did you restart the dev server?
• Is index.css imported?
• Did you add Tailwind plugin in vite.config.js?

Still broken?

Delete node_modules and reinstall:

rm -rf node_modules package-lock.json
npm install

My Usual Add-ons

Depending on the project:

• React Router → multiple pages
• Zustand → simple state management
• React Icons → icons
• React Hook Form → handling forms
• React Toastify → notifications
• Framer Motion → smooth animations
• React Helmet → managing head

But don’t install everything on day-1. Start small. Add when needed.

References

• Vite
• React
• Tailwind