はじめに

Tailwind CSSは、近年人気が高まっているユーティリティファーストなCSSフレームワークです。

個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。

従来のようにCSSファイルでスタイルを定義するのではなく、HTMLに直接スタイルを付けられるため、デザイン作業のスピードアップが期待できます。

書こうと思ったきっかけ

ITスクールの制作課題で「短期間で見栄えのするUIを作りたい」と思ったことがきっかけです。

CSSの記述量を減らしながらデザインの自由度を保てるTailwind CSSを知り、その仕組みを自分用にまとめておくことにしました。

Tailwind CSSは、ユーティリティファーストなCSSフレームワークで、HTMLに直接クラス名を記述することでスタイルを適用していくのが特徴です。

一般的なCSSのようにクラスを定義してから使うのではなく、既に用意された小さなスタイル単位（ユーティリティクラス）を組み合わせてUIを構築します。

参考文献

<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
  クリック
</button>

Tailwind CSSは、HTMLを見ただけでスタイルの概要がわかるほど直感的で、習得すれば制作スピードも上がります。

クラスの意味を理解しながら使うことで、CSSの設計力も自然と身についていくと感じました。

今後はtailwind.config.jsを活用したカスタマイズや、コンポーネント設計にも挑戦していきたいです！