⏱️
#1：Tailwind CSSとは？ - 爆速概要理解シリーズ（TailwindCSS編）
Tailwind CSSとは？
Tailwind CSSは、クラス名に指定するだけでスタイルを当てることができるCSSフレームワーク。
あらかじめ用意された「クラス名」を組み合わせてUIを構築する。
<!-- 例：ボタン -->
<button className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
ボタン
</button>
HTML上でスタイルを完結できるため、CSSファイルをほとんど書かずに済むのが特徴。
✅ 特徴と利点
| 特徴 | 内容 |
|---|---|
| ✅ ユーティリティファースト | marginやpaddingなど細かいスタイルをクラスで直接指定 |
| ✅ カスタマイズ性が高い | Tailwind.config.jsでテーマの色やサイズなどを自由に変更可能 |
| ✅ レスポンシブ対応が簡単 | sm:, md:, lg: などでブレイクポイントを簡単に制御 |
| ✅ JavaScriptフレームワークと相性抜群 | React / Vue / Next.js などと組み合わせやすい |
| ✅ 再利用性・一貫性が高い | デザインの統一感を保ちつつスピーディに実装可能 |
Tailwind CSSの導入方法
🌐 Next.jsで導入
プロジェクト作成
tailwindcssもあわせてインストールする
→Tailwind CSSのインストールを求められるので"y"を選択。
npx create-next-app@latest my-app --typescript
特徴 - ユーティリティファーストの考え方
従来のCSS設計では、.btn や .card のようなクラス名をCSSファイルで定義し、HTMLに適用していた。
Tailwindでは、HTML上に直接ユーティリティクラスを並べることで、スタイルと構造を分けずにスピーディにUIを構築でき、組み合わせによって独自のデザインも柔軟に対応可能。
<!-- 従来のCSS -->
<button class="btn">送信</button>
<!-- Tailwindの考え方 -->
<button class="bg-green-500 text-white font-bold py-2 px-4 rounded">送信</button>
まとめ
- Tailwindは「ユーティリティファースト」なCSSフレームワーク
- HTMLにクラスを直接書くスタイルで、開発が高速化
- CDNでのお試しもOK、本格開発にはViteやNext.jsと連携
- 初期段階でも直感的にスタイルを調整できる
Discussion