How to create React project

1. Install Node.js

2. Create a new React project using Vite.

   npm create vite react-project -- --template react-ts

3. Install the dependencies.

   cd react-project
   npm install

4. Install Tailwind CSS dependencies.

   npm install tailwindcss @tailwindcss/vite

5. Add the @tailwindcss/vite plugin to your Vite configuration.

   vite.config.ts

   import { defineConfig } from 'vite'
   import tailwindcss from '@tailwindcss/vite'
   import react from '@vitejs/plugin-react'
    
   // https://vite.dev/config/
   export default defineConfig({
     plugins: [
       react(),
       tailwindcss()
     ],
   })

6. Add Tailwind CSS import

   src/index.css

   @import "tailwindcss";

7. Use Tailwind CSS in React components

   src/App.tsx

   function App() {
     return (
       <div className="text-3xl font-bold underline">
         Hello world!
       </div>
     )
   }
    
   export default App

8. Start the project

   npm run dev

Links

• create-vite
• Install Tailwind CSS using Vite