Tailwind CSSは何ですか？
Tailwind CSSは機能優先のCSSフレームワークであり、多数の組み合わせ可能なユーティリティクラス（Utility Classes）を提供することで、開発者がカスタムのユーザーインターフェースを迅速に構築するのをサポートします。Bootstrapのように、ボタンやカードなどのプリセットされたコンポーネントを提供するフレームワークとは異なり、Tailwind CSSはあらかじめデザインされたコンポーネントを一切提供しません。代わりに、細粒度のCSSクラスを提供しています。 .text-center、.bg-blue-500、.p-4 これらのクラスはそれぞれ単一のCSSプロパティに直接対応しています。開発者はHTML要素にこれらのクラスを組み合わせることで必要なスタイルを「構築」し、高度なデザインの自由度と極めてカスタマイズ可能な機能を実現しています。
その核心的な哲学は「制約の中の自由」です。このフレームワークは、余白の配置、色の選択、フォントサイズ、ブレークポイントなどを含む、綿密に設計されたデザインシステムを提供しており、すべての実用的なコンポーネントはこのシステムに基づいて生成されます。これにより、プロジェクトは視覚的な一貫性を保ちながらも、従来のCSSでよく見られる名前の決め方の難しさやスタイルの肥大化といった問題を回避できます。もはや、各コンポーネントに適したクラス名を考える必要もなく、CSSファイルとHTMLファイルの間を頻繁に行き来する必要もありません。
Tailwind CSSの始め方
Tailwind CSSをプロジェクトに統合する方法はいくつもあります。最も推奨される方法は、公式のPostCSSプラグインを使用することです。これにより、JIT（Just-In-Timeコンパイル）モードなどの高度な機能が有効になり、最高のパフォーマンスが得られます。
推薦図書 Tailwind CSS 入門ガイド：ゼロから始めて、モダンでレスポンシブなウェブページを構築する。
PostCSSを使用してインストールします。
これが最も主流で機能が最も充実したインストール方法です。まず、npmまたはyarnを使用してプロジェクトを初期化し、必要な依存関係をインストールしてください。 tailwindcss そもそも。postcss も autoprefixer。
npm install -D tailwindcss postcss autoprefixer次に、Tailwind CSSの設定ファイルを生成します。 tailwind.config.js PostCSSの設定ファイル postcss.config.js。
npx tailwindcss init -pこのコマンドにより、2つのファイルが作成されます。 tailwind.config.js その中で、テーマのカスタマイズやプラグインの設定などが可能です。初期状態では… content このフィールドは、Tailwindが使用されているクラス名を探すためにスキャンすべきファイルを指定するためのものであり、JITモードにとって非常に重要です。プロジェクトの構造に応じてこれを設定する必要があります。例えば：
module.exports = {
content: ["./src/**/*.{html,js,jsx,ts,tsx,vue}"],
theme: {
extend: {},
},
plugins: [],
}その後、メインのCSSファイル（例えば……）内で…… src/styles.css または src/index.css）中で使用する @tailwind Tailwind CSSの各レイヤーにコードを注入するための指示です。
@tailwind base;
@tailwind components;
@tailwind utilities;最後に、プロジェクトのビルドプロセスにおいてPostCSSが正しく呼び出されていることを確認してください（ViteやNext.jsなどのほとんどの現代のフロントエンドフレームワークでは自動的にサポートされています）。ビルドコマンドを実行すると、Tailwindは関連するファイルをスキャンします。 content 設定で指定されたファイル内で使用されているすべてのユーティリティクラスを特定し、必要なスタイルのみを含む最小限のCSSファイルを生成します。
推薦図書 Tailwind CSS のクイック スタート ガイド: ゼロから現代的なフロントエンド インターフェイスを構築する。
Play CDNを使用して迅速にプロトタイプをデザインする
迅速なプロトタイプ作成、デモンストレーション、またはシンプルな静的HTMLページの場合には、Play CDNを使用することができます。HTMLファイル内で以下のように設定するだけです： <head> タグ内にもう一つ追加してください。 <script> タグを使用するだけで済みます。この方法では何のビルド手順も必要ありませんが、パフォーマンス、安定性、機能の完全性の面でビルド済みのバージョンに劣るため、本番環境では推奨されません。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<h1 class="text-3xl font-bold underline">
こんにちは、世界！
</h1>
</body>
</html>核心概念と実用クラスの使用
Tailwind CSSを理解する鍵は、その命名規則とデザインシステムをマスターすることにあります。各実用的なクラスはまるで関数のように機能し、デザインシステム内の値を受け取ってCSS宣言を出力します。
間隔とサイズのシステム
Tailwind CSSでは、内外側のマージン（padding/margin）、幅（width）、高さ（height）などを制御するために統一された数値システムが使用されています。クラス名の形式は通常、以下のようになります： {属性}{方向}-{大小}例えば：
- .p-4 表示する padding: 1rem;（1rem = 16px、4 は 4 × 0.25rem を意味します。）
- .mt-2 表示する margin-top: 0.5rem;。
- .mx-auto 水平方向の外マージンが自動的に設定されることを示しており、主にブロックレベル要素を中央に配置する際に使用されます。
- .w-64 表示する width: 16rem;。
- .h-screen 表示する height: 100vh;。
色と背景
Tailwind CSSでは、非常に豊富で階層的なカラーパレットが提供されています。カラークラスの名前の形式は以下の通りです： {属性}-{颜色}-{深浅}。
- .text-gray-800 表示文字の色をグレー（800の色階）に設定します。
- .bg-blue-500 背景色を青色（500色階）に表示します。
- .border-red-300 表示枠の色を赤色（300色階）に設定します。
あなたはそれを使うこともできます。 .hover:bg-blue-600 ホバー状態でのスタイルを追加します。
レスポンシブデザインとブレークポイント
Tailwind CSSはモバイル優先のブレークポイントシステムを採用しています。デフォルトのプラクティカルクラスはモバイルデバイス向けに設計されており、より大きな画面でスタイルを適用するには、クラス名の前に対応するブレークポイントのプレフィックスを付ける必要があります。そのフォーマットは以下の通りです： {断点}:{类名}デフォルトのブレークポイントは以下の通りです：
- sm: （640ピクセル）
- md: （768ピクセル）
- lg: （1024px）
- xl: （1280ピクセル）
- 2xl: （1536px）
例えば、こうだ。<div class="text-center md:text-left lg:text-2xl"> モバイル端ではテキストを中央に表示し、中型以上の画面では左揃えにし、大型以上の画面ではより大きなフォントサイズを使用する。
推薦図書 Tailwind CSSのコア機能をマスターする：コンポーネントライブラリからレスポンシブデザインの実践ガイド。
上級者向けのテクニックとベストプラクティス
基礎をマスターすれば、以下のコツを使ってTailwind CSSをより効率的に活用できるようになります。
再利用可能なコンポーネントクラスを抽出する
Tailwind CSSではHTML内で直接実用的なクラスを使用することが推奨されていますが、プロジェクト内で繰り返し現れる複雑なスタイルの組み合わせについては、別の方法を利用することができます。 @apply この指示により、その要素はCSS内にカスタムクラスとして抽出されます。これにより、HTMLのシンプルさを保つことができます。
あなたのCSSファイルでは、次のように記述することができます：
.btn-primary {
@apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
}その後、HTML内で直接使用します。 <button class="btn-primary">これは、「実用性を優先する」という考え方と「従来のCSS」の間でバランスを取るための良い方法です。
深度カスタマイズされたテーマ
「通じて（By）…」 tailwind.config.js ファイルの theme.extend 一部の設定をカスタマイズすることで、デフォルトのデザインシステムを簡単に拡張したり上書きしたりすることができます。例えば、カスタムの色、フォント、余白、またはブレークポイントを追加することができます。
module.exports = {
theme: {
extend: {
colors: {
'brand-blue': '#1992d4',
},
spacing: {
'128': '32rem',
}
},
},
}設定が完了すれば、以下のように使用できるようになります： .text-brand-blue と .w-128 このようなクラスです。
JIT（Just-In-Time）モードを使用する利点は以下の通りです：
Tailwind CSS v2.1から導入されたJIT（Just-In-Time）モードは、従来の仕組みを根本的に変えるものです。JITモードでは、すべての可能性のあるCSSを事前に生成するのではなく、開発中に実際に使用されるスタイルのみが必要に応じて生成されます。つまり：
1. 開発およびビルドの速度が非常に速く、設定がどれほど複雑であっても問題ありません。
2. 任意の値を使用することができます。例えば、 .top-[-113px] または .bg-[#1da1f2]事前の設定を必要とせずに。
3. 生成されたCSSファイルは、本番環境において非常にコンパクトである。
v3.0以降では、JITモードがデフォルトであり、かつ唯一の実行エンジンとなっているため、特に追加でJITモードを有効にする必要はありません。そのため、これらすべての利点をすぐに享受することができます。
概要
Tailwind CSSは、機能優先の実用的なクラス体系を採用することで、フロントエンド開発の効率と柔軟性を革命的に向上させました。CSSとHTMLの間での切り替えに伴うコストを排除し、厳格なデザインシステムによってプロジェクトの視覚的な一貫性を保証します。シンプルなプロトタイプデザインから複雑な企業向けアプリケーションまで、Tailwind CSSはどんな用途にも対応できます。その核心概念、レスポンシブデザインのパターン、高度なカスタマイズ手法をマスターすることで、美しくユニークな高品質なユーザーインターフェースを迅速に構築することができるでしょう。初めはいくつかのクラス名を覚える必要がありますが、命名規則に慣れれば、従来のCSSの書き方よりもはるかに速く開発を進めることができるでしょう。
FAQ よくある質問
Tailwind CSSで生成されるCSSファイルは、大きくなることがありますか？
いいえ、特に本番環境ではそうではありません。Tailwind CSSはJIT（Just-In-Time）コンパイルエンジンを使用しており、プロジェクト内のファイルを正確にスキャンし、実際に使用されているCSSクラスのみに対応するスタイルを生成します。そのため、最終的に生成されるCSSファイルのサイズは非常に小さくなり、多くの手動で書かれたCSSファイルよりもさらに小さくなることがあります。PurgeCSSのようなビルドツールの機能はJITエンジンに統合されており、未使用のスタイルはすべて削除されます。
チームプロジェクトにおいて、HTMLが非常に肥大化してしまうと、メンテナンスが困難になる可能性があります。
これは確かによくある懸念事項です。実践を通じて分かっているのは、適切なコンポーネント化（ReactやVueなどのコンポーネントフレームワークを使用する場合でも、そうでない場合でも）によって、問題を効果的に解決できるということです。 @apply 重複するスタイルの組み合わせを抽出することで、複雑さを効果的に管理することができます。HTMLの「肥大化」は、スタイルの予測可能性と命名にかかる負担の軽減という利点をもたらします。チーム全体で同じデザインルール（余白の設定や色など）を使用するため、スタイルの統一が容易になります。多くのチームが実感しているのは、全体のメンテナンスコストが実際には削減されているということです。
既存のCSSやUIフレームワーク（例えばBootstrap）と一緒に使用することはできますか？
はい、可能ですが、混在して使用することは推奨しません。同じプロジェクト内でTailwind CSSと他のCSSを同時に導入することはできますが、スタイルの優先順位（Specificity）によって競合が生じる可能性があるため注意が必要です。より一般的な方法としては、段階的にTailwind CSSへの移行を行うか、新しい機能ではTailwind CSSのみを使用し、古いスタイルはそのまま維持するという方法があります。Tailwind CSSでは、このような状況をうまく管理するための仕組みが用意されています。 prefix 設定オプションにより、すべての実用クラスにプレフィックスを付加することができます（例： tw-これにより、クラス名の衝突を効果的に避けることができます。
どのようにしてカスタムのスタイルを上書きしたり、新たに追加したりするのでしょうか？
主な方法はいくつかあります：1. 使用する @apply 指令在 CSS 中组合实用类创建新类。2. 在 tailwind.config.js の theme.extend 中央拡張設計システム。3. 在 tailwind.config.js の theme デフォルト値をそのまま上書きすることは推奨されません（必要な場合を除き）。4. HTML内で任意の値を直接使用することも可能です。 bg-[#yourcolor]。5. 编写传统的 CSS 并通过提高优先级来覆盖，但应作为最后的手段。
次はどうする？
拡大読書と実践的知識
以下は、この記事のトピックに関連しており、さらに深く読むのに適している。あなたの現在の問題に最も近い記事から優先順位をつけ、徐々に周辺のトピックに広げていく方が良い場合が多い。
日本語