【Tailwind和訳】CORE CONCEPTS/Adding Base Styles
この記事について
この記事は、CORE CONCEPTS/Adding Base Stylesの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
ベーススタイルの追加
Tailwind の上に独自のグローバルベーススタイルを追加するためのベストプラクティスです。
ベース（グローバル）スタイルとは、スタイルシートの最初にあるスタイルのことで、<a>タグや見出しなどの基本的な HTML 要素に便利なデフォルト値を設定
したり、人気のあるボックスサイズのリセットのような意見のあるリセットを適用したり
します。
Tailwind には、Preflightと呼ばれる便利な基本スタイルのセットが用意されていますが、
これは実際にはmodern-normalizeに加えて、より意見の多いスタイルを薄く追加したものです。
Tailwind には、Preflight と呼ばれる便利な基本スタイルのセットが用意されていますが、これは実際には modern-normalize に加えて、より意見の多いスタイル
を薄く追加したものです。
HTML でのクラスの使用
htmlやbody要素にグローバルなスタイルを適用したいだけの場合は、新たに CSS を記述するのではなく、HTML のそれらの要素に既存のクラスを追加すること
を検討してください:
<!DOCTYPE html>
<html lang="en" class="text-gray-900 leading-tight">
<!-- ... -->
<body class="min-h-screen bg-gray-100">
<!-- ... -->
</body>
</html>
CSS の使用
特定の要素にベーススタイルを適用したい場合、最も簡単な方法は、単純に CSS で追加することです。
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
h1 {
@apply text-2xl;
}
h2 {
@apply text-xl;
}
}
@layerディレクティブを使用することで、Tailwind は自動的にそれらのスタイルを@tailwind baseと同じ場所に移動させ、意図しない特異性の問題を回避
します。
また、@layerディレクティブを使用すると、baseレイヤーをパージする際に、パージ対象のスタイルを考慮するよう Tailwind に指示することができます。
詳しくは、プロダクションの最適化についてのドキュメントをご覧ください。
これらのスタイルを定義する際には、@applyまたはtheme()を使用して、誤ってデザインシステムから逸脱しないようにすることをお勧めします。
@font-face のルール
同じ方法で、使用しているカスタムフォントの@font-faceルールを追加することができます。
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
@font-face {
font-family: Proxima Nova;
font-weight: 400;
src: url(/fonts/proxima-nova/400-regular.woff) format("woff");
}
@font-face {
font-family: Proxima Nova;
font-weight: 500;
src: url(/fonts/proxima-nova/500-medium.woff) format("woff");
}
}
plugin の使用
また、プラグインを書き、addBase関数を使用することで、ベーススタイルを追加するこ
とができます:
const plugin = require('tailwindcss/plugin')
module.exports = {
plugins: [
plugin(function({ addBase, theme }) {
addBase({
'h1': { fontSize: theme('fontSize.2xl') },
'h2': { fontSize: theme('fontSize.xl') },
'h3': { fontSize: theme('fontSize.lg') },
})
})
]
}
addBaseで追加されたスタイルは、Tailwind の他のbaseスタイルと一緒にベースレイヤーに挿入されます。
Discussion