React + Vite + Tailwind project

This guide will help you init a React project with Vite and use Tailwind.

Prerequisite

Use this command to check your NodeJS version

node -v

Create react project with vite

Open your terminal and run the command

npm create vite@latest

It would ask you some question:

• Project name: Your project name, example: pokemon
• Select a framework: Choose React
• Select a variant: Pick TypeScript

Then your project is created, open the project by VSCode or your other IDE and install dependencies by this command:

npm install

To run project in dev mode, run

npm run dev

The project would be run at http://localhost:5174

Integrate with Tailwind

Install Tailwind by command

npm install -D tailwindcss postcss autoprefixer

Then init Tailwind config file

npx tailwindcss init -p

Update file tailwind.config.js following this code

content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],

Open index.css file import all tailwind css styles

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

Now let’s test your Tailwind with this code in any .tsx file

<h1 className="text-3xl font-bold underline">
      Hello world!
</h1>

If the styles are applied, you successfully initialized a React project with Tailwind and Vite.