ユーティリティーファーストなCSSフレームワーク「Tailwind CSS」のメリットとデメリットの克服方法：フルスタックフレームワーク、T3 Stack入門（4）

フロントエンドエンジニアに向けて、Webアプリケーション開発のためのフルスタックフレームワークT3 Stackを解説する本連載。第4回はユーティリティーファーストのCSSフレームワーク「Tailwind CSS」について解説する。

[上原潤二，NTTテクノクロス]

　NTTテクノクロス上原です。連載「フルスタックフレームワーク、T3 Stack入門」も、はや第4回を迎えました。「T3 Stack」のプロジェクトの初期構築ツール、「Create T3 App」もバージョンアップが続けられ、前回紹介したDrizzle対応に加え、7.32.0ではついにNext JSのApp Routerが実験段階（Experimental）を卒業し、正式機能としてデフォルト（初期設定）の選択肢となりました。

　おさらいになりますが、T3 Stackは、以下を構成要素として疎結合で結び付けたフルスタックフレームワークです。

T3 Stackの構成要素	説明	連載掲載
Next.JS	Reactベースのフルスタック（サーバ+フロント）フレームワーク
tRPC	TypeScriptに基づいたRPCライブラリ	連載第2回
Prisma、Drizzle ORM	TypeScriptと連動するORM（サーバサイド）	連載第3回
Tailwind CSS	ユーティリティーファーストのCSSフレームワーク	連載第4回（今回）
Auth.js	OAuthなど利用可能な認証ライブラリ。旧名NextAuth.js
T3 Env	型安全な環境変数設定を読み込むためのライブラリ

　今回は、主にTailwind CSSについて紹介します。次回は、チュートリアルの中で、App RouterでtRPCを活用するコード例を解説し、「Server Actions」との比較などを紹介します。

Tailwind CSSの概要

　Tailwind CSSは、CSSの記述方法であり、ツールチェインであり、手法や考え方も含むWebページ、Webアプリケーションのスタイル設定のソリューションです。Tailwind CSSは素のHTMLにも適用できますが、Reactをはじめとするコンポーネント指向のユーザーインタフェース（UI）ライブラリで活用することで真価が発揮されます。

Tailwind CSSの使用例

　まずは例を見てみましょう。以下はTailwind CSSのクラス名でマークアップしたReactコンポーネントの例です。次回解説するチュートリアルで使用するコードから抜粋しています。

const TodoApp: NextPage = async () => {
  return (
    <main className="min-h-screen bg-slate-950 p-2">              （1）
      <div className="container mx-auto flex flex-col p-4">
        <h1 className="border-2 border-amber-500 p-3 text-center text-4xl font-bold text-amber-500 shadow-neon">
          Todoアプリ
        </h1>
        <br />
        <TodoList />
      </div>
    </main>
  );
};
export default TodoApp;

　ここでのJSXのclassName属性に指定しているクラス名、例えば（1）の「min-h-screen bg-slate-950 p-2」はそれぞれ以下のような意味になります。

Tailwind CSSが提供するユーティリティークラス名	CSSでの表記
min-h-screen	.min-h-screen { min-height: 100vh; }
bg-slate-950	.bg-slate-950 { --tw-bg-opacity: 1; background-color: rgb(2 6 23 / var(--tw-bg-opacity)); }
p-2	.p-2 { padding: 0.5rem; }

　これらのTailwind CSSのクラス名は「ユーティリティークラス」と呼びますが、CSSにおけるセレクタと値の両方を表現しています。Tailwind CSSのクラス名は「セレクタ+値」である名前がオブジェクトのアイデンティティーとなっているという意味で、アトミックであり即値的です。また、ユーティリティークラスは多くの場合単機能であり、1つのクラス名が1つの設定だけを表現します。従って、複雑なスタイルを指定するためには場合によっては多くの複数クラス名を指定することになります。

Tailwind CSSの利点