58 lines
1.4 KiB
JavaScript
58 lines
1.4 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
|
|
theme: {
|
|
container: {
|
|
padding: '2rem',
|
|
center: true
|
|
},
|
|
fontFamily: {
|
|
sans: ['Noto Sans', 'ui-sans-serif', 'system-ui'],
|
|
serif: ['ui-serif', 'Georgia'],
|
|
mono: ['ui-monospace', 'SFMono-Regular'],
|
|
display: ['Oswald'],
|
|
body: ['Noto Sans']
|
|
},
|
|
extend: {
|
|
colors: {
|
|
'y-beige': {
|
|
DEFAULT: '#B0AB97',
|
|
50: '#FFFFFF',
|
|
100: '#F6F6F4',
|
|
200: '#E5E3DD',
|
|
300: '#D8D2B8',
|
|
400: '#cbc5af',
|
|
500: '#b0ab97',
|
|
600: '#767563',
|
|
700: '#4c4940',
|
|
800: '#3A382C',
|
|
900: '#2d2c21'
|
|
}
|
|
},
|
|
boxShadow: {
|
|
sharpest: '2px 2px #2d2c2150'
|
|
}
|
|
}
|
|
},
|
|
plugins: [
|
|
function ({ addBase, theme }) {
|
|
function extractColorVars(colorObj, colorGroup = '') {
|
|
return Object.keys(colorObj).reduce((vars, colorKey) => {
|
|
const value = colorObj[colorKey]
|
|
|
|
const newVars =
|
|
typeof value === 'string'
|
|
? { [`--color${colorGroup}-${colorKey}`]: value }
|
|
: extractColorVars(value, `-${colorKey}`)
|
|
|
|
return { ...vars, ...newVars }
|
|
}, {})
|
|
}
|
|
|
|
addBase({
|
|
':root': extractColorVars(theme('colors'))
|
|
})
|
|
}
|
|
]
|
|
}
|