関数とディレクティブ

ディレクティブ

ディレクティブは、Tailwind CSSプロジェクトに特別な機能を提供する、CSSで使用できるTailwind固有のカスタム@規則です。

@import

@importディレクティブを使用して、Tailwind自体を含むCSSファイルをインラインでインポートします。

@import "tailwindcss";

@theme

@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);
  /* ... */
}

テーマ変数のドキュメントでテーマのカスタマイズの詳細をご覧ください。

@source

@sourceディレクティブを使用して、Tailwindの自動コンテンツ検出で検出されないソースファイルを明示的に指定します。

@source "../node_modules/@my-company/ui-lib";

ソースファイル内のクラスの検出に関するドキュメントで、自動コンテンツ検出の詳細をご覧ください。

@utility

@utilityディレクティブを使用して、hover、focus、lgなどのバリアントで動作するカスタムユーティリティをプロジェクトに追加します。

@utility tab-4 {
  tab-size: 4;
}

カスタムユーティリティの追加に関するドキュメントで、カスタムユーティリティの登録の詳細をご覧ください。

@variant

@variantディレクティブを使用して、CSSのスタイルにTailwindバリアントを適用します。

.my-element {
  background: white;
  @variant dark {
    background: black;
  }
}

バリアントの使用に関するドキュメントで、バリアントの使用の詳細をご覧ください。

@custom-variant

@custom-variantディレクティブを使用して、プロジェクトにカスタムバリアントを追加します。

@custom-variant theme-midnight (&:where([data-theme="midnight"] *));

これにより、theme-midnight:bg-blackやtheme-midnight:text-whiteのようなユーティリティを記述できます。

カスタムバリアントの追加に関するドキュメントで、カスタムバリアントの追加の詳細をご覧ください。

@apply

@applyディレクティブを使用して、既存のユーティリティクラスを独自のカスタムCSSにインラインで組み込みます。

.select2-dropdown {
  @apply rounded-b-lg shadow-md;
}
.select2-search {
  @apply rounded border border-gray-300;
}
.select2-results__group {
  @apply text-lg font-bold text-gray-900;
}

これは、カスタムCSSを記述する必要がある場合（サードパーティライブラリのスタイルをオーバーライドする場合など）でも、デザイントークンを操作し、HTMLで使用するのと同じ構文を使用したい場合に便利です。

@reference

VueまたはSvelteコンポーネントの<style>ブロック内、またはCSSモジュール内で@applyまたは@variantを使用する場合は、テーマ変数、カスタムユーティリティ、およびカスタムバリアントをインポートして、それらの値をコンテキストで使用できるようにする必要があります。

出力でCSSを複製せずにこれを行うには、@referenceディレクティブを使用して、スタイルを実際には含めずに、参照用にメインスタイルシートをインポートします。

<template>
  <h1>Hello world!</h1>
</template>
<style>
  @reference "../../app.css";
  h1 {
    @apply text-2xl font-bold text-red-500;
  }
</style>

カスタマイズなしでデフォルトテーマを使用している場合は、tailwindcssを直接インポートできます。

<template>
  <h1>Hello world!</h1>
</template>
<style>
  @reference "tailwindcss";
  h1 {
    @apply text-2xl font-bold text-red-500;
  }
</style>

関数

Tailwindは、色とスペーシングスケールを簡単に操作できるように、次のビルド時関数を提供します。

--alpha()

--alpha()関数を使用して、色の不透明度を調整します。

.my-element {
  color: --alpha(var(--color-lime-300) / 50%);
}

.my-element {
  color: color-mix(in oklab, var(--color-lime-300) 50%, transparent);
}

--spacing()

--spacing()関数を使用して、テーマに基づいてスペーシング値を生成します。

.my-element {
  margin: --spacing(4);
}

.my-element {
  margin: calc(var(--spacing) * 4);
}

これは、特にcalc()と組み合わせて、任意の値を指定する場合にも役立ちます。

<div class="py-[calc(--spacing(4)-1px)]">
  <!-- ... -->
</div>

互換性

次のディレクティブと関数は、Tailwind CSS v3.xとの互換性のためだけに存在します。

@config

@configディレクティブを使用して、レガシーなJavaScriptベースの構成ファイルをロードします。

@config "../../tailwind.config.js";

JavaScriptベースの構成ファイルのcorePlugins、safelist、およびseparatorオプションは、v4.0ではサポートされていません。

@plugin

@pluginディレクティブを使用して、レガシーなJavaScriptベースのプラグインをロードします。

@plugin "@tailwindcss/typography";

@pluginディレクティブは、パッケージ名またはローカルパスを受け入れます。

theme()

theme()関数を使用して、ドット表記を使用してTailwindテーマ値にアクセスします。

.my-element {
  margin: theme(spacing.12);
}

この関数は非推奨であり、代わりにCSSテーマ変数を使用することをお勧めします。