Blog スタッフブログ

こんにちは、株式会社MIXシステム開発担当のBloomです。

今回はTailwind CSSについての基本を学習していきたいと思います。

Tailwind CSSとは？

Tailwind CSSは、あらかじめ用意された小さなCSSクラスを組み合わせて画面を作るCSSフレームワークです。

たとえば通常のCSSでは次のように書くことが多いです。

<div class="card">カードです</div> // HTML側
.card { // CSS側
  padding: 16px;
  background-color: white;
  border-radius: 8px;
}

Tailwindでは、こうしたスタイルを下記のようにHTML側のclassに直接インラインで記載します。

<div class="p-4 bg-white rounded-lg">
  カードです
</div>

p-4 は padding、bg-white は背景色、rounded-lg は角丸を表します。
このように、1つの役割だけを持つ小さなクラスを組み合わせる考え方を Utility First と呼びます。

レスポンシブ対応

Tailwindでは、画面幅ごとの指定もclassで書けます。

<div class="text-sm md:text-base lg:text-xl">
  画面幅によって文字サイズが変わります
</div>

この例では、通常時→text-sm、md以上→text-base、lg以上→text-xlと文字サイズを変化させています。

このsm、md、lgといったプレフィックスはBreakpoint Prefixと呼ばれており、主要な画面サイズごとに定義されています。

hoverやfocus対応

Tailwindでは、マウスホバーやフォーカス時の見た目もclassで指定できます。

<button class="bg-blue-600 hover:bg-blue-700 focus:ring-2 text-white px-4 py-2 rounded">
  ボタン
</button>

hover:やfocus:のprefixを指定することでそれぞれの状態の見た目を定義することができます。

Tailwindの注意点

ここまで記載した通り、TailwindはデメリットとしてHTMLが長くなりすぎるといった特徴があります。
採用する場合は下記の点に留意し採用しましょう。

• Next.jsのようなHTML部品を使い回すようなプロジェクトへ導入する
• 同じ部品はコンポーネント化し使い回す
• チーム開発ではPrettierなどのTailwind用の拡張機能を使い書式を統一する

これでTailwindの基本を確認することができました。良かったですね。

参考文献

Tailwind CSS – v2.tailwindcss.com