React + Vite + Tailwind CSS

This template provides a minimal setup to get React working in Vite with Hot Module Replacement (HMR), ESLint rules, and Tailwind CSS.

Official Plugins

Currently, two official plugins are available for React with Vite:

• @vitejs/plugin-react: Uses Babel for Fast Refresh.
• @vitejs/plugin-react-swc: Uses SWC for Fast Refresh.

Tailwind CSS Setup

To add Tailwind CSS to your project, follow these steps:

1. Install Tailwind CSS and its dependencies:

   npm install -D tailwindcss postcss autoprefixer

2. Initialize Tailwind CSS:

   Generate the Tailwind configuration files:

   npx tailwindcss init

   This creates a tailwind.config.js file in your project root.

3. Configure Tailwind to remove unused styles in production:

   In tailwind.config.js, set up the purge option to include paths to your files:

   /** @type {import('tailwindcss').Config} */
   module.exports = {
     content: [
       "./index.html",
       "./src/**/*.{js,ts,jsx,tsx}",
     ],
     theme: {
       extend: {},
     },
     plugins: [],
   }

4. Add Tailwind directives to your CSS:

   In your CSS file (e.g., src/index.css), add the following lines to include Tailwind's base styles, components, and utilities:

   @tailwind base;
   @tailwind components;
   @tailwind utilities;

5. Import the CSS file:

   Make sure to import the CSS file into your main JavaScript or TypeScript file (e.g., src/main.jsx):

   import './index.css';

Scripts

The template includes the following scripts:

• dev: Start the development server with Vite.
• build: Build the project for production.
• lint: Run ESLint to check for code issues.
• preview: Preview the built project.

Example Project Structure

Your project structure should look something like this:

project-root/ │ ├── public/ │ └── vite.svg │ ├── src/ │ ├── assets/ │ │ └── react.svg │ ├── App.jsx │ ├── index.css │ └── main.jsx │ ├── .gitignore ├── index.html ├── package.json ├── postcss.config.js ├── tailwind.config.js ├── vite.config.js └── README.md

Additional Resources

• Tailwind CSS Documentation
• Vite Documentation
• React Documentation