Tailwind CSSデフォルトフォントスタック

Tailwind CSSデフォルトフォントスタック

Tailwind CSSには3つの組み込みフォントファミリーユーティリティが付属しています。その構成を理解することで、そのまま使用するか、tailwind.config.jsでカスタマイズするかを判断できます。

font-sans

.font-sans {
  font-family: ui-sans-serif, system-ui, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
}

このスタックはモダンCSSの汎用キーワードui-sans-serifとsystem-uiを使用して、各プラットフォームのネイティブサンセリフUIフォントに解決します。

font-serif

.font-serif {
  font-family: ui-serif, Georgia, Cambria,
    "Times New Roman", Times, serif;
}

font-mono

.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo,
    Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
}

tailwind.config.jsでのカスタマイズ

module.exports = {
  theme: {
    fontFamily: {
      sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
      serif: ['"Merriweather"', 'ui-serif', 'Georgia', 'serif'],
      mono: ['"JetBrains Mono"', 'ui-monospace', 'monospace'],
    },
  },
}

ui-*キーワード

ui-sans-serif、ui-serif、ui-monospaceキーワードはCSS Fonts Module Level 4仕様で導入されました。古いserif/sans-serif/monospaceキーワードとは異なる解決をする場合がある、OSのデフォルトフォントに解決されます。