機能とディレクティブ

TailwindがCSSに公開するカスタム関数とディレクティブのリファレンス。


@tailwind

@tailwindディレクティブを使用して、Tailwindのbase,components,utilities、およびscreensスタイルをCSSに挿入します。

/**
 * This injects Tailwind's base styles and any base styles registered by
 * plugins.
 */
@tailwind base;

/**
 * This injects Tailwind's component classes and any component classes
 * registered by plugins.
 */
@tailwind components;

/**
 * This injects Tailwind's utility classes and any utility classes registered
 * by plugins.
 */
@tailwind utilities;

/**
 * Use this directive to control where Tailwind injects the responsive
 * variations of each utility.
 *
 * If omitted, Tailwind will append these classes to the very end of
 * your stylesheet by default.
 */
 @tailwind screens;

@apply

@applyを使用して、既存のユーティリティクラスを独自のカスタムCSSにインライン化します。

これは、新しいコンポーネントに抽出したいHTML内の一般的なユーティリティパターンを見つけたときに役立ちます。

.btn {
  @apply font-bold py-2 px-4 rounded;
}
.btn-blue {
  @apply bg-blue-500 text-white;
}
.btn-blue:hover {
  @apply bg-blue-700;
}

ルールは1行にリストすることも、@applyを複数回呼び出すことでリストすることもできます。

.btn {
  @apply font-bold;
  @apply py-2;
  @apply px-4;
  @apply rounded;
}

もちろん、@apply宣言を通常のCSS宣言と混在させることもできます。

.btn:hover {
  @apply bg-blue-700;
  transform: translateY(-1px);
}

@applyでインライン化されたルールは、特異性の問題を回避するために、デフォルトで!important削除されます。

/* Input */
.foo {
  color: blue !important;
}

.bar {
  @apply foo;
}

/* Output */
.foo {
  color: blue !important;
}

.bar {
  color: blue;
}

既存のクラスを@applyして!importantにしたい場合は、宣言の最後に!importantを追加するだけです。

/* Input */
.btn {
  @apply font-bold py-2 px-4 rounded !important;
}

/* Output */
.btn {
  font-weight: 700 !important;
  padding-top: .5rem !important;
  padding-bottom: .5rem !important;
  padding-right: 1rem !important;
  padding-left: 1rem !important;
  border-radius: .25rem !important;
}

Sass/SCSSを使用している場合、これを機能させるにはSassの補間機能を使用する必要があることに注意してください。

.btn {
  @apply font-bold py-2 px-4 rounded #{!important};
}

別のユーティリティの疑似クラスまたはレスポンシブバリアントをインライン化する場合、@apply機能しないことを理解することが重要です。 代わりに、そのユーティリティのプレーンバージョンを適切な疑似セレクタまたは新しいメディアクエリに適用します。

/* Won't work: */
.btn {
  @apply block bg-red-500;
  @apply hover:bg-blue-500;
  @apply md:inline-block;
}

/* Do this instead: */
.btn {
  @apply block bg-red-500;
}
.btn:hover {
  @apply bg-blue-500;
}
@screen md {
  .btn {
    @apply inline-block;
  }
}

ユーティリティのプレフィックスを設定している場合、 簡潔な構文が必要な場合は、@applyを使用するときに、オプションでプレフィックスを省略できます。

/* Both of these will work */
.btn {
  @apply tw-font-bold tw-py-2 tw-px-4 tw-rounded;
}
.btn {
  @apply font-bold py-2 px-4 rounded;
}

@layer

@layerディレクティブを使用して、カスタムスタイルのセットが属する「バケット」をTailwindに通知します。 有効なレイヤーはbase,components,utilitiesです。

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
}

@layer components {
  .btn-blue {
    @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
  }
  .btn-blue:hover {
    @apply bg-blue-700;
  }
}

@layer utilities {
  @variants hover, focus {
    .filter-none {
      filter: none;
    }
    .filter-grayscale {
      filter: grayscale(100%);
    }
  }
}

Tailwindは、@layerディレクティブ内のCSSを対応する@tailwindルールと同じ場所に自動的に移動します。 したがって、特異性の問題を回避するために、CSSを特定の順序で作成することについてそれほど心配する必要はありません。

