Zenn
🔖

Tailwind CSSの知識をブラッシュアップする

2024/06/11に公開
CSS
Tailwind CSS
tech

はじめに

2年ほど前にTailwind CSSの使い方を学習して、基本的にはその時に得た知識で今日までTailwind CSSを使ってきました。

ただし、最近になって950（暗色）のカラーパレットができていたり、子要素に基づいてスタイル設定を可能にする:has()バリアントが追加されていたことを知って、見逃している便利な機能があることに気がついたので、ここ2年間くらいで追加された機能やユーティリティクラスについてまとめてみました。

またせっかくなので、簡単にTailwind CSSについてのおさらいもしたいと思います。

Tailwind CSSについて

https://tailwindcss.com/

Tailwind CSSとは、HTML要素に直接ユーティリティクラスを書くだけで、スタイルを適用できるCSSフレームワークです。

そもそもユーティリティクラスとは…

1つのCSSプロパティ（例えばcolor, margin, paddingなど）に対して、特定の値を適用するためのCSSクラスのことです。

HTML
<div class="mx-auto text-center bg-gray-100">
  <h1>Welcome to my website!</h1>
  <p>This is a sample paragraph.</p>
</div>
CSS
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.text-center {
  text-align: center;
}

.bg-gray-100 {
  background-color: #f7fafc;
}

また、Tailwind CSSにおけるバリアントとは、特定の状態や条件下でスタイルを適用するための修飾子で、疑似クラスを含む広い概念です。

  • 状態に基づくバリアント（例えばhover:, focus:, active:）
  • メディアクエリに基づくバリアント（例えばsm:, md:, lg:）

状態に基づくバリアントは、動的なバリアントと表現されることもあり、擬似クラスのことです。

複数のバリアントを組み合わせて使用することができます。例えば、特定の画面サイズでのホバー効果なども簡単に設定できます。

HTML
<button class="sm:hover:bg-green-500 lg:focus:bg-red-500"></button>

このように複数のユーティリティクラスとバリアントを組み合わせて自由にスタイルが可能です。

Tailwind CSSのメリット

意見が分かれると思いますが、私が考えるTailwind CSSを使用するメリットは下記です。

  • 脳内リソースの節約
    • クラス名を考えなくていい
    • スタイルの粒度が予め定義されている
  • 認知負荷の軽減
    • CSSファイルとHTMLファイルを行ったり来たりしなくていい

「スタイルの粒度が予め定義されている」の補足

スタイルの粒度が予め定義されているため、細かなスタイルの調整に必要以上に悩むことなく、効率的にデザインを実装しやすくなります。

例えば、通常のCSSでは、色の調整の粒度が非常に細かいため、「もう少し青みを加えた方がいいか」「もう少し暗くした方がいいかも」など、微妙な調整に悩んでしまい、この調整には際限がありません。

Tailwind CSSの場合、要素の色を少しだけ暗くしたい場合、事前に定義された色のクラス名を選ぶだけで済みます。bg-blue-600を少し暗くしたい場合、bg-blue-700に変更するだけで、目的の色合いを得ることができます。

【バージョン3.4】の変更点

バージョン3.4は2023年12月20日にリリースされました。

  • 動的ビューポート単位dvhのサポートが追加された
  • 子要素に基づいてスタイル設定を可能にするhas:バリアントが追加された
  • 親から子のスタイルを設定する*:バリアントが追加された
  • 幅と高さを同時に設定するsizeユーティリティクラスの追加
  • text-balanceユーティリティクラスの追加
  • サブグリッドのサポートが追加された
  • 不透明度スケールの設定値が増加し、より細かいコントロールが可能になった
  • 強制カラーモードのスタイルを調整するforced-colors:バリアントとユーティリティクラスが追加された

など

動的ビューポート単位dvhについて

動的ビューポート単位を説明する前に、まずsvhとlvhについて説明します。

svh（Small Viewport Height）は、最小ビューポートの高さに基づく単位です。最小ビューポートとは、モバイルデバイスのアドレスバーやツールバーが表示されているときの最も狭いビューポートを指します。

lvh（Large Viewport Height）は、最大ビューポートの高さに基づく単位です。最大ビューポートとは、モバイルデバイスのアドレスバーなどが隠れているときの最も広いビューポートを指します。

そしてdvh（Dynamic Viewport Height）は、ブラウザの表示状態に応じてビューポートの高さが変化します。

HTML
<!-- 動的ビューポートの高さを使用 -->
<div class="h-dvh">
  <!-- この要素の高さは動的に変わるビューポートの高さの100% -->
</div>

<!-- 最小ビューポートの高さを使用 -->
<div class="min-h-svh">
  <!-- この要素の最小高さは最小ビューポートの高さの100% -->
</div>

<!-- 最大ビューポートの高さを使用 -->
<div class="max-h-lvh">
  <!-- この要素の最大高さは最大ビューポートの高さの100% -->
</div>

has:バリアントについて

子要素の状態に応じて親要素のスタイルを変更することができます。

HTML
<div class="border p-4 has-[:hover]:bg-blue-300">
  <div class="bg-orange-200 p-2 text-center">子要素の内容</div>
</div>


上記の設定をすると、子要素をhoverした時に、親要素の背景が変わります。

*:バリアントについて

親要素から子要素に対して特定のスタイルを適用することができます。複数の子要素で統一したスタイルを適用したい時に便利な機能です。

