フォントスムージング

要素のフォントスムージングを制御するためのユーティリティ。

Class reference

Class
Properties
.antialiased-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
.subpixel-antialiased-webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto;

Subpixel Antialiasing

.subpixel-antialiasedユーティリティを使用して、サブピクセルアンチエイリアスを使用してテキストをレンダリングします。

The quick brown fox jumped over the lazy dog.

<p class="subpixel-antialiased ...">The quick brown fox ...</p>

Grayscale Antialiasing

グレースケールアンチエイリアスを使用してテキストをレンダリングするには、.antialiasedユーティリティを使用します。

The quick brown fox jumped over the lazy dog.

<p class="antialiased ...">The quick brown fox ...</p>

レスポンシブ

特定のブレークポイントで要素のフォントスムージングを制御するには、既存のフォントスムージングユーティリティに {screen}:プレフィックスを追加します。 たとえば、md:antialiasedを使用して、中程度の画面サイズ以上でのみantialiasedユーティリティを適用します。

Tailwindのレスポンシブデザイン機能の詳細については、Responsive Designのドキュメントをご覧ください。

<p class="antialiased sm:subpixel-antialiased md:antialiased lg:subpixel-antialiased xl:antialiased ...">
  The quick brown fox jumped over the lazy dog.
</p>

The quick brown fox jumped over the lazy dog.

カスタマイズ

レスポンシブと疑似バリアントクラス

デフォルトでonly responsive バリアントはfont smoothing utilitiesのために作られます。

あなたはどのバリアントがfont smoothing utilitiesのために作られるかを tailwind.config.jsファイル内のvariantsセクションのfontSmoothingプロパティを修正することによってコントロールできます。

例として、この設定は also hover and focus バリアントを作ります。

  // tailwind.config.js
  module.exports = {
    variants: {
      // ...
-     fontSmoothing: ['responsive'],
+     fontSmoothing: ['responsive', 'hover', 'focus'],
    }
  }

無効にする

もしfont smoothing utilitiesを使う予定がないなら、configファイルのcorePluginsセクションのfontSmoothing propertyfalseに設定することで完全に無効にすることができます。

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     fontSmoothing: false,
    }
  }

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

Tailwind UI is now in early access!