この記事の目的
Tailwind CSS とはなにか 使い方やメリット・デメリットをこれから学習する人に知ってほしい
まず Tailwind CSS とは
Tailwind CSS は、すべての HTML ファイル、JavaScript コンポーネント、およびその他のテンプレートをスキャンしてクラス名を検索し、対応するスタイルを生成して、静的 CSS ファイルに書き込むことで機能します。 高速、柔軟、信頼性に優れ、ランタイムはゼロです。
※公式より引用
簡潔に言うと Tailwind CSS は, 「使いたいスタイルをクラス名で直接指定して、CSS を書く手間を大幅に減らせる超効率的なユーティリティファースト な CSS フレームワーク」 です。
State of CSS 2024 の「CSS フレームワーク」部門で 圧倒的 1 位 を取っている
Tailwind CSS を使うメリット・デメリット
メリット
・CSS クラス設計がいらない
・直感的に書ける
・学習コストが低い
その他にもありますがこの 3 点が特にいいなと思いました。
CSS 設計がいらない
通常の CSS ではクラス名を考えて (例: 〇〇-inner 〇〇-button など...)そこにスタイルを当てて(例: width:1280px; background:blue; など...)デザインや UI を組み立てていきますが、
<div class="example-inner">
<button class="example-button">ボタンです。</button>
</div>
.example-inner {
width: 1280px;
}
.example-button {
background: blue;
}
Tailwind では 公式側で用意されたクラス名をインラインで直接記述していくだけで（例：bg-blue-500, p-4, text-center）デザインや UI が組めるので面倒なクラス設計が必要ないのです。
※公式側で用意されてない値などもあるのでその際は自分で記述する必要あり（例：width: ◯◯px; など独自の値がある時 width-[100px]などカスタムして記述 「簡単だよ」）
<div class="w-[1280px] flex justify-center background-color: bg-blue-500">
<button class="p-4 text-center">ボタンです。</button>
</div>
直感的に書ける
Tailwind のクラス名は「CSS のプロパティを短縮したような命名」で、学んだ CSS の知識をそのまま活かせるのが強み。
例：
• mt-4 → margin-top: 1rem
• text-gray-600 → color: #718096
• grid-cols-3 → grid-template-columns: repeat(3, 1fr)
直感的にわからん！って人でも公式やチートシートからコピペして貼るだけなのでほんとに簡単!
学習コストが低い
CSS の文法に似ているため、初心者でも学びやすい。わからんくても公式やチートシートを見てコピペでできる！
※おすすめチートシート
❌️ デメリットもある
• クラスが増えて HTML が長くなる
• 一貫性を保つには工夫が必要（特にチーム開発）
• アニメーションや複雑な表現はカスタム CSS が必要
使い方
HTML で使う方
<head>タグ内に貼るだけ
<script src="https://cdn.tailwindcss.com"></script>
その他開発などで使う方
ターミナルで以下のコマンドを入力
npm install -D tailwindcss npx tailwindcss init
next.js や React の場合プロジェクト作成の時 Tailwind を使用するか聞かれるのでそこで yes を選んでください！
最後に
今回は Tailwind とはなにか、使い方からメリット・デメリットまでをまとめました。
Tailwind について知りたい使いたいなど思っていた方の参考になれば嬉しいです。
📌 ご意見・ご感想などあればぜひコメントください！
Discussion