HTML
<ul class="flex justify-center space-x-2 *:rounded-full *:border *:border-sky-100 *:bg-sky-200 *:px-2 *:py-1">
  <li>Sales</li>
  <li>Marketing</li>
  <li>SEO</li>
</ul>

text-balanceユーティリティクラスについて

テキストが段落全体で均等に分布するようになり、特定の行が極端に長くなったり、短くなったりするのを防いでくれます。

HTML
<p class="text-balance bg-gray-100 p-4">This is an example paragraph that demonstrates the text balance utility class in Tailwind CSS. By using this class, the text will be evenly distributed across lines, creating a more visually appealing and readable block of text.</p>

英語は単語の長さがばらつきやすく、ブラウザは単語の途中で改行するのを避けるため、行ごとにテキストの長さが不均等になりやすいですが、text-balanceユーティリティクラスにより均等になります。

【バージョン3.3】の変更点

バージョン3.3は、2023年3月28日にリリースされました。

  • 950の色（暗色）が追加された
  • list-imageユーティリティクラスが追加された
  • LTR・RTLの論理プロパティを追加
  • グラデーションの各カラーストップの位置を微調整できるようになった
  • line-clampユーティリティクラスの追加
  • フォントサイズと行の高さの簡潔な記法の追加
  • var()を省略したCSS変数の記法への対応

など

LTR・RTLの論理プロパティについて

HTML
// 左から右方向
<div dir="ltr">
  <div class="ms-8 ...">ms-8</div>
  <div class="me-8 ...">me-8</div>
<div>

// 右から方向
<div dir="rtl">
  <div class="ms-8 ...">ms-8</div>
  <div class="me-8 ...">me-8</div>
<div>

msのsはstart、meのeはendを指します。leftやrightのように余白の方向を示さなくても、LTRとRTLの方向性に応じて余白が調整されます。

グラデーションの各カラーストップの位置の微調整について

HTML
<div class="bg-gradient-to-r from-indigo-500 from-10% via-purple-500 via-30% to-pink-500 to-90% ...">
  <!-- ... -->
</div>

from-10%, via-30%, to-90%を使用することで、従来よりも柔軟にグラデーションの調整ができるようになりました。

line-clampユーティリティクラスについて

テキストが指定した行数を超えた場合に、表示を切り捨てて省略記号（...）を表示します。バージョン3.3より前は、プラグインをインストールして使用していましたが、フレームワーク自体に組み込まれるようになりました。

HTML
<div class="w-80 p-8">
  <div class="line-clamp-3">長いテキストがここに入ります。長いテキストがここに入ります。長いテキストがここに入ります。長いテキストがここに入ります。長いテキストがここに入ります。長いテキストがここに入ります。</div>
</div>

【バージョン3.2】の変更点

バージョン3.2は、2022年10月20日にリリースされました。
・1つのプロジェクトで複数の設定ファイルを使用できるようになった（@config）
・supports:バリアントの追加
・ARIA属性に基づいて条件付きでスタイルを設定できるようになった
・group:, peer:による動的なバリアントの生成

など

supports:バリアントについて

supports:バリアントは、ブラウザが特定のCSS機能をサポートしているかどうかに基づいてスタイルを適用するバリアントです。

HTML
<div class="supports-[display:grid]:grid supports-[display:grid]:gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

このコードでは、ブラウザがdisplay:gridをサポートしている場合にのみ、gridとgap-4クラスが適用されます。

ARIA属性に基づくスタイルの設定について

まず、ARIA属性（Accessible Rich Internet Applications）とは、Webサイトをより利用しやすくするための属性で、主に視覚障害のあるユーザーが利用しやすくするために使用されるものです。

HTML
<div class="flex justify-center space-x-3">
  <button aria-pressed="true" class="bg-gray-200 p-2 aria-pressed:bg-blue-400">Pressed</button>
  <button aria-pressed="false" class="bg-gray-200 p-2 aria-pressed:bg-blue-400">Not Pressed</button>
</div>

aria-pressed属性の値が"true"の場合に、背景色を青（bg-blue-400）にします。

group:, peer:バリアントについて

group:バリアントは、親要素に基づいて子要素のスタイルを変更するために使用します。これにより、親要素が特定の状態のときにのみ子要素にスタイルを適用できます。

HTML
<div class="group mx-4 border border-gray-300 p-4 text-center">
  Parent Element
  <div class="mt-4">
    <button class="border border-gray-300 p-2 group-hover:bg-green-400">Child Element</button>
  </div>
</div>

親要素をhoverすると、子要素の背景が緑（bg-green-400）になります。

peer:バリアントは、兄弟要素の状態に基づいて隣接要素のスタイルを変更することができます。

HTML
<div class="my-10 flex items-center justify-center space-x-4">
  <input type="checkbox" class="peer" id="example-checkbox" />
  <label for="example-checkbox" class="peer-checked:text-green-500"> Checked Label </label>
</div>

兄弟要素であるinputのチェックボックスにチェックが入ると、隣接要素labelの文字が緑（text-green-500）になります。

まとめ

ここ最近のTailwind CSSのアップデートで特に気になったのは、バリアントロジックの強化です。これにより、要素間の状態に基づくスタイルの適用がより柔軟になりました。

具体的には、親要素の状態から子要素へのスタイル適用、子要素の状態から親要素へのスタイル適用、兄弟要素の状態から隣接要素へのスタイル適用が可能になっています。このような強化により、より直感的に応答性の高いデザインを実現できるようになったと思います。

Discussion