💨

React×Vite×Tailwind CSSの環境構築

2025/03/11に公開

React

TypeScript

Tailwind CSS

tech

はじめに

React×Viteのフロントエンド開発でよく使うTailwind CSSの環境構築について忘れがちなのでまとめておきます(2025/3/11時点)。TypeScriptでもJavaScriptでも手順は同じです。

2025年1月にTailwind CSSの新バージョンv4が公開され、それまでとインストール方法が変更されました。

Tailwind CSSとは？

Tailwind CSSは、HTMLのクラス名に直接CSSを指定することでスタイルを適用するCSSのフレームワークです。

https://tailwindcss.com/

HTMLとCSSのファイルを行き来する必要がなくなるという利点があります。最近だと、AIツールのv0がTailwind CSSを使って書いてくれますね。

環境構築手順

Tailwind CSSの公式ドキュメントに従って進めます。
今回はViteを使うので、「Using Vite」のタブを参考にします。

1. プロジェクトの作成

まずはターミナル上で、任意のディレクトリに移動し、以下のコマンドを実行します。

npm create vite@latest

プロジェクト名を設定したのち、今回は React>TypeScript の順で選択しました。
作成できると、以下のように表示されるはずです。

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

作成出来たら、ディレクトリを移動して、node-modulesをインストールしましょう

 cd sample-app
 npm install

2. Tailwind CSSのインストール

以下のコマンドを実行します。

npm install tailwindcss @tailwindcss/vite

3. vite.config.tsの編集

インストールが完了したら、vite.config.tsを開き、以下のように追記します。

vite.config.ts

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

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

4. index.cssの編集

次に、index.cssを開き、先頭に以下を追記します。

index.css

@import "tailwindcss";

5. サーバーの起動

最後に、App.tsxを以下のように編集し、Tailwind CSSが適用されることを確認してみましょう。

App.tsx

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

export default App;

以下のコマンドで起動します。

npm run dev

以下のように表示されていれば成功です！