vtube-studio/tailwind.config.cjs

37 lines
1.5 KiB
JavaScript

module.exports = {
content: [
'./index.html',
'./src/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
'./**/*.{html,js,ts,jsx,tsx}'
],
theme: {
extend: {},
},
/*
Safelist: some classes are generated dynamically at runtime (template literals,
props-driven classNames, or libraries that build class strings). Tailwind's
static scanner can't see those, so include patterns here to ensure the
utilities are generated in dev/production builds.
*/
safelist: [
// background colors (with optional slash opacity like bg-cyan-500/10)
{ pattern: /bg-(?:cyan|purple|pink|green|slate|yellow|white|black)-(?:50|100|200|300|400|500|600|700|800|900)(?:\/\d{1,3})?/, variants: ['hover', 'focus', 'active', 'md', 'lg', 'peer-checked', 'group-hover'] },
// text colors
{ pattern: /text-(?:slate|cyan|green|pink|purple|yellow|white|black)-(?:50|100|200|300|400|500|600|700|800|900)/, variants: ['hover', 'focus', 'md', 'lg'] },
// z-index utilities used in code
{ pattern: /z-\d+/, variants: ['md', 'lg'] },
// width/height arbitrary values (w-[...], h-[...])
{ pattern: /w-\[.*\]/ },
{ pattern: /h-\[.*\]/ },
// fractional/utility sizes
{ pattern: /w-(?:full|auto|\[1px\]|\[600px\])/, variants: ['md'] },
{ pattern: /h-(?:full|screen|\[70vh\])/, variants: ['md'] },
// grid/cols
{ pattern: /grid-cols-\d+/ },
// opacity utilities
{ pattern: /bg-[\w-]+\/(?:\d{1,3})/, variants: ['hover', 'focus'] },
],
plugins: [],
};