メインコンテンツまでスキップ

Tailwind CSS 入門

Tailwind CSS は CSS ツール で取り上げたように、単一の CSS プロパティと一対一対応するような CSS クラス (ユーティリティクラス) を組み合わせてスタイルを表現するコンセプトで、Web フロントエンド開発者から一定の支持を受けています。このページでは、Tailwind CSS を使い始めるまでの導入を紹介します。

まずは触ってみよう​

https://play.tailwindcss.com/hanWV9xEx6 で、Tailwind CSS が導入された HTML / CSS エディターを試すことができます。(React で早速試したい方へ: React で使ってみようで扱います)

ヒント

公式ドキュメントをみながらスタイルを追加してみましょう。例えば余白のユーティリティクラスは margin - Spacing - Tailwind CSS で確認できます。

開発体験​

Web フロントエンド開発者が重視する観点のひとつとして、そのツールが優れた開発体験を提供しているかが挙げられます。その観点からのメリット・デメリットを取り上げます。

メリット​

  • クラス名が命名不要: Tailwind CSS がスタイルに対応するクラス名や (もはや構文というべき1) 命名規則を提供しています
  • JSX テンプレートの中にスタイルを書ける: スタイルを与えるのにあらかじめ CSS セレクターを書く必要がなく、テンプレートとスタイルを一体となって管理できます。
  • 移行ツールが提供されている: Tailwind CSS は活発に開発されており、ユーティリティクラスの名前が変わるなどの互換性のない変更が含まれることがあります。@tailwindcss/upgrade ツール を使用すると、部分的には機械的に移行可能で、常に最新の書き方に追従することができます。
  • CSS 仕様がリスペクトされている: 以前は JavaScript ベースでテーマなどの設定を記述する必要がありましたが、バージョン 4 からは CSS で記述するようになりました。また、テーマに基づいた値は CSS 変数 として定義・参照できたり、CSS レイヤー により Tailwind CSS で生成する CSS の優先度をコントロールすることができます。

デメリット​

  • 自分が求めるユーティリティクラスを得るために学習コストを払う必要あり: 使用したい CSS プロパティとユーティリティクラスの対応関係は、必ずしも自明ではない2ので、公式ドキュメントを繰り返し参照することになります。
  • 複雑なスタイルは HTML class 属性の値が長大になりやすい: ユーティリティクラスを組み合わせていくと、属性値が長くなっていきます。もし繰り返し使用する組み合わせがあるのであれば、カスタム CSS を定義するべきかもしれません。
  • CSS での開発経験がある程度必要: Tailwind CSS に限らず、CSS ツールをメインにスタイルを実装する場合に当てはまりますが、スタイル付き UI であれば UI (部品) の組み合わせで Web フロントエンド開発を進めていくことができ、CSS の粒度でどのような見た目が提供されているか知る必要がありません。

パフォーマンス​

パフォーマンスの観点からも Tailwind CSS の特徴を紹介します。

  • ゼロランタイム CSS である: CSS-in-JS と ゼロランタイム CSSで取り上げたように、Web アプリケーションをビルドする際に CSS が生成されるので、ブラウザーで表示するタイミングでの CSS の生成は発生せず、効率的です。
  • JIT (Just-In-Time) でユーティリティクラスを生成: Web アプリケーションで実際に使用されるユーティリティクラスのみが生成されるので、生成された CSS ファイルのデータサイズは常に最小限です。

デザイン言語​

UI デザインの観点からも Tailwind CSS には優れた特徴があります。

デザイン言語とは、製品やサービスの見た目や印象を統一するための原則・ルールの集まりです。

