Setting Up a React Tailwind Project with Vite

Overview

This guide walks through setting up a complete React boilerplate project with Tailwind CSS, TypeScript, and testing tools using Vite as the build tool. This stack provides a modern, fast development environment with all the essential tools preconfigured.

What’s Included

The boilerplate includes:

• Vite - Next generation frontend tooling
• ReactJS - UI library (v18)
• TypeScript - Type safety
• Vitest - Unit testing framework
• Testing Library - Testing utilities
• Tailwindcss - Utility-first CSS framework
• Eslint - Linting
• Prettier - Code formatting

Steps

1. Create the project using npx:

npx degit joaopaulomoraes/reactjs-vite-tailwindcss-boilerplate my-app

2. Navigate to the project directory:

cd my-app

3. Install dependencies:

npm install

4. Start the development server:

npm run dev

This will serve your app with hot reloading at http://localhost:5173.

Additional Commands

Linting your code

npm run lint

Type checking

npm run typecheck

Building for production

npm run build

Running tests

# Run tests in the terminal
npm run test

# View and interact with tests via UI
npm run test:ui

Project Structure

The boilerplate comes with a clean, organized structure:

my-app/
├── public/            # Static assets
├── src/
│   ├── app/           # App-wide setup and layouts
│   ├── components/    # Reusable UI components
│   ├── pages/         # Page components
│   ├── styles/        # Global styles
│   ├── main.tsx       # Application entry point
│   └── vite-env.d.ts  # Vite type definitions
├── .eslintrc.json     # ESLint configuration
├── .prettierrc        # Prettier configuration
├── index.html         # HTML template
├── package.json       # Project dependencies and scripts
├── tailwind.config.js # Tailwind CSS configuration
├── tsconfig.json      # TypeScript configuration
└── vite.config.ts     # Vite configuration

Common Issues

• Node.js version compatibility: Ensure you’re using Node.js 14.x or later
• Port conflicts: If port 5173 is in use, Vite will automatically try the next available port
• Missing dependencies: If you encounter errors about missing packages, run npm install again
• TypeScript errors: The boilerplate has strict TypeScript settings; follow the error messages to fix type issues

Additional Notes

• This boilerplate is licensed under the MIT License
• The setup includes pre-configured linting rules and Prettier formatting
• Tailwind is set up with PostCSS and can be customized in tailwind.config.js
• Vitest is configured to work with Testing Library for React component testing
• The project uses Vite’s fast HMR (Hot Module Replacement) for a smooth development experience