Tailwind CSSとは
Tailwind CSSとは、CSSフレームワークの1つです。
Utility-Firstというアプローチをとっており、utility classを組み合わせてスタイリングを行います。
utility class
BootstrapなどのCSSフレームワークにはボタンなど、様々なコンポーネントが用意されています。
対してTailwind CSSにはコンポーネントがありません。
utility classと呼ばれるclassを組み合わせて作成していきます。
このようなイメージです。
<button class="bg-blue-500 text-white font-bold py-2 px-4">
Button
</button>
bg-blue-500やtext-whiteなどのutility classを組み合わせてボタンを作成しています。
これらのutility classはチートシートで検索できます。
utility class自体は意味を持たないため、どのような場所でも使うことができます。
Utility-First
このようにutility classを組み合わせてスタイリングを行う考え方をUtility-Firstといいます。
Utility-Firstのメリットとして以下が挙げられます。
- class名を考える必要がなくなる
- 独自のCSSを記述する必要がないので、CSSファイルが増えない
- HTMLファイルで編集するため、影響範囲が広がらない
インラインスタイルとの違い
「HTMLタグ内でスタイルングを行う」と聞くと、インラインスタイルを思い浮かべるかもしれません。
インラインスタイルとの違いとして、例えば以下が挙げられます。
- レスポンシブデザインを実現できる
- 擬似クラスを使用できる
レスポンシブデザイン
Tailwind CSSではデフォルトで以下のブレークポイントが設定されています。
/* Small (sm) */
@media (min-width: 640px) { /* ... */ }
/* Medium (md) */
@media (min-width: 768px) { /* ... */ }
/* Large (lg) */
@media (min-width: 1024px) { /* ... */ }
/* Extra Large (xl) */
@media (min-width: 1280px) { /* ... */ }
これらのブレークポイントを使用することで、レスポンシブデザインを実現できます。
<!-- min-width: 768pxのときに文字色を#B91C1Cにする -->
<p class="md:text-red-700">
TailwindCSS
</p>
擬似クラス
Tailwind CSSではホバーやフォーカス時のデザインも設定できます。
<!-- ホバー時にカーソルをpointerにする -->
<a class="bg-blue-500 text-white font-bold py-2 px-4 hover:cursor-pointer">
Link
</a>
まとめ
Tailwind CSSの特徴をまとめます。
-
Utility-FirstというアプローチをとったCSSフレームワーク -
utility classを組み合わせてスタイリングを行う - class名を考える必要がない
- 独自のCSSを記述する必要がない
- HTML内に影響範囲が限定される
数多くのutility classが存在するため、最初は大変そうです。
ただclass名を考える必要がないのは大きなメリットだと思います。
慣れればBootstrapなどよりもオリジナリティの高いデザインを作成できそうです。
参考文献