UI デザインでは、グラフィックのトーン＆マナーを揃える過程でデザイン言語を整備していきますが、Tailwind CSS を使うと次の要素が定義済みで、UI デザインをおこなう最初から活用できます。具体的には、次のような要素が活用できます。

  • 余白: どのくらいの余白がどのくらいの数値か？ (例: 余白 1 なら 0.25rem)
  • 色: 何の色名がどのような色あいか？ (例: 色 red の 500 番なら oklch(63.7% 0.237 25.331))
  • フォント: どの書体が何のフォントをつかうか？ (例: sans 書体なら ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";)
  • 文字の大きさ: どのくらいの文字の大きさがどのくらいの数値か？ (例: 大きさ 2xl なら 1.5rem)
  • ...

デフォルトで提供される値は https://tailwindcss.com/docs/theme#default-theme-variable-reference で確認することができます。

ヒント

もしあなたが Tailwind CSS を使ってスタイルする方法や、その考え方についてもっと知りたければ、yuheiyさんが書かれている特集記事の Tailwind CSS実践入門 ～まず作ってから、あとで共通化するを読んでみることをおすすめします。

少し内容が古い (扱っている Tailwind CSS のメジャーバージョンがひとつ前の 3.x) ですが、より概念的な章である次の内容は今でも参考にしていただけると思います。

React で使ってみよう​

StackBlitz というオンライン IDE を使って、React で Tailwind CSS を使い始めるまでを体験しましょう。

備考

ローカル環境でも次の手順を参考に同じ環境を構築できます。

この場合、intro-tailwindcss フォルダーの中に入って (例: 別のターミナルセッションを開き、 cd ./intro-tailwindcss) 作業を続けましょう。

ローカル環境の構築手順
$ npm create vite@latest intro-tailwindcss -- --template react-ts
Need to install the following packages:
create-vite@8.2.0
Ok to proceed? (y)


> npx
> "create-vite" intro-tailwindcss --template react-ts

│
◇  Use rolldown-vite (Experimental)?:
│  No
│
◇  Install with npm and start now?
│  Yes
│
◇  Scaffolding project in /var/home/kimiaki/Workspace/intro-tailwindcss...
│
◇  Installing dependencies with npm...

added 175 packages, and audited 176 packages in 11s

45 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
│
◇  Starting dev server...

> intro-tailwindcss@0.0.0 dev
> vite


  VITE v7.3.0  ready in 77 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
  1. https://vite.new/react-ts にアクセスします。
  2. 次のスクリーンショットのような状態になるまで待ちます。
  3. IDE: what’s on your screen | StackBlitz Docs を確認し、次の UI (部品) が表示されていることを確認します。(Visual Studio Code を使ったことがある人なら、それほど大きく違いがないことが分かるはずです)
    • メニューバー (Menu Bar)
    • サイドバー (Side Bar)
    • エディター (Editor)
    • ターミナル (Terminal)
    • プレビュー (Preview)
  4. ターミナルの枠の右上にある + ボタンを押して、新しいターミナルセッション (あなたとパソコンの間でのテキストでのやりとりをおこなう窓口) を開き、コマンド npm i -D tailwindcss @tailwindcss/vite を実行します。
  5. vite.config.ts に次の変更をおこないます:
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,7 +1,8 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'

 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), tailwindcss()],
 })
  1. src/index.css の内容を全て消して、@import 'tailwindcss'; を記述します
  2. これで導入できました！ src/App.tsx を自由に編集してみてください。例えばこのような感じで:
diff --git a/src/App.tsx b/src/App.tsx
index 3d7ded3..8518471 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -18,7 +18,7 @@ function App() {
       </div>
       <h1>Vite + React</h1>
       <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
+        <button className="border border-blue-700 px-6 py-4 rounded-md hover:bg-blue-50 transition-colors" onClick={() => setCount((count)
=> count + 1)}>
           count is {count}
         </button>
         <p>
ヒント

ここで扱う手順は Installing Tailwind CSS with Vite - Tailwind CSS に沿ったものですが、Tailwind CSS は様々なフレームワークに導入することができます。詳細は次のリンクを参照してください。

https://tailwindcss.com/docs/installation/framework-guides

Footnotes​

  1. Tailwind CSS は柔軟にユーティリティクラスを生成できます。詳細: Adding custom styles - Core concepts - Tailwind CSS ↩

  2. ユーティリティファースト CSS の中でも、クラス名をより CSS 構文に近づけている Master CSS というものもあります。 ↩