ユーティリティーファーストなCSSフレームワーク「Tailwind CSS」のメリットとデメリットの克服方法:フルスタックフレームワーク、T3 Stack入門(4)
フロントエンドエンジニアに向けて、Webアプリケーション開発のためのフルスタックフレームワークT3 Stackを解説する本連載。第4回はユーティリティーファーストのCSSフレームワーク「Tailwind CSS」について解説する。
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の利点
関連リンク
Copyright © ITmedia, Inc. All Rights Reserved.