カスタムCSSを@layerディレクティブでラップすると、Tailwindは、そのレイヤーを除去するときに、それらのスタイルを除去することを検討するようになります。

詳細についてはファイルサイズのコントロールをご覧ください。


@variants

独自のユーティリティのresponsive, hover, focus, activeおよびその他のvariantsは、それらの定義を@variantsディレクティブでラップすることで生成できます。

@variants focus, hover {
  .rotate-0 {
    transform: rotate(0deg);
  }
  .rotate-90 {
    transform: rotate(90deg);
  }
}

This will generate the following CSS:

.rotate-0 {
  transform: rotate(0deg);
}
.rotate-90 {
  transform: rotate(90deg);
}

.focus\:rotate-0:focus {
  transform: rotate(0deg);
}
.focus\:rotate-90:focus {
  transform: rotate(90deg);
}

.hover\:rotate-0:hover {
  transform: rotate(0deg);
}
.hover\:rotate-90:hover {
  transform: rotate(90deg);
}

バリアントは指定した順序で生成されることに注意することが重要です。

したがって、たとえばフォーカスユーティリティをホバーユーティリティよりも優先させたい場合は、リストでホバーの後にフォーカスが来るようにしてください。

/* Input */
@variants hover, focus {
  .banana {
    color: yellow;
  }
}

/* Output */
.banana {
  color: yellow;
}
.hover\:banana:hover {
  color: yellow;
}
.focus\:banana:focus {
  color: yellow;
}

@variantsat-ruleは、設定ファイルのvariantsセクションでサポートされているすべての値をサポートします。 プラグインを介して追加されたcustom variantsも同様です。


@responsive

独自のクラスのレスポンシブバリアントを生成するには、それらの定義を@responseディレクティブでラップします。

@responsive {
  .bg-gradient-brand {
    background-image: linear-gradient(blue, green);
  }
}

デフォルトのブレークポイントを使用すると、これらのクラスが生成されます。

.bg-gradient-brand {
  background-image: linear-gradient(blue, green);
}

/* ... */

@media (min-width: 640px) {
  .sm\:bg-gradient-brand {
    background-image: linear-gradient(blue, green);
  }
  /* ... */
}

@media  (min-width: 768px) {
  .md\:bg-gradient-brand {
    background-image: linear-gradient(blue, green);
  }
  /* ... */
}

@media (min-width: 1024px) {
  .lg\:bg-gradient-brand {
    background-image: linear-gradient(blue, green);
  }
  /* ... */
}

@media (min-width: 1280px) {
  .xl\:bg-gradient-brand {
    background-image: linear-gradient(blue, green);
  }
  /* ... */
}

レスポンシブバリアントは、スタイルシートの最後にあるTailwindの既存のメディアクエリに追加されます。

これにより、レスポンシブプレフィックスを持つクラスは、同じCSSプロパティをターゲットにしている非レスポンシブクラスを常に無効にします。


@screen

@screenディレクティブを使用すると、独自のCSSで値を複製する代わりに、名前でブレークポイントを参照するメディアクエリを作成できます。

たとえば、640pxsmブレークポイントがあり、このブレークポイントを参照するカスタムCSSを作成する必要があるとします。

このようにその値を複製する生のメディアクエリを書く代わりに:

@media (min-width: 640px) {
  /* ... */
}

... @screenディレクティブを使用して、名前でブレークポイントを参照できます。

@screen sm {
  /* ... */
}

theme()

theme()関数を使用して、ドット表記を使用してTailwindコンフィグ値にアクセスします。

これは、宣言の一部についてのみテーマ構成から値を参照する場合に、@applyの代わりに役立ちます。

.content-area {
  height: calc(100vh - theme('spacing.12'));
}

Tailwindはnested object syntaxを使用してデフォルトのカラーパレットを定義するため、ネストされた色にアクセスするには必ずドット表記を使用してください。

ネストされた色の値にアクセスするときにダッシュ構文を使用しないでください

.btn-blue {
  background-color: theme('colors.blue-500');
}

ドット表記を使用して、ネストされた色の値にアクセスします

.btn-blue {
  background-color: theme('colors.blue.500');
}

Translated by T.Arai @ Entap,Inc. / スマホアプリ開発会社

Tailwind UI is now in early access!