theme.colors
プロジェクト内でよく使う色に名前を付ける感じかな
https://gyazo.com/0d3e4c324ba7beb4884e536b0fb6c43e
e.g. backgroundColor, borderColor, textColor
構造がよくわからないな
こんな感じで、blueを追加したとき
code:tailwind.config.js
module.exports = {
theme: {
colors: {
'blue': '#1fb6ff',
},
}
}
text-blueの色も変わる
defaultではtext-blueは存在しない
text-whiteはある
bg-blue-200はだめ
このcolorsの影響範囲を理解していないmrsekut.icon
color名の設定をする
colorsを設定しておかないとbg-green-500とか書いても適用されない
code:tailwind.config.js
const colors = require('tailwindcss/colors')
module.exports = {
theme: {
colors: {
transparent: 'transparent',
current: 'currentColor',
black: colors.black,
white: colors.white,
..
}
}
}
そのprojectでよく使う色をわかりやすい名前にしておくと良い
defaultでamberという名前の色があるが、これをyellowという名前にするなど
mainという名前でも良さそう