tailwind.config.js

module.exports = {
    content: ['./src/**/*.{js,jsx,ts,tsx}', './contents/**/*.{js,jsx,ts,tsx,mdx}', './safelist.txt'],
    options: {
        safelist: [
            // use safelist.txt
        ],
    },
    darkMode: 'class', // or 'media' or 'class'
    theme: {
        screens: {
            '2xs': '425px',
            xs: '482px',
            sm: '640px',
            // => @media (min-width: 640px) { ... }

            md: '768px',
            // => @media (min-width: 768px) { ... }

            mdlg: '900px',
            // specifically for plans

            lg: '1024px',
            // => @media (min-width: 1024px) { ... }

            lgxl: '1160px',
            // => @media (min-width: 1024px) { ... }

            xl: '1280px',
            // => @media (min-width: 1280px) { ... }

            '2xl': '1536px',
            // => @media (min-width: 1536px) { ... }

            reasonable: { raw: '(min-height: 640px)' },
        },
        flex: {
            1: '1',
            '1/3': '0 0 33%',
            '2/3': '0 0 66%',
            half: '0 0 49%',
            full: '0 0 100%',
        },

        extend: {
            backgroundColor: {
                light: '#fff',
                'accent-light': '#e5e7e0',
                dark: '#1e1f23',
                'accent-dark': '#232429',
                primary: 'rgb(var(--bg) / <alpha-value>)',
                accent: 'rgb(var(--accent) / <alpha-value>)',
                input: 'rgb(var(--input-bg) / <alpha-value>)',
                'input-hover': 'rgb(var(--input-bg-hover) / <alpha-value>)',

                'ai-blue': '#3E6B9E',
            },
            backgroundImage: {
                ai: 'radial-gradient(at 84% 83%, hsla(195,45%,75%,1) 0px, transparent 50%), radial-gradient(at 66% 38%, rgb(173, 212, 155) 0px, transparent 50%), radial-gradient(at 44% 51%, rgb(226, 219, 167) 0px, transparent 50%), radial-gradient(at 41% 14%, hsla(180,38%,78%,1) 0px, transparent 50%), radial-gradient(at 75% 97%, hsla(155,42%,68%,1) 0px, transparent 50%), radial-gradient(at 68% 35%, hsla(178,45%,65%,1) 0px, transparent 50%), radial-gradient(at 42% 23%, hsla(200,40%,72%,1) 0px, transparent 50%)',
                'llm-analytics':
                    'radial-gradient(ellipse 80% 60% at 15% 20%, #DE7AFF 0px, transparent 40%), radial-gradient(ellipse 100% 80% at 85% 15%, #EF7D9B 0px, transparent 35%), radial-gradient(ellipse 70% 100% at 90% 85%, #3795FF 0px, transparent 45%), radial-gradient(ellipse 90% 70% at 10% 90%, #40C8D8 0px, transparent 40%)',
                'trace-monitoring':
                    'radial-gradient(ellipse 80% 90% at 30% 20%, rgba(77, 64, 216, 0.67) 0%, transparent 60%), radial-gradient(ellipse 90% 75% at 70% 80%, rgba(184, 255, 162, 0.75) 0%, transparent 55%), radial-gradient(ellipse 70% 85% at 10% 60%, rgba(122, 149, 255, 0.7) 0%, transparent 65%)',
                'cost-analysis':
                    'radial-gradient(ellipse 100% 80% at 85% 15%, rgba(184, 66, 231, 0.69) 0px, transparent 55%), radial-gradient(ellipse 70% 100% at 90% 85%, rgba(55, 148, 255, 0.52) 0px, transparent 65%), radial-gradient(ellipse 60% 80% at 50% 50%, rgba(239, 125, 155, 1) 0px, transparent 70%)',
                'performance-monitoring':
                    'radial-gradient(ellipse 80% 90% at 30% 20%, rgba(17, 126, 208, 0.6) 0%, transparent 60%), radial-gradient(ellipse 90% 75% at 70% 80%, rgba(255, 20, 147, 0.5) 0%, transparent 55%), radial-gradient(ellipse 70% 85% at 10% 60%, rgba(50, 84, 205, 0.4) 0%, transparent 65%)',
                'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
                'bullet-light':
                    'url(\'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 8"><path opacity="0.3" fill="currentColor" d="M4.23 7.704c-2.034 0-3.636-1.602-3.636-3.6 0-1.98 1.602-3.6 3.636-3.6 1.962 0 3.564 1.62 3.564 3.6 0 1.998-1.602 3.6-3.564 3.6Z"/></svg>\')',
                'bullet-dark':
                    'url(\'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 8"><path fill="%234A4C52" d="M4.23 7.704c-2.034 0-3.636-1.602-3.636-3.6 0-1.98 1.602-3.6 3.636-3.6 1.962 0 3.564 1.62 3.564 3.6 0 1.998-1.602 3.6-3.564 3.6Z"/></svg>\')',
                'bullet-check-light':
                    'url(\'data:image/svg+xml,<svg fill="green" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm13.475-3.08a.75.75 0 0 1 .106 1.055l-4.5 5.5a.75.75 0 0 1-1.111.055l-2-2a.75.75 0 1 1 1.06-1.06l1.414 1.414 3.975-4.859a.75.75 0 0 1 1.056-.105Z"></path></svg>\')',

                'bullet-check-dark':
                    'url(\'data:image/svg+xml,<svg fill="lightgreen" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm13.475-3.08a.75.75 0 0 1 .106 1.055l-4.5 5.5a.75.75 0 0 1-1.111.055l-2-2a.75.75 0 1 1 1.06-1.06l1.414 1.414 3.975-4.859a.75.75 0 0 1 1.056-.105Z"></path></svg>\')',

                'bullet-chevron-light':
                    'url(\'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" viewBox="0 0 24 24"><path fill="%23555" fill-rule="evenodd" d="M8.47 3.47a.75.75 0 0 1 1.06 0l7.293 7.292a1.75 1.75 0 0 1 0 2.475L9.53 20.53a.75.75 0 0 1-1.06-1.06l7.293-7.293a.25.25 0 0 0 0-.354L8.47 4.53a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"/></svg>\')',

                'bullet-chevron-dark':
                    'url(\'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" viewBox="0 0 24 24"><path fill="%23999" fill-rule="evenodd" d="M8.47 3.47a.75.75 0 0 1 1.06 0l7.293 7.292a1.75 1.75 0 0 1 0 2.475L9.53 20.53a.75.75 0 0 1-1.06-1.06l7.293-7.293a.25.25 0 0 0 0-.354L8.47 4.53a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"/></svg>\')',

                'arrow-up-right':
                    'url(\'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" viewBox="0 0 24 24"><path fill="%232F80FA" fill-rule="evenodd" d="M7.995 5.75a.75.75 0 0 1 .75-.75h8.505c.966 0 1.75.784 1.75 1.75v9.496a.75.75 0 0 1-1.5 0V7.56L7.03 18.03a.75.75 0 0 1-1.06-1.061L16.44 6.5H8.744a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd"/></svg>\')',
                'red-carpet': "url('https://res.cloudinary.com/dmukukwp6/image/upload/carpet_8817dd42aa.png')",
                'text-gradient-light': 'linear-gradient(90deg,#30ABC6,#F35454,#2F80FA)',
                'text-gradient-dark': 'linear-gradient(90deg,#F54E00,#F7A501,#29DBBB,#EB9D2A,#F54E00)',
            },
            backgroundPosition: {
                0: '0',
                100: '100%',
            },
            borderColor: {
                light: '#fff',
                'accent-light': '#e5e7e0',
                dark: '#1e1f23',
                'accent-dark': '#232429',
                button: '#B17816',
                'button-dark': '#835C19',
                'button-secondary-dark': '#C78617',
                accent: 'rgb(var(--accent) / <alpha-value>)',

                primary: 'rgb(var(--border) / <alpha-value>)',
                secondary: 'rgb(var(--input-border) / <alpha-value>)',
                'bg-primary': 'rgb(var(--bg) / <alpha-value>)',
                input: 'rgb(var(--input-border) / <alpha-value>)',
                'input-hover': 'rgb(var(--input-border-hover) / <alpha-value>)',
            },
            borderRadius: {
                xs: '2px',
                sm: '4px',
                lg: '20px',
            },
            borderWidth: {
                half: '.5px',
                1: '1px',
                3: '3px',
                8: '8px',
                12: '12px',
                16: '16px',
            },
            colors: {
                'light-1': '#FDFDF8',
                'light-2': '#EEEFE9',
                'light-3': '#E5E7E0',
                'light-4': '#D2D3CC',
                'light-5': '#C8CAC1',
                'light-6': '#BFC1B7',
                'light-7': '#B6B7AF',
                'light-8': '#D0D1C9',
                'light-9': '#73756B',
                'light-10': '#9EA096',
                'light-11': '#4D4F46',
                'light-12': '#23251D',

                transparent: 'transparent',
                current: 'currentColor',

                highlight: 'rgba(235,157,42,.2)',
                footer: '#08042f',

                black: '#000',
                blue: '#2F80FA',
                'blue-2': '#589DF8',
                'blue-2-dark': '#1E2F46',
                brown: '#3B2B26',
                'brown-dark': '#C4A484',
                'burnt-orange': '#DF6133',
                'burnt-orange-dark': '#8E2600',
                orange: '#EB9D2A',
                'orange-dark': '#C77800',
                creamsicle: '#FFD699',
                'creamsicle-dark': '#E38907',
                fuchsia: '#A621C8',
                'fuchsia-dark': '#74108D',
                gray: '#8F8F8C',
                green: '#6AA84F',
                'green-dark': '#4D7533',
                'green-2': '#36C46F',
                gold: '#FFBA53',
                'gold-dark': '#E38907',
                lilac: '#8567FF',
                'light-blue': '#9FC4FF',
                'light-blue-dark': '#1E2F46',
                'light-purple': '#E2D6FF',
                'light-purple-dark': '#78689D',
                'light-yellow': '#FFCE5C',
                'light-yellow-dark': '#C7982B',
                'lime-green': '#96E5B6',
                navy: '#1E2F46',
                'navy-dark': '#0F233D',
                pink: '#E34C6F',
                'pink-dark': '#8C0D3B',
                'pale-blue': '#D2E6FF',
                'pale-blue-dark': '#648DC2',
                purple: '#B62AD9',
                'purple-2': '#40396E',
                'purple-2-dark': '#3C3154',
                red: '#F54E00',
                'red-2': '#F87A4C',
                'red-2-dark': '#C03300',
                salmon: '#F35454',
                seagreen: '#30ABC6',
                'sky-blue': '#2EA2D3',
                tan: '#EEEFE9',
                teal: '#29DBBB',
                'teal-2': '#6BC0B3',
                'teal-2-dark': '#34796F',
                white: '#fff',
                'white-dark': '#111', // crest dark border hack
                yellow: '#F7A501',

                'button-shadow': '#CD8407',
                'button-border': '#B17816',
                'button-shadow-dark': '#99660E',
                'button-secondary-shadow-dark': '#925D05',

                border: 'rgb(var(--border) / <alpha-value>)',
                primary: 'rgb(var(--bg) / <alpha-value>)',

                light: '#fff',
                'accent-light': '#e5e7e0',
                dark: '#1e1f23',
                'accent-dark': '#232429',

                // frame-bg
                // frame-border
                // plaque-bg
                // plaque-border
                // plaque-shadow-bg
            },
            textColor: {
                primary: 'rgb(var(--text-primary) / <alpha-value>)',
                secondary: 'rgb(var(--text-secondary) / <alpha-value>)',
                muted: 'rgb(var(--text-muted) / <alpha-value>)',
            },
            fill: {
                primary: 'rgb(var(--text-primary) / <alpha-value>)',
                secondary: 'rgb(var(--text-secondary) / <alpha-value>)',
                muted: 'rgb(var(--text-muted) / <alpha-value>)',
                accent: 'rgb(var(--accent) / <alpha-value>)',
            },
            stroke: {
                primary: 'rgb(var(--text-primary) / <alpha-value>)',
                secondary: 'rgb(var(--text-secondary) / <alpha-value>)',
                muted: 'rgb(var(--text-muted) / <alpha-value>)',
                accent: 'rgb(var(--accent) / <alpha-value>)',
            },
            fontFamily: {
                'fairytale-title': ['Fairytale', 'sans-serif'],
                fairytale: ['Computer Modern', 'sans-serif'],
                serif: ['Garamond', 'Times New Roman', 'serif'],
                sans: [
                    '-apple-system',
                    'BlinkMacSystemFont',
                    'avenir next',
                    'avenir',
                    'segoe ui',
                    'helvetica neue',
                    'helvetica',
                    'Ubuntu',
                    'roboto',
                    'noto',
                    'arial',
                    'sans-serif',
                ],
                matter: [
                    'Matter SQ',
                    '-apple-system',
                    'BlinkMacSystemFont',
                    'avenir next',
                    'avenir',
                    'segoe ui',
                    'helvetica neue',
                    'helvetica',
                    'Ubuntu',
                    'roboto',
                    'noto',
                    'arial',
                    'sans-serif',
                ],
                fancy: ['Zapfino', 'serif'],
                button: ['IBM Plex Sans Variable', 'IBM Plex Sans', 'sans-serif'],
                nav: ['IBM Plex Sans Variable', 'IBM Plex Sans', 'sans-serif'],
                code: ['Source Code Pro', 'Menlo', 'Consolas', 'monaco', 'monospace'],
                rounded: ['RoundHog', 'sans-serif'],
                squeak: ['Squeak', 'sans-serif'],
                comic: [
                    'Comic Sans MS',
                    'Comic Sans',
                    'Arial Rounded MT Bold',
                    'Helvetica Rounded',
                    'Arial',
                    'sans-serif',
                ],
                os: [
                    '-apple-system',
                    'BlinkMacSystemFont',
                    'Segoe UI',
                    'Roboto',
                    'Helvetica',
                    'Arial',
                    'sans-serif',
                    'Apple Color Emoji',
                    'Segoe UI Emoji',
                    'Segoe UI Symbol',
                ],
            },
            fontSize: {
                '2xs': '.625rem',
            },
            gridTemplateColumns: {
                16: 'repeat(16, minmax(0, 1fr))',
            },
            gridColumn: {
                'span-13': 'span 13 / span 13',
                'span-16': 'span 16 / span 16',
            },

            minHeight: {
                md: '780px',
            },
            padding: {
                'fluid-video': '56.25%',
                '1/2': '50%',
            },
            spacing: {
                4.5: '1.125rem',
                5.5: '1.375rem',
                6.5: '1.625rem',
                8.5: '2.125rem',
            },
            maxWidth: {
                '2xs': '16rem',
                '8xl': '88rem', // 1408px (8rem more than 7xl: 80rem)
                '9xl': '96rem', // 1536px (8rem more than 8xl: 88rem)
            },
            keyframes: {
                wiggle: {
                    '0%, 100%': { transform: 'rotate(6deg)' },
                    '50%': { transform: 'rotate(-6deg)' },
                },
                grow: {
                    '0%, 100%': { transform: 'scale(1)' },
                    '50%': { transform: 'scale(1.2)' },
                },
                'grow-sm': {
                    '0%, 100%': { transform: 'scale(1)' },
                    '50%': { transform: 'scale(1.05)' },
                },
                flash: {
                    '0%, 100%': { transform: 'scale(1)' },
                    '50%': { transform: 'scale(1.02)' },
                },
                reveal: {
                    '0%': { maxHeight: 0, opacity: 0 },
                    '50%': { opacity: 1 },
                    '100%': { maxHeight: '1000px', opacity: 1 },
                    'text-gradient': {
                        '0%': { 'background-position-x': '0%' },
                        '100%': { 'background-position-x': '100%' },
                    },
                },
                slideDown: {
                    from: { gridTemplateRows: '0fr' },
                    to: { gridTemplateRows: '1fr' },
                },
                slideUp: {
                    from: { gridTemplateRows: '1fr' },
                    to: { gridTemplateRows: '0fr' },
                },
                develop: {
                    '0%': {
                        opacity: '0',
                        filter: 'grayscale(100%) brightness(200%)',
                    },
                    '30%': {
                        opacity: '1',
                        filter: 'grayscale(100%) brightness(150%)',
                    },
                    '100%': {
                        opacity: '1',
                        filter: 'grayscale(0%) brightness(100%)',
                    },
                },
                'svg-stroke-dashoffset-around': {
                    from: { 'stroke-dashoffset': '0' },
                    to: { 'stroke-dashoffset': '1000' },
                },
                wobble: {
                    '0%, 100%': { transform: 'rotate(-2deg) translateX(-5px)' },
                    '50%': { transform: 'rotate(2deg) translateX(5px)' },
                },
                hide: {
                    from: { opacity: '1' },
                    to: { opacity: '0' },
                },
                slideIn: {
                    from: {
                        transform: 'translateX(calc(100% + var(--viewport-padding)))',
                    },
                    to: { transform: 'translateX(0)' },
                },
                swipeOut: {
                    from: { transform: 'translateX(var(--radix-toast-swipe-end-x))' },
                    to: { transform: 'translateX(calc(100% + var(--viewport-padding)))' },
                },
                'spin-slow': {
                    from: { transform: 'rotate(0deg)' },
                    to: { transform: 'rotate(360deg)' },
                },
                'spin-slow-reverse': {
                    from: { transform: 'rotate(360deg)' },
                    to: { transform: 'rotate(0deg)' },
                },
                'gradient-rotate': {
                    '0%, 100%': { 'background-position': '0% 50%' },
                    '50%': { 'background-position': '100% 50%' },
                },
                slideUpFadeIn: {
                    from: {
                        opacity: '0',
                        transform: 'translateY(10px)',
                    },
                    to: {
                        opacity: '1',
                        transform: 'translateY(0)',
                    },
                },
                slideUpFadeOut: {
                    from: {
                        opacity: '1',
                        transform: 'translateY(0)',
                    },
                    to: {
                        opacity: '0',
                        transform: 'translateY(-10px)',
                    },
                },
                float: {
                    '0%, 100%': { transform: 'translateY(0)' },
                    '50%': { transform: 'translateY(-6px)' },
                },
                breathe: {
                    '0%, 100%': { transform: 'scale(1)' },
                    '50%': { transform: 'scale(1.03)' },
                },
                shimmer: {
                    '0%': { 'background-position': '200% 0' },
                    '100%': { 'background-position': '-200% 0' },
                },
                'hogfather-roll': {
                    '0%': { left: '0', transform: 'scaleX(-1) translateY(-75%)' },
                    '44%': { left: 'calc(100% - 32px)', transform: 'scaleX(-1) translateY(-75%)' },
                    '46%': { left: 'calc(100% - 32px)', transform: 'scaleX(1) translateY(-75%)' },
                    '98%': { left: '0', transform: 'scaleX(1) translateY(-75%)' },
                    '100%': { left: '0', transform: 'scaleX(-1) translateY(-75%)' },
                },
                'hogfather-jump': {
                    '0%': { 'margin-top': '0' },
                    '30%': { 'margin-top': '-24px' },
                    '60%': { 'margin-top': '0' },
                    '80%': { 'margin-top': '-8px' },
                    '100%': { 'margin-top': '0' },
                },
            },
            animation: {
                wiggle: 'wiggle .2s ease-in-out 3',
                grow: 'grow 2s linear infinite',
                'grow-sm': 'grow-sm 3s linear infinite',
                flash: 'flash 1s ease-in-out 2',
                reveal: 'reveal 1s ease-in-out',
                'text-gradient': 'text-gradient 2500ms linear infinite',
                develop: 'develop 1.5s ease-out forwards',
                slideDown: 'slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1)',
                slideUp: 'slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1)',
                'svg-stroke-dashoffset-around': 'svg-stroke-dashoffset-around 2.5s linear infinite',
                wobble: 'wobble 3s ease-in-out infinite',
                hide: 'hide 100ms ease-in',
                slideIn: 'slideIn 150ms cubic-bezier(0.16, 1, 0.3, 1)',
                swipeOut: 'swipeOut 100ms ease-out',
                'spin-slow': 'spin-slow 4s linear infinite',
                'spin-slow-reverse': 'spin-slow-reverse 4s linear infinite',
                'gradient-rotate': 'gradient-rotate 3s ease-in-out infinite',
                'slide-up-fade-in': 'slideUpFadeIn 300ms ease-out forwards',
                'slide-up-fade-out': 'slideUpFadeOut 300ms ease-in forwards',
                float: 'float 2s ease-in-out infinite',
                breathe: 'breathe 3s ease-in-out infinite',
                shimmer: 'shimmer 8s linear infinite',
                'hogfather-roll': 'hogfather-roll 20s ease-in-out infinite',
                'hogfather-jump': 'hogfather-jump 400ms ease-out',
            },
            containers: {
                '2xs': '16rem',
            },
            scale: {
                50: '.5',
                55: '.55',
                60: '.6',
                65: '.65',
                70: '.7',
                75: '.75',
                80: '.8',
                85: '.85',
                90: '.9',
                95: '.95',
                '-1': '-1',
                100: '1',
                '-100': '-1',
            },
            typography: {
                DEFAULT: {
                    css: {
                        '--tw-prose-bullets': 'rgb(var(--text-secondary))',
                        '--tw-prose-counters': 'rgb(var(--text-secondary))',
                    },
                },
                invert: {
                    css: {
                        '--tw-prose-invert-bullets': 'rgb(var(--text-secondary))',
                        '--tw-prose-invert-counters': 'rgb(var(--text-secondary))',
                    },
                },
            },
        },
    },
    plugins: [
        require('@tailwindcss/forms'),
        require('@headlessui/tailwindcss'),
        require('@tailwindcss/container-queries'),
        function ({ addUtilities }) {
            addUtilities({
                '.container-size': { 'container-type': 'size' },
                '.text-shadow-desktop': {
                    'text-shadow': '0 1px 3px rgba(0, 0, 0, 0.5), 0 0 1px rgba(0, 0, 0, 0.3)',
                },
            })
        },
        require('tailwindcss-animated'),
        require('@tailwindcss/typography'),
        function ({ addVariant }) {
            addVariant('skin-modern', 'body[data-skin="modern"] &')
            addVariant('skin-classic', 'body[data-skin="classic"] &')
            addVariant('wallpaper-keyboard-garden', 'body[data-wallpaper="keyboard-garden"] &')
            addVariant('wallpaper-hogzilla', 'body[data-wallpaper="hogzilla"] &')
            addVariant('wallpaper-office-party', 'body[data-wallpaper="office-party"] &')
            addVariant('wallpaper-startup-monopoly', 'body[data-wallpaper="startup-monopoly"] &')
            // Site toggle (data attr, set early in theme-init) + OS prefers-reduced-transparency
            addVariant('reduce-transparency', [
                'body[data-reduce-transparency="true"] &',
                '@media (prefers-reduced-transparency: reduce)',
            ])
        },
    ],
}