React Tailwind Viteを使用した爆速環境構築（とりあえず動かしたい人）

注意

あらかじめ言っておきますが、筆者は初心者なので、自分なりの解釈でまとめています。「100%信じるぜ！」という気持ちで読まないようお願いします。どうぞよろしく！

参考

経緯

Reactの勉強を行う際、いちいち調べるのが面倒だったので自分なりにまとめようと思い、書こうと思いました。

手順

1.Reactをインストール

npm create vite@latest アプリ名 -- --template react-ts

もし、今いるディレクトリに作成したければ↓（2025/11/13追記）

npm create vite@latest . -- --template react-ts

この質問はNoと回答でOK（viteで作ってる新しい環境使う？的なことを聞いている）

Use rolldown-vite (Experimental)?:

この質問はyesでいい(インストール時にnpmで依存関係もインストールする？あと、インストール完了後サーバー立ち上げる？的なことを聞いている）

 Install with npm and start now?

サーバーが立ち上がればOK

このとき、cd アプリ名で移動しておくこと忘れずに

tailwind インストール

npm install tailwindcss @tailwindcss/vite

tailwindインストール完了後

vite.config.tsにimport tailwindcss from '@tailwindcss/vite'とtailwindcss()を追加

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(),tailwindcss()],
})

index.css

index.cssに以下を記述

@import 'tailwindcss';

一番上にね。

完了

App.tsxの要素のクラス名にbg-red-300を追加して、サーバー立ち上げて色が変わっていることが確認できれば、完了。

いざ開発へ