Tailwind CSSで「font-feature-settings: "palt";」を使いたい

文字間をきれいに詰めるために必要不可欠な「font-feature-settings: “palt”;」ですが、Tailwind CSSにはfont-feature-settingsに直接対応するユーティリティはありません。しかしCSSでカスタムクラスを作成して、Tailwind CSSプロジェクトで使用できます。「Tailwind CSSで開発を始めるためのnpmコマンド」でご紹介した方法で、postcssを使ってビルドしていることを前提に解説します。

プロジェクトの src ディレクトリに styles.css ファイルを作成して、@layerディレクティブを使用して新しいカスタムクラスを追加します。

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@layer utilities {
  .palt {
    font-feature-settings: "palt";
  }
}

これで、.paltクラスがプロジェクトで利用可能になります。これをHTML要素に適用するには、次のようにします。

<div class="palt">
  ここにテキストを追加
</div>

これで、palt クラスを使用して、font-feature-settings に "palt" を適用することができます。

@layerとは？

Tailwind CSSの@layerディレクティブは、カスタムCSSやコンポーネント、ユーティリティを特定の”レイヤー”にグループ化するために使用されます。これにより、CSSが正しい順序で出力され、スタイルの継承やオーバーライドが容易になります。

Tailwind CSSでは、3つの主要なレイヤーがあります。

Base: このレイヤーでは、ブラウザのデフォルトスタイルをリセットしたり、HTML要素に基本的なスタイルを適用したりします。例えば、normalize.cssやカスタムのタイポグラフィスタイルなどが含まれます。
Components: このレイヤーでは、再利用可能なUIコンポーネントのスタイルが定義されます。例えば、ボタン、カード、フォーム要素などのスタイルが含まれます。
Utilities: このレイヤーでは、Tailwind CSSのユーティリティクラスが定義されます。これには、マージン、パディング、テキストサイズ、カラーなど、あらゆるスタイル要素のユーティリティが含まれます。

@layerディレクティブを使用することで、カスタムCSSをこれらのレイヤーにグループ化し、出力されるCSSの順序を正確に制御できます。これは、カスタムスタイルがTailwind CSSのユーティリティと正しく連携するために特に重要です。

例えば、@layerディレクティブを使用してカスタムボタンスタイルをcomponentsレイヤーに追加するには、以下のように記述します。

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@layer components {
  .btn {
    /* ボタンの基本スタイル */
  }
  .btn-primary {
    /* プライマリーボタンの追加スタイル */
  }
  .btn-secondary {
    /* セカンダリーボタンの追加スタイル */
  }
}

このようにして、カスタムスタイルを適切なレイヤーにグループ化することで、スタイルの継承やオーバーライドをより簡単に管理できます。