40 lines
920 B
JavaScript
40 lines
920 B
JavaScript
const colors = require('tailwindcss/colors');
|
|
|
|
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
content: ['./src/**/*.{html,js,svelte,ts}'],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
text: '#c1b492',
|
|
accent: '#d2738a',
|
|
card: '#1a1a1a',
|
|
bg: colors.zinc
|
|
}
|
|
}
|
|
},
|
|
plugins: [
|
|
function ({ addBase, theme }) {
|
|
function extractColorVars(colorObj, colorGroup = '') {
|
|
return Object.keys(colorObj).reduce((vars, colorKey) => {
|
|
const value = colorObj[colorKey];
|
|
const cssVariable =
|
|
colorKey === 'DEFAULT' ? `--color${colorGroup}` : `--color${colorGroup}-${colorKey}`;
|
|
|
|
const newVars =
|
|
typeof value === 'string'
|
|
? { [cssVariable]: value }
|
|
: extractColorVars(value, `-${colorKey}`);
|
|
|
|
return { ...vars, ...newVars };
|
|
}, {});
|
|
}
|
|
|
|
addBase({
|
|
':root': extractColorVars(theme('colors'))
|
|
});
|
|
},
|
|
require('@tailwindcss/typography')
|
|
]
|
|
};
|