新しいユーティリティを追加する

独自のカスタムユーティリティクラスを使用してTailwindを拡張する。


Tailwindはすぐに使用できる非常に包括的なユーティリティクラスのセットを提供しますが、独自のユーティリティクラスをいくつか追加する必要がある場合があります。

フレームワークを拡張するための最良の方法を決定することは難しく、頓挫する可能性があります。可能な限り最も慣用的な方法で独自のユーティリティを追加するのに役立ついくつかのベストプラクティスを以下に示します。


CSSを使う

独自のユーティリティをTailwindに追加する最も簡単な方法は、それらをCSSに追加することです。

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

@layer utilities {
  .scroll-snap-none {
    scroll-snap-type: none;
  }
  .scroll-snap-x {
    scroll-snap-type: x;
  }
  .scroll-snap-y {
    scroll-snap-type: y;
  }
}

@layerディレクティブを使用することにより、Tailwindはそれらのスタイルを@tailwind utilitiesと同じ場所に自動的に移動して、意図しない特異性の問題を回避します。

@layerディレクティブを使用すると、Tailwindは、utilitiesレイヤーをパージするときに、これらのスタイルをパージすることを検討するように指示されます。 詳細については、Controlling File Sizeのドキュメントをお読みください。

レスポンシブバリアントの生成

tailwind.config.jsファイルで定義されたブレークポイントに基づいて独自ユーティリティのresponsive variantsを作成する場合は、ユーティリティを@responseディレクティブでラップします。

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

@layer utilities {
  @responsive {
    .scroll-snap-none {
      scroll-snap-type: none;
    }
    .scroll-snap-x {
      scroll-snap-type: x;
    }
    .scroll-snap-y {
      scroll-snap-type: y;
    }
  }
}

Tailwindは、各カスタムユーティリティのプレフィックス付きバージョンを自動的に生成します。これを使用して、さまざまなブレークポイントでこれらのスタイルを条件付きで適用できます。

<!-- Use `scroll-snap-type: none` by default, then use `scroll-snap-type: x` on medium screens and up -->
<div class="scroll-snap-none md:scroll-snap-x"></div>

レスポンシブユーティリティの詳細については、responsive design documentationをお読みください。

疑似クラスバリアントの生成

独自のユーティリティのpseudo-class variantsを作成する場合は、ユーティリティを @variantsディレクティブでラップします。

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

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

Tailwindは、さまざまな状態でこれらのスタイルを条件付きで適用するために使用できる、各カスタムユーティリティのプレフィックス付きバージョンを自動的に生成します。

<div class="filter-grayscale hover:filter-none"></div>

疑似クラスのバリアントは、 @variantsディレクティブにリストするのと同じ順序で生成されるため、ある疑似クラスを別の疑似クラスよりも優先させたい場合は、必ず最後にリストしてください。

/* フォーカスはホバーよりも優先されます */
@variants hover, focus {
  .filter-grayscale {
    filter: grayscale(100%);
  }
  /* ... */
}

/* ホバーはフォーカスよりも優先されます */
@variants focus, hover {
  .filter-grayscale {
    filter: grayscale(100%);
  }
  /* ... */
}

カスタムユーティリティのレスポンシブと疑似クラスバリアントの両方を生成する場合は、 @variants@responsiveでラップします。

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

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

疑似クラスバリアントユーティリティの詳細についてはpseudo-class variant documentationをお読みください。


プラグインを使う

CSSファイルに直接新しいユーティリティクラスを追加することに加えて、独自のプラグインを作成してTailwindにユーティリティを追加することもできます。

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addUtilities }) {
      const newUtilities = {
        '.filter-none': {
          filter: 'none',
        },
        '.filter-grayscale': {
          filter: 'grayscale(100%)',
        },
      }

      addUtilities(newUtilities, ['responsive', 'hover'])
    })
  ]
}

これは、カスタムユーティリティをライブラリとして公開したり、複数のプロジェクト間で簡単に共有したりする場合に適しています。

詳細についてはutility plugin documentationをお読みください。


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

Tailwind UI is now in early access!