How to initialize React project

React Vite
Jan 2, 2025 , updated: Apr 27, 2025 History
GitHub Logo GitHub VSCode Logo Playground

Technologies used

  • Node - 23.5.0
  • Vite - 6.3.1
  • React - 19.0.0
  • Tailwind CSS - 4.1.4

  1. install Node.js

  2. Terminal window
    npm create vite@6.4.1 how-to-initialize-react-project -- --template react-ts

    Create a new React project using Vite.

  3. Terminal window
    cd how-to-initialize-react-project
    npm install

    Install the dependencies.

  4. Terminal window
    npm install tailwindcss@4.1.4 @tailwindcss/vite@4.1.4

    Install Tailwind CSS dependencies.

  5. 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()
      ],
    })

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

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

    Add Tailwind CSS import

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

    export default App

    Use Tailwind CSS in React components

  8. Terminal window
    npm run dev

    Start the project