iTranslated by AI

The content below is an AI-generated translation. This is an experimental feature, and may contain errors. View original article

💨

Setting up React with Vite and Tailwind CSS

2025/03/11に公開

Introduction

I often forget the setup process for Tailwind CSS, which is frequently used in React × Vite frontend development, so I’m summarizing it here (as of March 11, 2025). The steps are the same for both TypeScript and JavaScript.

In January 2025, version v4 of Tailwind CSS was released, and the installation method has changed since then.

What is Tailwind CSS?

Tailwind CSS is a CSS framework that applies styles by specifying CSS directly in HTML class names.

https://tailwindcss.com/

It has the advantage of eliminating the need to jump between HTML and CSS files. Recently, AI tools like v0 have been generating code using Tailwind CSS.

Environment Setup Steps

We will proceed according to the official Tailwind CSS documentation.
Since we are using Vite this time, we will refer to the "Using Vite" tab.

1. Create a Project

First, navigate to any directory on your terminal and execute the following command:

npm create vite@latest

After setting the project name, I selected React > TypeScript in that order.
Once created, it should be displayed as follows:

C:\Users\ebon-\Product\MyApp>npm create vite@latest

> npx
> create-vite

│
◇  Project name:
│  sample-app
│
◇  Select a framework:
│  React
│
◇  Select a variant:
│  TypeScript
│
◇  Scaffolding project in C:\Users\ebon-\Product\MyApp\sample-app...
│
└  Done. Now run:

  cd sample-app
  npm install
  npm run dev

Once the project is created, navigate into the directory and install the node modules.

 cd sample-app
 npm install

2. Install Tailwind CSS

Execute the following command:

npm install tailwindcss @tailwindcss/vite

3. Edit vite.config.ts

Once the installation is complete, open vite.config.ts and update it as follows:

vite.config.ts

import { defineConfig } from 'vite'
+ import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    React(),
+   tailwindcss(),
  ],
})

4. Edit index.css

Next, open index.css and add the following to the top.

index.css

@import "tailwindcss";

5. Start the Server

Finally, edit App.tsx as follows and check if Tailwind CSS is applied.

App.tsx

const App = () => {
  return (
    <div>
      <h1 className="text-3xl text-red-500 font-bold underline">
        Hello Tailwind
      </h1>
    </div>
  );
};

export default App;

Start the server with the following command:

npm run dev

If it looks like the following, you have succeeded!