📖

Tailwind CSSの華麗なる導入方法

2025/08/07に公開

Tailwind CSS

tech

はじめに

『華麗なる導入方法』と銘打ったが、公式ドキュメントに普通に書いてある内容と変わらない。

ただ、自分がTailwindを初めてプロジェクトに導入する際、地味にてこずり、最終的に側からしたら至極当たり前な教訓を得たので、備忘録として記す。

ViteプロジェクトにTailwind CSSを導入する方法

私はReact + Viteでアプリを構築しているので、最もシームレスで容易な「Viteプラグインとしての導入方法」を記録する。

1. 必要な依存をインストール

npm install -D tailwindcss @tailwindcss/vite

上記を、React + Vite アプリのルート（「vite.config.ts」や src/ フォルダがあるディレクトリ）でインストールする。

my-project/
├── client/ ← React + Vite アプリ（ここにインストールする！）
│   ├── vite.config.ts
│   ├── tailwind.config.js
│   ├── src/
│   │   └── App.tsx
│   ├── index.html
│   └── ...
├── server/ ← RailsやNodeのバックエンド（関係なし）
└── README.md

従来のバージョンで必要であった autoprefixer, postcss はもう不要。

2. 「vite.config.ts」を編集

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'  // ← これを追加

export default defineConfig({
  plugins: [
    react(),
    tailwindcss() // ← これを追加
  ]
})

上記参照の元、importとplugins箇所に追加する。

3.「tailwind.config.js」はそのままでOK

中身が以下のようになっていれば完璧。

tailwind.config.js

export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

※Next.jsを使っている場合、contentの「src」の箇所は「app」に直す必要があるらしい。

4. 「src/index.css」に'@import'を加える

src/index.css

@import "tailwindcss";

「src/index.css」の上部に@importコードを加える。

Tailwind CSS v4 にアップデートして以降、この１行でCSSの読み込みが可能になった。

従来（Tailwind CSS v3以前）は以下のコードを書く必要があり、chatGPTは今になっても執拗に「この３つを書け。」と間違った事を言ってくる。

src/index.css

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

5. サーバー再起動

npm run dev

Tailwindの導入に苦労した理由

結論を言えば、公式ドキュメント（orその他の有益サイト）を確認する前にchatGPTに質問し、情報的にひと昔前の彼の回答を鵜呑みにして進めてしまった。

chatGPTは、最新情報に疎い点がネックである。

結局、自分でググって調べてみると、以下の記事を見つけて解決に至った。

教訓「chatGPTを鵜呑みにせず、自分でもググれ」