Tailwind CSSの基本概念
Tailwind CSS は高度にカスタマイズ可能なCSSフレームワークであり、事前定義された一連のユーティリティクラスを提供して、開発者がユーザーインターフェースを迅速に構築・設計できるようにします。
以下は、Tailwind CSS の基本的な概念と使用方法です：
| 概念 | 説明 |
|---|---|
| ユーティリティクラス（Utility-First） | Tailwind CSS の核心はユーティリティクラスであり、スタイルをすばやく設定してHTML要素に直接適用するために使用されます。 |
| レスポンシブプレフィックス | 次のようなsm:, md:, lg:, xl:プレフィックスを使用して、異なる画面サイズのスタイルを制御します。 |
| 色とサイズ | 事前定義された色（例：bg-red-500）とサイズ（例：text-lg）を提供し、スタイルをすばやく設定できます。 |
| スペーシング（Spacing） | 次のようなクラスを使用してp-, m-, pt-, pr-パディングとマージンを制御します。 |
| レイアウト（Layout） | 次のようなクラスを提供してflex, grid, floatレイアウト制御を実現します。 |
| テキストスタイル | テキストの整列、フォントスタイル、色、変換などのユーティリティクラスが含まれます。例：text-center, font-bold, uppercase。 |
| 背景とボーダー | 背景色、背景画像、ボーダースタイルと色のユーティリティクラスを提供します。例：bg-gray-200, border-red-500。 |
| ホバーと状態 | 次のようなプレフィックスを使用してhover:, focus:, active:インタラクティブな状態のスタイルを定義します。 |
| サイジング（Sizing） | 次のようなクラスを使用してw-, h-幅と高さを制御します。例：w-64, h-screen。 |
| 可視性（Visibility） | 次のようなクラスを使用してvisible, invisible要素の可視性を制御します。 |
| グリッドシステム（Grid System） | CSS Grid ベースのユーティリティクラスを提供します。例：grid, grid-cols-3, col-span-2レスポンシブグリッドレイアウトを実現します。 |
| カスタム設定 | 次のようなファイルを使用してtailwind.config.js色、スペーシング、フォントサイズなどをカスタマイズして、プロジェクトのニーズに適合させます。 |
| ダークモード（Dark Mode） | ダークモードをサポートしており、次のようなdark:プレフィックスでスタイルを設定し、設定でダークモード機能を有効にできます。 |
| プラグイン（Plugins） | プラグインを通じて機能を拡張し、カスタムユーティリティクラスや機能を追加します。 |
| ディレクティブ（Directives） | CSSファイルで次のような@tailwindディレクティブを使用して異なるレイヤーのスタイルを読み込みます。例：base, components, utilities。 |
概念の詳細
1. ユーティリティクラス（Utility-First）
Tailwind のユーティリティクラスを使用すると、開発者はCSSを手動で記述することなく、スタイルをすばやく定義できます。
解説：
text-center：中央揃え。text-blue-500：青いテキスト。font-bold：太字フォント。
2. レスポンシブプレフィックス
プレフィックスを使用して、異なる画面サイズでのスタイルを設定します。
例
<div class="bg-red-500 sm:bg-green-500 md:bg-blue-500 lg:bg-yellow-500">
Responsive Example
</div>
Responsive Example
</div>
試してみる »
解説：
- デフォルト：赤い背景。
- 小画面（≥640px）：緑の背景。
- 中画面（≥768px）：青の背景。
- 大画面（≥1024px）：黄色の背景。
3. 色とサイズ
Tailwind は豊富な事前定義色とサイズを提供しており、すばやく適用できます。
解説：
text-lg：テキストサイズ。text-gray-600：グレーのテキスト。
4. スペーシング（Spacing）
スペーシングのユーティリティクラスを使用して、要素のパディングとマージンを設定します。
解説：
p-4：パディングは 1rem。m-8：マージンは 2rem。
5. レイアウト（Layout）
提供されるクラスを使用すると、Flexbox や Grid などの柔軟なレイアウトをすばやく実現できます。
例
<div class="flex justify-between items-center">
<div>Item 1</div>
<div>Item 2</div>
</div>
<div>Item 1</div>
<div>Item 2</div>
</div>
試してみる »
Grid の例：
6. テキストスタイル
テキストの整列、色、サイズ、その他のスタイルを制御します。
7. 背景とボーダー
ユーティリティクラスを使用して、背景色、画像、ボーダースタイルを設定します。
8. ホバーと状態
インタラクティブな要素に状態スタイルを設定します。
9. サイジング（Sizing）
要素の幅と高さを設定します。
10. 可視性（Visibility）
要素の表示と非表示を制御します。
11. グリッドシステム（Grid System）
Tailwind の Grid ユーティリティクラスを使用してグリッドレイアウトを作成します。
12. カスタム設定
設定ファイルを使用してデザインシステムをカスタマイズします。
例
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
primary: '#1D4ED8',
},
},
},
}
module.exports = {
theme: {
extend: {
colors: {
primary: '#1D4ED8',
},
},
},
}
試してみる »
13. ダークモード
ダークモードを有効にしてスタイルを定義します。
14. プラグイン
プラグインを通じて Tailwind の機能を拡張します。
例
// tailwind.config.js
const plugin = require('tailwindcss/plugin')
module.exports = {
plugins: [
plugin(function({ addUtilities }) {
addUtilities({
'.rotate-45': {
transform: 'rotate(45deg)',
},
})
}),
],
}
const plugin = require('tailwindcss/plugin')
module.exports = {
plugins: [
plugin(function({ addUtilities }) {
addUtilities({
'.rotate-45': {
transform: 'rotate(45deg)',
},
})
}),
],
}
15. ディレクティブ（Directives）
次のような@tailwindディレクティブを使用して Tailwind の異なるレイヤーを読み込みます。
例
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind components;
@tailwind utilities;