Spaces:
Build error
Build error
| import type { Config } from 'tailwindcss'; | |
| const config: Config = { | |
| darkMode: 'class', | |
| content: [ | |
| './src/**/*.{js,ts,jsx,tsx,mdx}', | |
| './src/app/**/*.{js,ts,jsx,tsx,mdx}', | |
| './src/pages/**/*.{js,ts,jsx,tsx,mdx}', | |
| './src/components/**/*.{js,ts,jsx,tsx,mdx}', | |
| ], | |
| safelist: [ | |
| 'bg-amber-900', | |
| 'bg-amber-800', | |
| 'bg-amber-700', | |
| 'bg-amber-600', | |
| 'bg-amber-500', | |
| 'bg-amber-400', | |
| 'bg-amber-400', | |
| 'bg-amber-300', | |
| 'text-amber-300', | |
| 'text-amber-200', | |
| 'bg-green-900', | |
| 'bg-green-800', | |
| 'bg-green-700', | |
| 'bg-green-600', | |
| 'bg-green-500', | |
| 'bg-green-400', | |
| 'bg-green-400', | |
| 'bg-green-300', | |
| 'text-green-300', | |
| 'text-green-200', | |
| 'bg-gray-900', | |
| 'bg-gray-800', | |
| 'bg-gray-700', | |
| 'bg-gray-600', | |
| 'bg-gray-500', | |
| 'bg-gray-400', | |
| 'bg-gray-400', | |
| 'bg-gray-300', | |
| 'text-gray-300', | |
| 'bg-indigo-900', | |
| 'bg-indigo-800', | |
| 'bg-indigo-700', | |
| 'bg-indigo-600', | |
| 'bg-indigo-500', | |
| 'bg-indigo-400', | |
| 'bg-indigo-400', | |
| 'bg-indigo-300', | |
| 'text-indigo-300', | |
| 'text-indigo-200', | |
| 'bg-lime-900', | |
| 'bg-lime-800', | |
| 'bg-lime-700', | |
| 'bg-lime-600', | |
| 'bg-lime-500', | |
| 'bg-lime-400', | |
| 'bg-lime-400', | |
| 'bg-lime-300', | |
| 'text-lime-300', | |
| 'text-lime-200', | |
| 'text-lime-400', | |
| 'text-lime-500', | |
| 'bg-red-900', | |
| 'bg-red-800', | |
| 'bg-red-700', | |
| 'bg-red-600', | |
| 'bg-red-500', | |
| 'bg-red-400', | |
| 'bg-red-400', | |
| 'bg-red-300', | |
| 'text-red-300', | |
| 'text-red-200', | |
| 'bg-emerald-900', | |
| 'bg-emerald-800', | |
| 'bg-emerald-700', | |
| 'bg-emerald-600', | |
| 'bg-emerald-500', | |
| 'bg-emerald-400', | |
| 'bg-emerald-400', | |
| 'bg-emerald-300', | |
| 'text-emerald-300', | |
| 'text-emerald-200', | |
| 'text-emerald-400', | |
| 'text-emerald-500', | |
| 'bg-purple-900', | |
| 'bg-purple-800', | |
| 'bg-purple-700', | |
| 'bg-purple-600', | |
| 'bg-purple-500', | |
| 'bg-purple-400', | |
| 'bg-purple-400', | |
| 'bg-green-300', | |
| 'text-green-300', | |
| 'text-green-200', | |
| 'text-green-400', | |
| 'text-green-500', | |
| 'bg-opacity-70', | |
| 'bg-opacity-80', | |
| 'bg-opacity-70', | |
| 'bg-opacity-60', | |
| 'bg-opacity-50', | |
| 'bg-opacity-30', | |
| 'bg-opacity-20', | |
| 'bg-opacity-10', | |
| 'bg-opacity-5', | |
| 'text-audienceScore-100', | |
| 'text-audienceScore-200', | |
| 'text-audienceScore-300', | |
| 'text-audienceScore-400', | |
| 'text-audienceScore-500', | |
| 'text-audienceScore-600', | |
| 'text-audienceScore-700', | |
| 'text-audienceScore-800', | |
| 'text-audienceScore-900', | |
| 'drop-shadow-sm', | |
| '-top-10 top-10', | |
| { | |
| pattern: | |
| /bg-(red|green|blue|gray|brand|orange|yellow)-(100|200|300|400|500|600|700|800|900|950)/, | |
| variants: ['hover'], | |
| }, | |
| // { | |
| // pattern: /text-(red|green|blue|gray|brand|orange|yellow)-(100|200|300|400|500|600|700|800|900|950)/, | |
| // variants: ['hover'], | |
| // }, | |
| // { | |
| // pattern: /border-(red|green|blue|gray|brand|orange|yellow)-(100|200|300|400|500|600|700|800|900|950)/, | |
| // }, | |
| { | |
| pattern: /p-[0-9]+/, | |
| }, | |
| { | |
| pattern: /m-[0-9]+/, | |
| }, | |
| { | |
| pattern: /gap-[0-9]+/, | |
| }, | |
| { | |
| pattern: /(px|py|pt|pb|pl|pr)-[0-9]+/, | |
| }, | |
| { | |
| pattern: /(mx|my|mt|mb|ml|mr)-[0-9]+/, | |
| }, | |
| { | |
| pattern: /grid-cols-[1-9]+/, | |
| variants: ['lg'], | |
| }, | |
| { | |
| pattern: /col-span-[1-9]+/, | |
| variants: ['lg'], | |
| }, | |
| 'flex', | |
| 'inline-flex', | |
| 'grid', | |
| 'inline-grid', | |
| 'flex-row', | |
| 'flex-col', | |
| 'flex-row-reverse', | |
| 'flex-col-reverse', | |
| 'flex-wrap', | |
| 'flex-nowrap', | |
| 'flex-wrap-reverse', | |
| 'items-start', | |
| 'items-center', | |
| 'items-end', | |
| 'items-baseline', | |
| 'items-stretch', | |
| 'justify-start', | |
| 'justify-center', | |
| 'justify-end', | |
| 'justify-between', | |
| 'justify-around', | |
| 'justify-evenly', | |
| { | |
| pattern: | |
| /flex|inline-flex|grid|inline-grid|flex-row|flex-col|flex-row-reverse|flex-col-reverse|flex-wrap|flex-nowrap|flex-wrap-reverse|items-start|items-center|items-end|items-baseline|items-stretch|justify-start|justify-center|justify-end|justify-between|justify-around|justify-evenly/, | |
| variants: ['lg', 'md'], | |
| }, | |
| // { | |
| // pattern: /w-[0-9]+/, | |
| // variants: ['lg', 'md', 'sm', 'xl', '2xl'], | |
| // }, | |
| // { | |
| // pattern: /h-[0-9]+/, | |
| // variants: ['lg', 'md', 'sm', 'xl', '2xl'], | |
| // }, | |
| 'w-full', | |
| 'h-full', | |
| 'w-screen', | |
| 'h-screen', | |
| 'w-auto', | |
| 'h-auto', | |
| 'min-w-0', | |
| 'min-h-0', | |
| 'max-w-none', | |
| 'max-h-none', | |
| { | |
| pattern: /text-xs|text-sm|text-base|text-lg|text-xl|text-2xl|text-3xl/, | |
| variants: ['lg', 'md'], | |
| }, | |
| { | |
| pattern: | |
| /font-thin|font-light|font-normal|font-medium|font-semibold|font-bold/, | |
| variants: ['lg', 'md'], | |
| }, | |
| { | |
| pattern: /text-left|text-center|text-right|text-justify/, | |
| variants: ['lg', 'md'], | |
| }, | |
| 'uppercase', | |
| 'lowercase', | |
| 'capitalize', | |
| 'normal-case', | |
| 'truncate', | |
| 'overflow-ellipsis', | |
| 'overflow-clip', | |
| 'rounded-none', | |
| 'rounded-sm', | |
| 'rounded', | |
| 'rounded-md', | |
| 'rounded-lg', | |
| 'rounded-xl', | |
| 'rounded-2xl', | |
| 'rounded-3xl', | |
| 'rounded-full', | |
| 'border', | |
| 'border-0', | |
| 'border-2', | |
| 'border-4', | |
| 'border-8', | |
| // { | |
| // pattern: /border-[0-9]+/, | |
| // variants: ['lg', 'md', 'sm', 'xl', '2xl', 'hover', 'focus'], | |
| // }, | |
| 'shadow-sm', | |
| 'shadow', | |
| 'shadow-md', | |
| 'shadow-lg', | |
| 'shadow-xl', | |
| 'shadow-2xl', | |
| 'shadow-inner', | |
| 'shadow-none', | |
| 'opacity-0', | |
| 'opacity-25', | |
| 'opacity-50', | |
| 'opacity-75', | |
| 'opacity-100', | |
| // "transition", "transition-all", "transition-colors", "transition-opacity", "transition-shadow", "transition-transform", | |
| // "duration-75", "duration-100", "duration-150", "duration-200", "duration-300", "duration-500", "duration-700", "duration-1000", | |
| // "ease-linear", "ease-in", "ease-out", "ease-in-out", | |
| // "scale-0", "scale-50", "scale-75", "scale-90", "scale-95", "scale-100", "scale-105", "scale-110", "scale-125", "scale-150", | |
| // "rotate-0", "rotate-45", "rotate-90", "rotate-180", "-rotate-45", "-rotate-90", "-rotate-180", | |
| // "translate-x-0", "translate-x-1", "translate-x-2", "translate-x-4", "translate-x-8", | |
| // "translate-y-0", "translate-y-1", "translate-y-2", "translate-y-4", "translate-y-8", | |
| 'cursor-pointer', | |
| 'cursor-not-allowed', | |
| 'cursor-wait', | |
| 'cursor-text', | |
| 'cursor-move', | |
| 'cursor-help', | |
| 'select-none', | |
| 'select-text', | |
| 'select-all', | |
| 'select-auto', | |
| 'pointer-events-none', | |
| 'pointer-events-auto', | |
| 'resize', | |
| 'resize-none', | |
| 'resize-y', | |
| 'resize-x', | |
| 'static', | |
| 'fixed', | |
| 'absolute', | |
| 'relative', | |
| 'sticky', | |
| 'top-0', | |
| 'right-0', | |
| 'bottom-0', | |
| 'left-0', | |
| 'z-0', | |
| 'z-10', | |
| 'z-20', | |
| 'z-30', | |
| 'z-40', | |
| 'z-50', | |
| 'z-auto', | |
| 'block', | |
| 'inline-block', | |
| 'inline', | |
| 'hidden', | |
| { | |
| pattern: /hidden|block|inline|inline-block/, | |
| variants: ['lg', 'md'], | |
| }, | |
| 'overflow-auto', | |
| 'overflow-hidden', | |
| 'overflow-visible', | |
| 'overflow-scroll', | |
| 'overflow-x-auto', | |
| 'overflow-y-auto', | |
| 'overflow-x-hidden', | |
| 'overflow-y-hidden', | |
| ], | |
| theme: { | |
| container: { | |
| center: true, | |
| padding: { | |
| DEFAULT: '1rem', | |
| sm: '2rem', | |
| lg: '4rem', | |
| xl: '5rem', | |
| '2xl': '6rem', | |
| }, | |
| screens: { | |
| '2xl': '1400px', | |
| '3xl': '1600px', | |
| '4xl': '1800px', | |
| '5xl': '2000px', | |
| '6xl': '2200px', | |
| '7xl': '2400px', | |
| }, | |
| }, | |
| data: { | |
| checked: 'checked', | |
| selected: 'selected', | |
| disabled: 'disabled', | |
| highlighted: 'highlighted', | |
| }, | |
| extend: { | |
| screens: { | |
| '3xl': '1600px', | |
| '4xl': '1800px', | |
| '5xl': '2000px', | |
| '6xl': '2200px', | |
| '7xl': '2400px', | |
| }, | |
| animationDuration: { | |
| DEFAULT: '0.25s', | |
| }, | |
| keyframes: { | |
| 'accordion-down': { | |
| from: { height: '0' }, | |
| to: { height: 'var(--radix-accordion-content-height)' }, | |
| }, | |
| 'accordion-up': { | |
| from: { height: 'var(--radix-accordion-content-height)' }, | |
| to: { height: '0' }, | |
| }, | |
| 'slide-down': { | |
| from: { transform: 'translateY(-1rem)', opacity: '0' }, | |
| to: { transform: 'translateY(0)', opacity: '1' }, | |
| }, | |
| 'slide-up': { | |
| from: { transform: 'translateY(0)', opacity: '1' }, | |
| to: { transform: 'translateY(-1rem)', opacity: '0' }, | |
| }, | |
| 'indeterminate-progress': { | |
| '0%': { transform: ' translateX(0) scaleX(0)' }, | |
| '40%': { transform: 'translateX(0) scaleX(0.4)' }, | |
| '100%': { transform: 'translateX(100%) scaleX(0.5)' }, | |
| }, | |
| }, | |
| animation: { | |
| 'accordion-down': 'accordion-down 0.15s linear', | |
| 'accordion-up': 'accordion-up 0.15s linear', | |
| 'slide-down': 'slide-down 0.15s ease-in-out', | |
| 'slide-up': 'slide-up 0.15s ease-in-out', | |
| 'indeterminate-progress': 'indeterminate-progress 1s infinite ease-out', | |
| }, | |
| transformOrigin: { | |
| 'left-right': '0% 100%', | |
| }, | |
| boxShadow: { | |
| md: '0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06)', | |
| }, | |
| colors: { | |
| brand: { | |
| 50: 'rgb(var(--color-brand-50) / <alpha-value>)', | |
| 100: 'rgb(var(--color-brand-100) / <alpha-value>)', | |
| 200: 'rgb(var(--color-brand-200) / <alpha-value>)', | |
| 300: 'rgb(var(--color-brand-300) / <alpha-value>)', | |
| 400: 'rgb(var(--color-brand-400) / <alpha-value>)', | |
| 500: 'rgb(var(--color-brand-500) / <alpha-value>)', | |
| 600: 'rgb(var(--color-brand-600) / <alpha-value>)', | |
| 700: 'rgb(var(--color-brand-700) / <alpha-value>)', | |
| 800: 'rgb(var(--color-brand-800) / <alpha-value>)', | |
| 900: 'rgb(var(--color-brand-900) / <alpha-value>)', | |
| 950: 'rgb(var(--color-brand-950) / <alpha-value>)', | |
| DEFAULT: 'rgb(var(--color-brand-default) / <alpha-value>)', | |
| }, | |
| gray: { | |
| 50: 'rgb(var(--color-gray-50) / <alpha-value>)', | |
| 100: 'rgb(var(--color-gray-100) / <alpha-value>)', | |
| 200: 'rgb(var(--color-gray-200) / <alpha-value>)', | |
| 300: 'rgb(var(--color-gray-300) / <alpha-value>)', | |
| 400: 'rgb(var(--color-gray-400) / <alpha-value>)', | |
| 500: 'rgb(var(--color-gray-500) / <alpha-value>)', | |
| 600: 'rgb(var(--color-gray-600) / <alpha-value>)', | |
| 700: 'rgb(var(--color-gray-700) / <alpha-value>)', | |
| 800: 'rgb(var(--color-gray-800) / <alpha-value>)', | |
| 900: 'rgb(var(--color-gray-900) / <alpha-value>)', | |
| 950: 'rgb(var(--color-gray-950) / <alpha-value>)', | |
| DEFAULT: 'rgb(var(--color-gray-500) / <alpha-value>)', | |
| }, | |
| green: { | |
| 50: '#e6f7ea', | |
| 100: '#cfead6', | |
| 200: '#7bd0a7', | |
| 300: '#68b695', | |
| 400: '#57a181', | |
| 500: '#258c60', | |
| 600: '#1a6444', | |
| 700: '#154f37', | |
| 800: '#103b29', | |
| 900: '#0a2318', | |
| 950: '#05130d', | |
| DEFAULT: '#258c60', | |
| }, | |
| audienceScore: { | |
| 300: '#b45d5d', | |
| 500: '#9d8741', | |
| 600: '#a0b974', | |
| 700: '#57a181', | |
| }, | |
| background: { | |
| 500: 'rgb(var(--background) / <alpha-value>)', | |
| DEFAULT: 'rgb(var(--background) / <alpha-value>)', | |
| }, | |
| }, | |
| }, | |
| }, | |
| plugins: [ | |
| require('@tailwindcss/typography'), | |
| require('@tailwindcss/forms'), | |
| require('@headlessui/tailwindcss'), | |
| require('tailwind-scrollbar-hide'), | |
| require('tailwindcss-animate'), | |
| addVariablesForColors, | |
| ], | |
| } satisfies Config; | |
| export default config; | |
| function addVariablesForColors({ addBase, theme }: any) { | |
| let allColors = flattenColorPalette(theme('colors')); | |
| let newVars = Object.fromEntries( | |
| Object.entries(allColors).map(([key, val]) => [`--${key}`, val]) | |
| ); | |
| addBase({ | |
| ':root': newVars, | |
| }); | |
| } | |
| type Colors = { | |
| [key: string | number]: string | Colors; | |
| }; | |
| function flattenColorPalette(colors: Colors) { | |
| let result: Record<string, string> = {}; | |
| for (let [root, children] of Object.entries(colors ?? {})) { | |
| if (root === '__CSS_VALUES__') continue; | |
| if (typeof children === 'object' && children !== null) { | |
| for (let [parent, value] of Object.entries( | |
| flattenColorPalette(children) | |
| )) { | |
| result[`${root}${parent === 'DEFAULT' ? '' : `-${parent}`}`] = value; | |
| } | |
| } else { | |
| result[root] = children; | |
| } | |
| } | |
| if ('__CSS_VALUES__' in colors) { | |
| for (let [key, value] of Object.entries(colors.__CSS_VALUES__)) { | |
| if ((Number(value) & (1 << 2)) === 0) { | |
| result[key] = colors[key] as string; | |
| } | |
| } | |
| } | |
| return result; | |
| } | |