【Tailwind和訳】CUSTOMIZATION/Theme
この記事について
この記事は、CUSTOMIZATION/Themeの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
Theme Configuration
プロジェクトのデフォルトテーマをカスタマイズします。
tailwind.config.js ファイルの theme セクションでは、プロジェクトのカラーパレット、タイプスケール、フォント、ブレークポイント、境界線の半径の値などを定義します。
const colors = require('tailwindcss/colors')
module.exports = {
theme: {
screens: {
sm: '480px',
md: '768px',
lg: '976px',
xl: '1440px',
},
colors: {
gray: colors.coolGray,
blue: colors.lightBlue,
red: colors.rose,
pink: colors.fuchsia,
},
fontFamily: {
sans: ['Graphik', 'sans-serif'],
serif: ['Merriweather', 'serif'],
},
extend: {
spacing: {
'128': '32rem',
'144': '36rem',
},
borderRadius: {
'4xl': '2rem',
}
}
}
}
開始するための非常に寛大な値のセットを備えた賢明なデフォルトテーマを提供しますが、変更または拡張することを恐れないでください。デザインの目標に合わせて、必要なだけカスタマイズすることをお勧めします。
テーマの構造｜ Theme structure
theme オブジェクトには、screens、colors、spacing のキーと、カスタマイズ可能なコアプラグインごとのキーが含まれています。
テーマオプションの完全なリストは、テーマ設定リファレンスまたはデフォルトテーマを参照してください。
Screens
screens キーでは、プロジェクトのレスポンシブブレークポイントをカスタマイズすることができます。
module.exports = {
theme: {
screens: {
'sm': '640px',
'md': '768px',
'lg': '1024px',
'xl': '1280px',
'2xl': '1536px',
}
}
}
詳しくは、ブレークポイントのカスタマイズに関するドキュメントをご覧ください。
Colors
colors キーでは、プロジェクトのグローバルカラーパレットをカスタマイズすることができます。
module.exports = {
theme: {
colors: {
transparent: 'transparent',
black: '#000',
white: '#fff',
gray: {
100: '#f7fafc',
// ...
900: '#1a202c',
},
// ...
}
}
}
デフォルトでは、これらの色は、backgroundColor、borderColor、textColor などのすべての色関連のコアプラグインに継承されます。
詳しくは、カラーカスタマイズのドキュメントをご覧ください。
Spacing
spacing キーでは、プロジェクトに合わせてグローバルスペーシングとサイジングスケールをカスタマイズすることができます。
module.exports = {
theme: {
spacing: {
px: '1px',
0: '0',
0.5: '0.125rem',
1: '0.25rem',
1.5: '0.375rem',
2: '0.5rem',
2.5: '0.625rem',
3: '0.75rem',
3.5: '0.875rem',
4: '1rem',
5: '1.25rem',
6: '1.5rem',
7: '1.75rem',
8: '2rem',
9: '2.25rem',
10: '2.5rem',
11: '2.75rem',
12: '3rem',
14: '3.5rem',
16: '4rem',
20: '5rem',
24: '6rem',
28: '7rem',
32: '8rem',
36: '9rem',
40: '10rem',
44: '11rem',
48: '12rem',
52: '13rem',
56: '14rem',
60: '15rem',
64: '16rem',
72: '18rem',
80: '20rem',
96: '24rem',
},
}
}
デフォルトでは、これらの値は、padding、margin、width、height、maxHeight、gap、inset、space、translate の各コアプラグインに継承されます。
詳しくは、スペーシングのカスタマイズに関するドキュメントをご覧ください。
Core plugins
theme セクションの残りの部分は、個々のコアプラグインで利用できる値を設定するために使用されます。
例えば、borderRadius キーでは、どのような境界半径のユーティリティーを生成するかをカスタマイズできます。
module.exports = {
theme: {
borderRadius: {
'none': '0',
'sm': '.125rem',
DEFAULT: '.25rem',
'lg': '.5rem',
'full': '9999px',
},
}
}
キーは、生成されるクラスのサフィックスを決定し、値は、実際の CSS 宣言の値を決定します。
上記の borderRadius の設定例では、次のような CSS クラスが生成されます。
.rounded-none {
border-radius: 0;
}
.rounded-sm {
border-radius: 0.125rem;
}
.rounded {
border-radius: 0.25rem;
}
.rounded-lg {
border-radius: 0.5rem;
}
.rounded-full {
border-radius: 9999px;
}
テーマの設定で DEFAULT というキーを使うと、サフィックスなしで rounded クラスが作成されることに気づくでしょう。これは、Tailwind での一般的な慣習であり、すべてのコアプラグインでサポートされています。
特定のコア・プラグインのカスタマイズについての詳細は、そのプラグインのドキュメントをご覧ください。
利用可能なテーマプロパティとそのデフォルト値の完全なリファレンスについては、デフォルトのテーマ設定を参照してください。
デフォルトテーマのカスタマイズ｜ Customizing the default theme
初期設定のままでは、プロジェクトは自動的にデフォルトのテーマ設定の値を継承します。デフォルトのテーマをカスタマイズしたい場合は、目的に応じていくつかの選択肢があります。
デフォルトテーマを拡張する
テーマオプションのデフォルト値を維持しつつ、新しい値を追加したい場合は、設定ファイルの theme セクションにある extend キーの下にエクステンションを追加します。
例えば、既存のブレークポイントを維持したまま、新たなブレークポイントを追加したい場合は、screens プロパティを拡張します。
module.exports = {
theme: {
extend: {
// Adds a new breakpoint in addition to the default breakpoints
screens: {
'3xl': '1600px',
}
}
}
デフォルトテーマを上書きする
デフォルトテーマのオプションをオーバーライドするには、tailwind.config.js の theme セクションの下にオーバーライドを直接追加します。
module.exports = {
theme: {
// Replaces all of the default `opacity` values
opacity: {
'0': '0',
'20': '0.2',
'40': '0.4',
'60': '0.6',
'80': '0.8',
'100': '1',
}
}
}
これは、そのキーに対する Tailwind のデフォルトの設定を完全に置き換えることになりますので、上記の例では、デフォルトの不透明度のユーティリティーは何も生成されません。
あなたが提供していないキーは、デフォルトのテーマから継承されますので、上記の例では、色、間隔、境界線の半径、背景の位置などのデフォルトのテーマの設定が維持されます。
もちろん、同じ設定の中で、デフォルトのテーマの一部を上書きしたり、デフォルトのテーマの他の部分を拡張したりすることができます。
module.exports = {
theme: {
opacity: {
'0': '0',
'20': '0.2',
'40': '0.4',
'60': '0.6',
'80': '0.8',
'100': '1',
},
extend: {
screens: {
'3xl': '1600px',
}
}
}
}
他の値を参照する｜ Referencing other values
テーマ内の他の値を参照する必要がある場合は、静的な値の代わりにクロージャを提供することで可能になります。クロージャは theme() 関数を受け取り、これを使ってテーマ内の他の値をドット記法で検索することができます。
例えば、塗りつぶし設定で theme('colors')を参照することで、カラーパレットのすべての色の塗りつぶしユーティリティを生成することができます。
module.exports = {
theme: {
colors: {
// ...
},
fill: theme => theme('colors')
}
}
theme()関数は、完全にマージされたテーマオブジェクトから探している値を見つけようとするので、デフォルトのテーマ値だけでなく、独自のカスタマイズを参照することができます。また、再帰的に動作するため、チェーンの最後に静的な値がある限り、探している値を解決することができます。
この種のクロージャーは、各セクション内のキーではなく、トップレベルのテーマキーでのみ使用できることに注意してください。
❌ 個々の値に関数を使用することはできません
module.exports = {
theme: {
fill: {
gray: theme => theme('colors.gray')
}
}
}
✅ トップレベルのテーマキーの使用機能
module.exports = {
theme: {
fill: theme => ({
gray: theme('colors.gray')
})
}
}
デフォルトのテーマを参照する｜ Referencing the default theme
何らかの理由でデフォルトテーマの値を参照したい場合は、tailwindcss/defaultTheme からインポートすることができます。
これが便利な例としては、Tailwind のデフォルトフォントスタックの一つにフォントファミリーを追加したい場合があります。
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
theme: {
extend: {
fontFamily: {
sans: [
'Lato',
...defaultTheme.fontFamily.sans,
]
}
}
}
}
コアプラグイン全体を無効にする｜ Disabling an entire core plugin
特定のコアプラグインのクラスを生成したくない場合は、テーマの設定でそのキーに空のオブジェクトを提供するよりも、corePlugins の設定でそのプラグインを false にする方が良いでしょう。
❌ テーマ構成で空のオブジェクトを割り当てないでください
module.exports = {
theme: {
opacity: {},
}
}
✅ corePlugins 構成でプラグインを無効にしてください
module.exports = {
corePlugins: {
opacity: false,
}
}
最終結果は同じですが、多くのコアプラグインは構成を公開しないため、とにかく corePlugins を使用してのみ無効にできます。したがって、一貫性を保つことをお勧めします。
独自のキーを追加する｜ Adding your own keys
theme オブジェクトに独自のキーを追加すると便利な場合がいくつかあります。
例えば、複数のコアプラグイン間で共通する値のための単一の情報源を作るために、新しいキーを追加することができます。例えば、backgroundPosition プラグインと objectPosition プラグインの両方から参照される共有 position オブジェクトを抽出することができます。
module.exports = {
theme: {
positions: {
bottom: 'bottom',
center: 'center',
left: 'left',
'left-bottom': 'left bottom',
'left-top': 'left top',
right: 'right',
'right-bottom': 'right bottom',
'right-top': 'right top',
top: 'top',
},
backgroundPosition: theme => theme('positions'),
objectPosition: theme => theme('positions'),
}
}
別の例は、カスタムプラグイン内で参照する新しいキーを追加することです。たとえば、プロジェクトの filters プラグインを作成した場合、プラグインが参照するthemeオブジェクトに filters キーを追加できます。
module.exports = {
theme: {
filters: {
none: 'none',
grayscale: 'grayscale(1)',
invert: 'invert(1)',
sepia: 'sepia(1)',
}
},
plugins: [
require('./plugins/filters')
],
}
テーマ関数を使用して theme オブジェクト全体を CSS で使用できるため、CSS で参照できるようにするためだけにキーを追加することもできます。
Configuration reference
screens、colors、spacing を除き、theme オブジェクトのすべてのキーは、Tailwind のコアプラグインの 1 つに対応しています。多くのプラグインは、静的な値のセットしか受け取らない CSS プロパティを担当しているので（例えば float のように）、すべてのプラグインが theme オブジェクトに対応するキーを持っているわけではないことに注意してください。
これらのキーはすべて、デフォルトテーマの拡張を可能にする theme.extend キーの下でも利用可能です。
Discussion