Zenn
💎

【Tailwind和訳】CORE CONCEPTS/Adding New Utilities

2021/10/23に公開
Tailwind CSS
tech

この記事について

この記事は、CORE CONCEPTS/Adding New Utilitiesの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

新しいユーティリティの追加 | Adding New Utilities

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

Tailwind は、かなり包括的なユーティリティクラスのセットを箱から出して提供していますが、独自のものをいくつか追加しなければならない状況に遭遇するかもしれません。

フレームワークを拡張するための最良の方法を決定するのは困難ですが、ここでは、可能な限り慣用的な方法で独自のユーティリティを追加するためのベストプラクティスを紹介します。

CSS を使う | Using CSS

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

.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ディレクティブを使用すると、utility層をパージする際に、パージのためにそれらのスタイルを考慮するよう、Tailwind に指示します。

詳しくは、本番環境への最適化に関するドキュメントをご覧ください。

レスポンシブ・バリアントの生成 | Generating responsive variants

tailwind.config.jsファイルに定義されているブレークポイントに基づいて、独自のユーティリティーのレスポンシブ・バリアントを生成したい場合は、ユーティリティーを@variantsディレクティブで囲み、responsiveをバリアントのリストに追加します。

.css
@tailwind base;
@tailwind components;
@tailwind utilities;

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

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

<!-- デフォルトでは `scroll-snap-type: none` を使用し、中画面以上では `scroll-snap-type: x` を使用します -->
<div class="scroll-snap-none md:scroll-snap-x"></div>

レスポンシブ・ユーティリティーについては、レスポンシブ・デザイン・ドキュメントで詳しく説明しています。

ダークモード用のバリアントの生成 | Generating dark mode variants

独自のユーティリティーにダークモードのバリエーションを生成したい場合は、まずtailwind.config.jsファイルでdarkModeがmediaまたはclassに設定されていることを確認します。

.tailwind.config.js
// tailwind.config.js
module.exports = {
  darkMode: 'media'
  // ...
}

次に、ユーティリティを @variants ディレクティブで囲み、dark を variants のリストに追加します。

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

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

Tailwind は、各カスタムユーティリティの接頭辞付きバージョンを自動的に生成し、それらのスタイルを異なる状態で条件付きで適用することができます。

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

ダークモードユーティリティーの詳細は、ダークモードのドキュメントをご覧ください。

ステートバリアントの生成 | Generating state 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%);
  }
  /* ... */
}

ステートバリアントの詳細については、ステートバリアントのドキュメントをご覧ください。

プラグインの使用 | Using a plugin

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

.tailwind.config.js
// 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'])
    })
  ]
}

カスタムユーティリティをライブラリとして公開したい場合や、複数のプロジェクトで共有しやすくしたい場合には、この方法が適しているでしょう。

詳しくは、ユーティリティ・プラグインのドキュメントをご覧ください。

Discussion

ログインするとコメントできます