CSS - Tailwind

📢 Webサイト閉鎖と移転のお知らせ

このWebサイトは2026年9月に閉鎖いたします。

移転先はhttps://mochiu.net/index.php?title=CSS - Tailwindです。

新しい記事は移転先で追加しております。（旧サイトでは記事を追加しておりません）

概要

Tailwind CSSは、ユーティリティファーストのCSSフレームワークである。

従来のCSSフレームワークとは異なり、事前に定義されたコンポーネント (ボタンやカード等) を提供するのではなく、
低レベルのユーティリティクラスを組み合わせてカスタムデザインを構築する方式を採用している。

Tailwindの最大の特徴は、HTMLファイルやJavaScriptコンポーネント、その他のテンプレートファイルをスキャンして使用されているクラス名を検出して、
それに対応するスタイルのみを生成して静的CSSファイルに書き出すという点である。

これにより、高速で柔軟性が高く、信頼性のある開発が可能になる。
また、ランタイムでの処理が一切不要なため、パフォーマンスにも優れている。

動作の仕組み

Tailwind CSSは次のような流れで動作する。

まず、プロジェクト内の全てのHTMLファイル、JavaScriptコンポーネント、テンプレートファイルをスキャンする。
次に、これらのファイル内で使用されているTailwindのクラス名を検出する。
そして、検出されたクラスに対応するCSSスタイルのみを生成し、最終的にそれらを静的なCSSファイルとしてまとめる。

この方式により、実際に使用されているスタイルだけが含まれた軽量なCSSファイルが生成される。

インストール方法

Tailwind CSSを使用する最も簡単な方法は、Tailwind CLIツールを使用することである。
CLIツールは、Node.jsをインストールせずに使用できるスタンドアロン実行可能ファイルとしても提供されている。

必要な環境

基本的には、npmが使用できる環境が推奨される。
Node.jsがインストールされていれば、npmも利用可能となる。

インストール手順

まず、npmを使用してTailwind CSSとCLIツールをインストールする。

プロジェクトのルートディレクトリで以下に示すコマンドを実行する。

 npm install tailwindcss @tailwindcss/cli

このコマンドにより、Tailwind CSS本体とCLIツールがプロジェクトにインストールされる。

次に、メインとなるCSSファイルにTailwindのインポート文を追加する。
一般的に、このファイルは input.css や styles.css 等のファイル名で、プロジェクトのソースディレクトリに配置される。

 @import "tailwindcss";

これにより、Tailwindの全てのユーティリティクラスが利用可能になる。

使用方法

CSSのビルド

Tailwind CSSを使用するには、CLIツールを実行してソースファイルをスキャンし、CSSをビルドする必要がある。

 npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch

コマンドの各オプションの説明を以下に示す。

-i オプション
入力ファイル (先ほど @import を追加したCSSファイル) を指定する。
-oオプション
出力ファイル (ビルドされたCSSが書き出される場所) を指定する。
--watchオプション
ファイルの変更を監視して、自動的に再ビルドが行われるようになる。

これにより、開発中に変更がすぐに反映されるため、開発効率が大幅に向上する。

HTMLでの使用

ビルドされたCSSファイルをHTMLの <head> セクション内でリンクする。
次に、Tailwindのユーティリティクラスを使用してコンテンツをスタイリングする。

 <!doctype html>
 <html>
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href="./output.css" rel="stylesheet">
 </head>
 <body>
   <h1 class="text-3xl font-bold underline">
     Hello world!
   </h1>
 </body>
 </html>

この例では、text-3xlでテキストサイズを大きく、font-boldで太字、underlineで下線を付けています。このように、複数のユーティリティクラスを組み合わせることで、カスタムCSSを書かずに様々なスタイルを実現できます。

ユーティリティクラスの例

Tailwindは数多くのユーティリティクラスを提供している。

以下に、いくつか代表的なものを記載する。

テキストに関するクラス
- text-sm
- text-base
- text-lg
- text-xl
  サイズ指定クラス
色
- text-blue-500
- bg-red-600
  プロパティ、色、濃淡を組み合わせて指定する。
余白
- m-4
  マージン
  
  数字が大きくなるほど余白も大きくなる。
- p-4
  パディング
  
  数字が大きくなるほど余白も大きくなる。
レイアウト
- flex
- grid
- block
  ディスプレイプロパティ
- justify-center
- items-center
  配置のクラス

開発のワークフロー

まず、CLIツールを --watch オプションを付加して起動する。
次に、HTMLファイルを編集してTailwindのクラスを追加または変更する。
CLIツールが変更を検知して自動的にCSSを再ビルドされる。
Webブラウザでページをリロードすれば、すぐに変更が反映される。

また、プロダクション環境へのデプロイ前には、--watch オプションを外して1度だけビルドを実行することにより、最適化されたCSSファイルを生成することができる。

参考リンク