ViteでReact+Tailwind+TSをサクッと構成する

Sat, 01 Nov 2025 13:34:53 +0900

Repository

https://github.com/Efo-YU/vite-react-tailwind-ts-swc

Motivation

Next.jsではTypeScriptとTailwind CSS(とベースたるReact)が標準的な構成として用いられる(create-next-app時に自動でsetupできる)
Next.jsはReactの代表的な full-stack framework とされるため，Reactを用いる際は上記の構成を真似したい
だがNext.js自体は超クソデカframeworkであるため，この構成を使うためだけにNext.jsを用いるのは無駄が多い
Viteなら簡単かつminimalにReact+Tailwind+TSを構成できる

Procedure

Initialize project

Commit: https://github.com/Efo-YU/vite-react-tailwind-ts-swc/commit/7d4de5eb7ac7561dc163684a4ccc556c874b6d94

下記を実行：

pnpm create vite

dialogで以下のように選択：

◇ Project name:
│ foo-bar-project # 任意にキーボード入力，Enterで決定
│
◇ Select a framework:
│ React # 十字キーで選択，Enterで決定
│
◇ Select a variant:
│ TypeScript + SWC # 十字キーで選択，Enterで決定
│

Note: SWCはNext.jsでも用いられているとのこと．

Add tailwindcss and @tailwindcss/vite dependencies

Commit: https://github.com/Efo-YU/vite-react-tailwind-ts-swc/commit/e9eda14599f8ef6cf8fd082c6611686abbebf1c0

pnpm i tailwindcss @tailwindcss/vite

Configure Tailwind CSS

Commit: https://github.com/Efo-YU/vite-react-tailwind-ts-swc/commit/42633c835ac2f62520d83d1b2d50a5c5da79a237

src/App.cssを削除
src/index.cssを@import "tailwindcss"ただ一行だけにする

@import "tailwindcss"

vite.config.tsにtailwindcssを追加

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

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

Edit `src/App.tsx`

前節までで構成は完了．ただし，pnpm create vite時に生成されたsrc/App.tsxはTailwindを用いておらず，もはや使えなくなっているため，Tailwindを用いたものに変える必要がある．

Web on Efo's Sandbox

ViteでReact+Tailwind+TSをサクッと構成する

Repository

Motivation

Procedure

Initialize project

Add tailwindcss and @tailwindcss/vite dependencies

Configure Tailwind CSS

Edit src/App.tsx

Edit `src/App.tsx`