React + Tailwind + Vite (Lite Template)

This template provides a minimal setup to get React working in Vite with Tailwind CSS, HMR, and some ESLint rules.

🚀 Features

• ⚛️ React + Vite
• 🎨 Tailwind CSS preconfigured
• 🔥 Hot Module Replacement (HMR)
• 🧹 ESLint support
• ⚙️ Custom server port (default: 3000)
• 🧠 Simple, fast, and beginner-friendly

🧩 Getting Started

1️⃣ Create a new project

npm create lite@latest my-project
cd my-project

2️⃣ Install dependencies

npm install

3️⃣ Start the dev server

npm run dev

Now visit 👉 http://localhost:3000

⚙️ Configuration

vite.config.js

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

export default defineConfig({
  plugins: [react(), tailwindcss()],
  server: {
    port: 3000,   // Change this port if needed
    open: true,   // Automatically open browser
  },
})

🎨 Tailwind Setup

Tailwind CSS is integrated using the official @tailwindcss/vite plugin.

1. Install Tailwind and plugin (if not already installed)

npm install tailwindcss @tailwindcss/vite

2. Import Tailwind in your main CSS file

/* src/index.css */
@import "tailwindcss";

You can now use Tailwind utility classes directly in your React components 🎉

🧠 Notes

• You can change the dev port in vite.config.js → server.port.
• To enable React Compiler, see the React Compiler Docs.
• For a TypeScript setup, check out the React + TS + Tailwind template.

🛠️ Scripts

| Command | Description | |----------|-------------| | npm run dev | Start development server | | npm run build | Build for production | | npm run preview | Preview production build |

📄 License

MIT © 2025 — Created with ❤️ using create-lite