React + Vite + Tailwind
in seconds.
Stop copying configuration files. Run one script and start building your next project immediately with the modern stack.
Modern stack, zero friction
Everything you need to build fast, beautiful applications with the tools developers love.
Lightning Fast Setup
From zero to running dev server in under 30 seconds. No manual configuration required.
Vite-Powered HMR
Instant hot module replacement. See your changes reflected in milliseconds, not seconds.
Tailwind v4 Ready
Uses the new Tailwind CSS v4 with the modern PostCSS plugin. No config file needed.
Clean Structure
Removes boilerplate files and gives you a clean starting point with a working example.
Cross-Platform
Scripts for both Unix (macOS/Linux) and Windows. Works wherever you develop.
Production Ready
Optimized build configuration out of the box. Deploy to any static host instantly.
Copy, paste, done
Choose your platform and get started in seconds.
Bash / Zsh
macOS / Linux#!/bin/bash # React + Vite + Tailwind Setup set -e # Check Node.js & npm if ! command -v node &> /dev/null; then echo "❌ Node.js not found" exit 1 fi # Ask for project name read -p "Project name: " PROJECT_NAME PROJECT_NAME=${PROJECT_NAME:-my-app} # Check if folder exists if [ -d "$PROJECT_NAME" ]; then echo "❌ Folder already exists" exit 1 fi # Create project yes | npm create vite@latest "$PROJECT_NAME" -- --template react cd "$PROJECT_NAME" npm install # Install Tailwind v4 npm install -D tailwindcss @tailwindcss/postcss postcss # Create config files... # postcss.config.js, vite.config.js # src/index.css with @import "tailwindcss" # src/App.jsx with example component echo "✅ Done! Run: npm run dev"
PowerShell
Windows# setup.ps1 # React + Vite + Tailwind Setup for Windows $ErrorActionPreference = "Stop" # Check Node.js & npm try { $nodeVersion = node -v Write-Host "[OK] Node $nodeVersion" } catch { Write-Host "[X] Node.js not found" exit 1 } # Ask for project name $ProjectName = Read-Host "Project name" if ([string]::IsNullOrWhiteSpace($ProjectName)) { $ProjectName = "my-app" } # Check if folder exists if (Test-Path $ProjectName) { Write-Host "[X] Folder already exists" exit 1 } # Create project echo y | npm create vite@latest $ProjectName -- --template react Set-Location $ProjectName npm install # Install Tailwind v4 npm install -D tailwindcss @tailwindcss/postcss postcss # Create config files... # postcss.config.js, vite.config.js # src/index.css, src/App.jsx Write-Host "✅ Done! Run: npm run dev"
Three steps to launch
Save the Script
Copy the script for your OS and save it as a file.
setup.sh
Make Executable
On Unix, make the script executable. On Windows, adjust execution policy.
chmod +x setup.sh
Run It
Execute the script. It will ask for your project name, then set everything up.
./setup.sh
One-liner install
Run directly from your terminal — no download needed.
curl -fsSL https://Tailwind-React.com/setup.sh | bash
irm https://Tailwind-React.com/setup.ps1 | iex
After setup
Useful snippets to customize your project.
🔤 Custom Fonts
/* src/index.css */
@import "tailwindcss";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
}🔌 Tailwind Plugins
# Install plugins
npm install -D @tailwindcss/typography @tailwindcss/forms
/* src/index.css */
@import "tailwindcss";
@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms";🌙 Dark Mode
// Works out of the box!
<div className="bg-white dark:bg-slate-900">
<h1 className="text-black dark:text-white">
Hello!
</h1>
</div>📦 Build Commands
# Start dev server
npm run dev
# Build for production
npm run build
# Preview production build
npm run preview