tailwind.config.jsのtheme
元々用意されているkey (e.g. backgroundColor)に対して、内容を変更できる
新しいkey名を導入できるわけではない
例えば、よく使う色や余白を用意するとかができる
どういうkeyが存在するかや、defualtの内容がどうなっているかを知っている必要がある
用意されているkeyの種類
例えば、fontFamilyとか
もともと用意されているkeyに対して、ルールの内容を上書きする感じねmrsekut.icon
screensとcolorsとspacingの3つだけ特権的な場所にある
ここの構造を知っていないといけないmrsekut.icon
custmizeとしては2パターン
↑いずれも、backgroundSizeみたいなkeyの部分は既存のものを使っている
keyは既存のままで、内容のみを書き換える
他の値を参照したルールを書ける
関数ぽくかけばいい
code:js
module.exports = {
theme: {
spacing: {
// ...
},
backgroundSize: ({ theme }) => ({
auto: 'auto',
cover: 'cover',
contain: 'contain',
...theme('spacing')
})
}
}
default themeの参照できる
code:js
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
theme: {
extend: {
fontFamily: {
sans: [
'Lato',
...defaultTheme.fontFamily.sans,
]
}
}
}
}