コアコンセプト
Tailwindプロジェクトで独自のカスタムスタイルを追加するためのベストプラクティス。
フレームワークを使用する際の最大の課題は、フレームワークが対応していない必要な機能がある場合に、何をすべきかを理解することです。
Tailwindは、拡張性とカスタマイズ性を考慮してゼロから設計されているため、何を構築する場合でも、フレームワークと戦っているように感じることはありません。
このガイドでは、デザイントークンのカスタマイズ、必要に応じて制約を打破する方法、独自のカスタムCSSの追加、およびプラグインによるフレームワークの拡張などのトピックについて説明します。
カラーパレット、スペーシングスケール、タイポグラフィスケール、またはブレークポイントなどを変更する場合は、CSSで@themeディレクティブを使用してカスタマイズを追加します。
@theme { --font-display: "Satoshi", "sans-serif"; --breakpoint-3xl: 120rem; --color-avocado-100: oklch(0.99 0 0); --color-avocado-200: oklch(0.98 0.04 113.22); --color-avocado-300: oklch(0.94 0.11 115.03); --color-avocado-400: oklch(0.92 0.19 114.08); --color-avocado-500: oklch(0.84 0.18 117.33); --color-avocado-600: oklch(0.53 0.12 118.34); --ease-fluid: cubic-bezier(0.3, 0, 0, 1); --ease-snappy: cubic-bezier(0.2, 0, 0, 1); /* ... */}テーマのカスタマイズの詳細については、テーマ変数のドキュメントを参照してください。
通常、適切に作成されたデザインの大部分は、制約されたデザイントークンのセットを使用して構築できますが、完全にピクセルパーフェクトにするために、これらの制約から抜け出す必要がある場合があります。
背景画像を適切な場所に配置するためにtop: 117pxのようなものが必要になった場合は、Tailwindの角かっこ表記を使用して、任意の値をその場でクラスを生成します。
<div class="top-[117px]"> <!-- ... --></div>これは基本的にインラインスタイルに似ていますが、hoverのようなインタラクティブな修飾子やlgのようなレスポンシブな修飾子と組み合わせることができるという大きな利点があります。
<div class="top-[117px] lg:top-[344px]"> <!-- ... --></div>これは、背景色、フォントサイズ、擬似要素のコンテンツなど、フレームワーク内のすべてのものに対して機能します。
<div class="bg-[#bada55] text-[22px] before:content-['Festivus']"> <!-- ... --></div>CSS変数を任意の値を参照している場合は、カスタムプロパティ構文を使用できます。
<div class="fill-(--my-brand-color) ..."> <!-- ... --></div>これは、fill-[var(--my-brand-color)]の短縮形であり、var()関数を自動的に追加します。
Tailwindが標準でユーティリティを含んでいないCSSプロパティを使用する必要がある場合は、角かっこ表記を使用して完全に任意のCSSを記述することもできます。
<div class="[mask-type:luminance]"> <!-- ... --></div>これは実際にインラインスタイルに似ていますが、再度修飾子を使用できるという利点があります。
<div class="[mask-type:luminance] hover:[mask-type:alpha]"> <!-- ... --></div>これは、CSS変数などの場合にも役立ちます。特に、異なる条件で変更する必要がある場合に便利です。
<div class="[--scroll-offset:56px] lg:[--scroll-offset:44px]"> <!-- ... --></div>任意のバリアントは、任意の値に似ていますが、hover:{utility}のような組み込みの擬似クラスバリアントやmd:{utility}のようなレスポンシブバリアントで行うことができるように、オンザフライセレクターの変更を行うためのものです。ただし、HTMLで直接角かっこ表記を使用します。
<ul role="list"> {#each items as item} <li class="lg:[&:nth-child(-n+3)]:hover:underline">{item}</li> {/each}</ul>詳細については、任意のバリアントのドキュメントを参照してください。
任意の値をスペースを含める必要がある場合は、代わりにアンダースコア（_）を使用してください。Tailwindはビルド時に自動的にスペースに変換します。
<div class="grid grid-cols-[1fr_500px_2fr]"> <!-- ... --></div>アンダースコアが一般的ですが、スペースが無効な状況では、Tailwindはスペースに変換する代わりにアンダースコアを保持します。たとえば、URLなどです。
<div class="bg-[url('/what_a_rush.png')]"> <!-- ... --></div>実際にアンダースコアを使用する必要があるが、スペースも有効であるためあいまいな場合は、バックスラッシュでアンダースコアをエスケープすると、Tailwindはスペースに変換しません。
<div class="before:content-['hello\_world']"> <!-- ... --></div>JSXのようなレンダリングされたHTMLからバックスラッシュが削除されるものを使用している場合は、String.raw()を使用して、バックスラッシュがJavaScriptのエスケープ文字として扱われないようにします。
<div className={String.raw`before:content-['hello\_world']`}> <!-- ... --></div>Tailwindの多くのユーティリティは共通の名前空間を共有していますが、異なるCSSプロパティにマッピングされます。たとえば、text-lgとtext-blackは両方ともtext-名前空間を共有していますが、一方はfont-size用であり、もう一方はcolor用です。
任意の値を使用する場合、Tailwindは通常、渡す値に基づいてこのあいまいさを自動的に処理できます。
<!-- Will generate a font-size utility --><div class="text-[22px]">...</div><!-- Will generate a color utility --><div class="text-[#bada55]">...</div>ただし、CSS変数を使用する場合など、実際にあいまいな場合があります。
<div class="text-(--my-var)">...</div>このような状況では、値の前にCSSデータ型を追加することで、Tailwindに基になる型を「ヒント」できます。
<!-- Will generate a font-size utility --><div class="text-(length:--my-var)">...</div><!-- Will generate a color utility --><div class="text-(color:--my-var)">...</div>Tailwindはスタイリングニーズの大部分を処理するように設計されていますが、必要なときにプレーンなCSSを記述することを妨げるものは何もありません。
@import "tailwindcss";.my-custom-style { /* ... */}ページのデフォルト（テキストの色、背景色、フォントファミリーなど）を設定したいだけの場合は、最も簡単な方法は、htmlまたはbody要素にいくつかのクラスを追加することです。
<!doctype html><html lang="en" class="bg-gray-100 font-serif text-gray-900"> <!-- ... --></html>これにより、ベーススタイルの決定を、別のファイルに隠すのではなく、他のすべてのスタイルとともにマークアップに保持できます。
特定のHTML要素に独自のデフォルトベーススタイルを追加する場合は、@layerディレクティブを使用して、それらのスタイルをTailwindのbaseレイヤーに追加します。
@layer base { h1 { font-size: var(--text-2xl); } h2 { font-size: var(--text-xl); }}プロジェクトに追加するより複雑なクラスで、ユーティリティクラスでオーバーライドできるようにしたい場合は、componentsレイヤーを使用します。
従来、これらはcard、btn、badgeのようなクラスになります—そのようなものです。
@layer components { .card { background-color: var(--color-white); border-radius: var(--rounded-lg); padding: var(--spacing-6); box-shadow: var(--shadow-xl); }}componentsレイヤーでコンポーネントクラスを定義することにより、必要に応じてユーティリティクラスを使用してそれらをオーバーライドできます。
<!-- Will look like a card, but with square corners --><div class="card rounded-none"> <!-- ... --></div>Tailwindを使用すると、おそらくこれらのタイプのクラスは思ったほど頻繁には必要ありません。重複の管理に関するガイドで推奨事項をお読みください。
componentsレイヤーは、使用しているサードパーティコンポーネントのカスタムスタイルを配置するのにも適した場所です。
@layer components { .select2-dropdown { /* ... */ }}@variantディレクティブを使用して、カスタムCSS内でTailwindバリアントを適用します。
.my-element { background: white; @variant dark { background: black; }}.my-element { background: white; @media (prefers-color-scheme: dark) { background: black; }}複数のバリアントを同時に適用する必要がある場合は、ネストを使用します。
.my-element { background: white; @variant dark { @variant hover { background: black; } }}.my-element { background: white; @media (prefers-color-scheme: dark) { &:hover { @media (hover: hover) { background: black; } } }}Tailwindに付属しているユーティリティに加えて、独自のカスタムユーティリティを追加することもできます。これは、プロジェクトで使用したいCSS機能がTailwindに標準でユーティリティとして含まれていない場合に役立ちます。
@utilityディレクティブを使用して、カスタムユーティリティをプロジェクトに追加します。
@utility content-auto { content-visibility: auto;}これで、このユーティリティをHTMLで使用できます。
<div class="content-auto"> <!-- ... --></div>また、hover、focus、lgなどのバリアントでも機能します。
<div class="hover:content-auto"> <!-- ... --></div>カスタムユーティリティは、フレームワーク内のすべての組み込みユーティリティとともに、自動的にutilitiesレイヤーに挿入されます。
カスタムユーティリティが単一のクラス名よりも複雑な場合は、ネストを使用してユーティリティを定義します。
@utility scrollbar-hidden { &::-webkit-scrollbar { display: none; }}@utilityディレクティブを使用してシンプルなユーティリティを登録することに加えて、引数を受け入れる関数型ユーティリティを登録することもできます。
@utility tab-* { tab-size: --value(--tab-size-*);}特別な--value()関数は、ユーティリティ値を解決するために使用されます。
--value(--theme-key-*)構文を使用して、ユーティリティ値をテーマキーのセットに対して解決します。
@theme { --tab-size-2: 2; --tab-size-4: 4; --tab-size-github: 8;}@utility tab-* { tab-size: --value(--tab-size-*);}これにより、tab-2、tab-4、tab-githubのようなユーティリティが一致します。
値をベア値として解決するには、--value({type})構文を使用します。ここで、{type}はベア値として検証するデータ型です。
@utility tab-* { tab-size: --value(integer);}これにより、tab-1やtab-76のようなユーティリティが一致します。
任意の値をサポートするには、--value([{type}])構文（角かっこに注意してください）を使用して、Tailwindに任意の値としてサポートされている型を伝えます。
@utility tab-* { tab-size: --value([integer]);}これにより、tab-[1]やtab-[76]のようなユーティリティが一致します。任意のデータ型をサポートする場合は、--value([*])を使用できます。
--value()関数の3つの形式すべてを、ルール内で複数の宣言として使用でき、解決に失敗した宣言は出力で省略されます。
@theme { --tab-size-github: 8;}@utility tab-* { tab-size: --value([integer]); tab-size: --value(integer); tab-size: --value(--tab-size-*);}これにより、必要に応じて各ケースで値を異なる方法で処理できます。たとえば、ベア整数をパーセンテージに変換するなどです。
@utility opacity-* { opacity: --value([percentage]); opacity: calc(--value(integer) * 1%); opacity: --value(--opacity-*);}--value()関数は、複数の引数を受け取り、異なるケースで戻り値を異なる方法で処理する必要がない場合は、左から右に解決することもできます。
@theme { --tab-size-github: 8;}@utility tab-* { tab-size: --value(--tab-size-*, integer, [integer]);}@utility opacity-* { opacity: calc(--value(integer) * 1%); opacity: --value(--opacity-*, [percentage]);}負の値をサポートするには、正と負のユーティリティを別々の宣言に登録します。
@utility inset-* { inset: calc(var(--spacing) * --value([percentage], [length]));}@utility -inset-* { inset: calc(var(--spacing) * --value([percentage], [length]) * -1);}修飾子は、--modifier()関数を使用して処理されます。これは、--value()関数とまったく同じように機能しますが、修飾子が存在する場合は修飾子に対して動作します。
@utility text-* { font-size: --value(--text-*, [length]); line-height: --modifier(--leading-*, [length], [*]);}修飾子が存在しない場合、修飾子に依存する宣言は出力に含まれません。
分数を処理するために、CSSのratioデータ型に依存します。これが--value()とともに使用される場合、Tailwindに値と修飾子を単一の値として扱うように指示する信号です。
@utility aspect-* { aspect-ratio: --value(--aspect-ratio-*, ratio, [ratio]);}これにより、aspect-square、aspect-3/4、およびaspect-[7/9]のようなユーティリティが一致します。
Tailwindに付属しているバリアントに加えて、@custom-variantディレクティブを使用して独自のカスタムバリアントを追加することもできます。
@custom-variant theme-midnight { &:where([data-theme="midnight"] *) { @slot; }}これで、HTMLでtheme-midnight:<utility>バリアントを使用できます。
<html data-theme="midnight"> <button class="theme-midnight:bg-black ..."></button></html>ネストが必要ない場合は、短縮構文を使用してバリアントを作成できます。
@custom-variant theme-midnight (&:where([data-theme="midnight"] *));カスタムバリアントに複数のルールがある場合、それらは互いにネストできます。
@custom-variant any-hover { @media (any-hover: hover) { &:hover { @slot; } }}