bucket-sort logo bucket-sort

プログラミングとインフラエンジニアリングの覚え書き

Tailwind CSSの覚え書き

Laravel bucket-sort

Tailwind CSS は、Laravel の Breeze や Jetstream でも標準的に採用されており、 特に意識せずとも触れる機会が多い CSS フレームワークです。

ただ、

  • とりあえずクラスを書いて見た目を整えている
  • どこまでを HTML に書くべきか分からない
  • コンポーネント的な再利用はどう考えるべきか

といった状態のまま使い続けていると、 UIの規模が大きくなったときに破綻しやすくなります。

ここでは、Tailwind CSS の基本的な考え方と、 実際にUIを構築していく際のヒントを整理しておきます。

Tailwind CSS の基本概念

Tailwind CSS は、いわゆる

Utility-First CSS Framework

に分類されます。

従来のCSSでは、

.button {
    padding: 1rem;
    background-color: blue;
    color: white;
}

のようにクラスを定義し、それをHTMLで使用していました。

<button class="button">保存</button>

一方、Tailwindではスタイルを直接 HTML 側に記述します。

<button class="px-4 py-2 bg-blue-500 text-white rounded">
    保存
</button>

つまり、

  • 「意味を持つクラス名」を作るのではなく
  • 「スタイルそのもの」をクラスとして組み合わせる

というアプローチを取ります。

なぜHTMLに直接スタイルを書くのか

一見すると、HTML がスタイル指定で汚れてしまうように見えますが、 Tailwind では次のようなメリットがあります。

  • CSS ファイルを行き来する必要がない
  • ビルド時に未使用ユーティリティが除外される
  • クラスの衝突（命名問題）が起きない
  • レイアウト変更時の影響範囲が限定される

UI の調整を「その場で完結」できる点が大きな特徴です。

レスポンシブ対応

Tailwind では、プレフィックスを付けることで レスポンシブなスタイル指定が可能です。

<div class="text-sm md:text-lg lg:text-xl">

これは、

  • モバイル：text-sm
  • 中画面以上：text-lg
  • 大画面以上：text-xl

という意味になります。

状態によるスタイル変更

hover や focus などの状態も、同様にプレフィックスで指定できます。

<button class="bg-blue-500 hover:bg-blue-600">

UIをしっかり組むために

Tailwind は「ユーティリティを組み合わせる」思想のため、 大規模な UI を構築する場合には、

スタイルの再利用をどう考えるか

が課題になります。

Blade コンポーネントとの組み合わせ

Laravel では、Blade コンポーネントを使うことで Tailwind のクラスをUI部品として再利用できます。

たとえば、ボタンを次のように定義します。

<button {{ $attributes->merge(['class' => 'px-4 py-2 bg-blue-500 text-white rounded']) }}>
    {{ $slot }}
</button>

これにより、

<x-button class="w-full">
    保存
</x-button>

のように、

  • 基本スタイルはコンポーネント側
  • ページ固有の調整は呼び出し側

という分離が可能になります。

UI テンプレートやコンポーネントはあるのか？

Tailwind CSS 自体は「完成済みのデザインコンポーネント」を提供していません。 あくまでスタイルのためのツールです。

ただし、UI 構築の参考になるリソースはいくつか存在します。

Tailwind UI（公式・有料）

https://tailwindui.com/

Tailwind Labs が提供している公式のUIコンポーネント集です。

  • フォーム
  • ナビゲーション
  • モーダル
  • テーブル
  • ダッシュボードレイアウト

などが揃っており、

  • HTML
  • React
  • Vue

それぞれ向けの実装例が提供されています。

Flowbite（オープンソース）

https://flowbite.com/

Tailwind ベースの UI コンポーネントライブラリです。

  • モーダル
  • ドロップダウン
  • テーブル
  • カレンダー

などの実装例があり、 JavaScript 付きのコンポーネントも提供されています。

Laravel 用のスターターも存在します。

Headless UI（ロジックのみ提供）

https://headlessui.com/

Tailwind Labs が提供する、 「スタイルを持たない UI コンポーネント」です。

モーダルやドロップダウンの

  • 振る舞い（状態管理）
  • キーボード操作
  • アクセシビリティ対応

といったロジックのみを提供し、 見た目は Tailwind で自由に構築する前提となっています。

UIを作り込む際に見るべきもの（自分用）

まとめ

  • Tailwind は Utility-First な CSS フレームワーク
  • スタイルを HTML 側に直接記述する
  • レスポンシブや状態変化はプレフィックスで指定
  • 再利用には Blade コンポーネントが有効
  • UI テンプレートは外部ライブラリで補う

Tailwind は単なる CSS の置き換えではなく、 UI 設計のアプローチ自体を変えるツールとして捉えておいたほうが良さそうです。

Related Posts