kitecss/index.cjs

A comprehensive, responsive component library plugin for Tailwind CSS v4

const plugin = require('tailwindcss/plugin');

/**
 * This is a single, self-contained plugin file. All component definitions are
 * included directly within the `theme.kitecss` configuration object.
 * This structure is the most reliable way to ensure that the
 * Tailwind CSS IntelliSense extension can discover all of your custom classes.
 */
module.exports = plugin.withOptions(
    function (options = {}) {
        return function ({ addComponents, addBase, theme }) {
            // Add the base theme variables
            addBase({
                ':root': {
                    '--color-primary': '#3b82f6',
                    '--color-secondary': '#6366f1',
                    '--color-accent': '#f59e0b',
                    '--color-neutral': '#6b7280',
                    '--color-neutral-content': '#ffffff',
                    '--color-success': '#22c55e',
                    '--color-warning': '#f97316',
                    '--color-danger': '#ef4444',
                    '--color-base-100': '#ffffff',
                    '--color-base-200': '#f3f4f6',
                    '--color-base-300': '#e5e7eb',
                    '--color-base-content': '#1f2937',
                    '--radius-sm': '0.25rem',
                    '--radius-md': '0.375rem',
                    '--radius-lg': '0.5rem',
                    '--radius-xl': '0.75rem',
                    '--radius-full': '9999px',
                    '--radius-box': '1rem',
                }
            });

            // Add components by reading them from the theme config
            addComponents(theme('kitecss'));
        };
    },
    function (options = {}) {
        return {
            theme: {
                // All component definitions are placed here for IntelliSense
                kitecss: (theme) => ({
                    // Accordion
                    '.accordion': { '@apply w-full rounded-lg': {}, '& > .accordion-item': { '@apply border-b border-base-300 last:border-b-0': {} } },
                    '.accordion-title': { '@apply flex justify-between items-center w-full p-4 text-left font-medium text-base-content hover:bg-base-200 cursor-pointer': {} },
                    '.accordion-content': { '@apply p-4 pt-0 text-base-content/80': {} },

                    // Alert
                    '.alert': { '@apply flex items-center w-full p-4 rounded-lg': {} },
                    '.alert-info': { '@apply bg-primary/10 text-primary': {} },
                    '.alert-success': { '@apply bg-success/10 text-success': {} },
                    '.alert-warning': { '@apply bg-warning/10 text-warning': {} },
                    '.alert-danger': { '@apply bg-danger/10 text-danger': {} },

                    // Artboard
                    '.artboard': { '@apply w-full bg-base-200': {} },
                    '.artboard-phone-1': { '@apply h-[568px] w-[320px]': {} },
                    '.artboard-phone-2': { '@apply h-[667px] w-[375px]': {} },

                    // Avatar
                    '.avatar': { '@apply relative inline-flex': {} },
                    '.avatar img, .avatar .placeholder': { '@apply h-16 w-16 rounded-full object-cover': {} },
                    '.avatar .placeholder': { '@apply flex items-center justify-center bg-neutral text-neutral-content font-bold': {} },
                    '.avatar-group': { '@apply flex -space-x-4': {}, '& .avatar': { '@apply border-2 border-base-100': {} } },
                    '.avatar .online': { '@apply absolute bottom-0 right-0 h-4 w-4 rounded-full border-2 border-base-100 bg-success': {} },
                    '.avatar .offline': { '@apply absolute bottom-0 right-0 h-4 w-4 rounded-full border-2 border-base-100 bg-base-300': {} },

                    // Badge
                    '.badge': { '@apply inline-flex items-center justify-center px-2.5 py-0.5 rounded-full text-xs font-medium': {} },
                    '.badge-primary': { '@apply bg-primary/20 text-primary': {} },
                    '.badge-secondary': { '@apply bg-secondary/20 text-secondary': {} },
                    '.badge-accent': { '@apply bg-accent/20 text-accent': {} },
                    '.badge-ghost': { '@apply bg-base-200 text-base-content': {} },
                    '.badge-outline': { '@apply bg-transparent border border-current': {} },
                    
                    // Blockquote
                    '.blockquote': { '@apply p-4 my-4 border-l-4 border-base-300 bg-base-200': {} },
                    '.blockquote p': { '@apply text-xl italic font-medium leading-relaxed text-base-content': {} },
                    
                    // Breadcrumbs
                    '.breadcrumbs': { '@apply text-sm': {}, '& ul': { '@apply flex items-center gap-2': {} }, '& li:not(:last-child)::after': { content: '">"', '@apply opacity-50': {} } },
                    
                    // Browser Mockup
                    '.mockup-browser': { '@apply rounded-lg border bg-base-100 border-base-300': {} },
                    '.mockup-browser-toolbar': { '@apply bg-base-200 px-4 py-2 flex items-center gap-2': {}, '& .input': { '@apply w-full !bg-base-100': {} } },
                    
                    // Button
                    '.btn': { '@apply inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium border border-transparent focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-base-100 transition-all duration-200': {}, '-webkit-tap-highlight-color': 'transparent' },
                    '.btn-primary': { '@apply bg-primary text-white hover:bg-primary/90 focus:ring-primary': {} },
                    '.btn-secondary': { '@apply bg-secondary text-white hover:bg-secondary/90 focus:ring-secondary': {} },
                    '.btn-accent': { '@apply bg-accent text-white hover:bg-accent/90 focus:ring-accent': {} },
                    '.btn-danger': { '@apply bg-danger text-white hover:bg-danger/90 focus:ring-danger': {} },
                    '.btn-ghost': { '@apply border-transparent text-base-content/80 hover:bg-base-200 focus:ring-neutral': {} },
                    '.btn-outline': { '@apply border-current bg-transparent text-primary hover:bg-primary hover:text-white': {} },
                    '.btn-xs': { '@apply px-2.5 py-1.5 text-xs rounded-sm': {} },
                    '.btn-sm': { '@apply px-3 py-2 text-sm': {} },
                    '.btn-md': { '@apply px-4 py-2 text-sm': {} },
                    '.btn-lg': { '@apply px-5 py-2.5 text-base rounded-lg': {} },
                    '.btn-xl': { '@apply px-6 py-3 text-lg rounded-xl': {} },
                    '.btn[disabled]': { '@apply cursor-not-allowed opacity-50': {} },
                    '.btn-icon': { '@apply p-2 rounded-full': {} },

                    // Card
                    '.card': { '@apply bg-base-100 text-base-content border border-base-300 rounded-xl shadow-sm overflow-hidden': {} },
                    '.card-body': { '@apply p-6': {} },
                    '.card-title': { '@apply text-xl font-bold mb-2': {} },
                    '.card-actions': { '@apply p-6 pt-0 flex justify-end gap-2': {} },
                    '.card-bordered': { '@apply border-2 border-base-300': {} },

                    // Carousel
                    '.carousel': { '@apply relative w-full overflow-x-auto snap-x snap-mandatory flex rounded-lg': {} },
                    '.carousel-item': { '@apply flex-none w-full snap-center': {} },

                    // Chat Bubble
                    '.chat': { '@apply grid gap-2': {} },
                    '.chat-bubble': { '@apply relative block p-4 rounded-lg max-w-xs': {} },
                    '.chat-start': { '@apply justify-items-start': {} },
                    '.chat-end': { '@apply justify-items-end': {} },
                    '.chat-start .chat-bubble': { '@apply bg-base-300': {} },
                    '.chat-end .chat-bubble': { '@apply bg-primary text-white': {} },

                    // Checkbox
                    '.checkbox': { '@apply h-5 w-5 rounded border-base-300 text-primary focus:ring-primary': {} },

                    // Code Mockup
                    '.mockup-code': { '@apply bg-neutral text-neutral-content p-4 rounded-lg': {}, 'pre:before': { content: 'attr(data-prefix)', '@apply text-neutral-content/50 mr-4': {} } },

                    // Collapse
                    '.collapse': { '@apply w-full': {} },
                    '.collapse-title': { '@apply flex justify-between items-center w-full p-4 text-left font-medium text-base-content hover:bg-base-200 cursor-pointer': {} },
                    '.collapse-content': { '@apply p-4 pt-0': {} },

                    // Countdown
                    '.countdown': { '@apply inline-flex': {}, '& > span': { '@apply inline-flex flex-col p-2 bg-neutral text-neutral-content rounded-box': {} } },

                    // Diff
                    '.diff': { '@apply inline-grid overflow-hidden': {}, '& > *': { '@apply col-start-1 row-start-1': {} } },
                    '.diff ins': { '@apply bg-success/50': {} },
                    '.diff del': { '@apply bg-danger/50': {} },

                    // Divider
                    '.divider': { '@apply flex items-center w-full my-2': {}, '&:before, &:after': { '@apply flex-1 h-px bg-base-300': {} }, '&:not(:empty)': { '@apply gap-4': {} } },

                    // Drawer
                    '.drawer': { '@apply relative': {} },
                    '.drawer-toggle': { '@apply absolute top-0 left-0 h-full w-full opacity-0 cursor-pointer': {} },
                    '.drawer-content': { '@apply z-0': {} },
                    '.drawer-side': { '@apply absolute top-0 left-0 h-full transform -translate-x-full transition-transform duration-300 z-10': {} },
                    '.drawer-toggle:checked ~ .drawer-side': { '@apply translate-x-0': {} },

                    // Dropdown
                    '.dropdown': { '@apply relative inline-block': {} },
                    '.dropdown-content': { '@apply absolute z-10 hidden': {} },
                    '.dropdown:hover .dropdown-content, .dropdown:focus-within .dropdown-content': { '@apply block': {} },

                    // File Input
                    '.file-input': { '@apply w-full': {} },

                    // Footer
                    '.footer': { '@apply grid gap-8 p-10 bg-base-200 text-base-content': {}, '@screen md': { '@apply grid-cols-2': {} }, '@screen lg': { '@apply grid-cols-4': {} } },
                    '.footer-title': { '@apply font-bold uppercase opacity-60': {} },

                    // Forms
                    '.input': { '@apply block w-full rounded-md border-base-300 bg-base-100 shadow-sm focus:border-primary focus:ring focus:ring-primary focus:ring-opacity-50 transition': {} },
                    '.textarea': { '@apply block w-full rounded-md border-base-300 bg-base-100 shadow-sm focus:border-primary focus:ring focus:ring-primary focus:ring-opacity-50 transition': {} },
                    '.label': { '@apply block text-sm font-medium text-base-content mb-1': {} },
                    '.form-control': { '@apply w-full mb-4': {} },

                    // Hero
                    '.hero': { '@apply w-full flex flex-col justify-center items-center text-center p-8 bg-base-200': {}, '@screen md': { '@apply p-16': {} } },
                    '.hero-content': { '@apply max-w-3xl': {} },
                    
                    // Indicator
                    '.indicator': { '@apply relative': {} },
                    '.indicator-item': { '@apply absolute z-10': {} },
                    '.indicator-top': { '@apply top-0 -translate-y-1/2': {} },
                    '.indicator-bottom': { '@apply bottom-0 translate-y-1/2': {} },
                    '.indicator-start': { '@apply start-0 -translate-x-1/2': {} },
                    '.indicator-end': { '@apply end-0 translate-x-1/2': {} },

                    // Join
                    '.join': {
                        '@apply inline-flex items-center': {},
                        '& > *:not(:first-child)': { '@apply -ml-px': {} },
                        '& > *:first-child': { '@apply rounded-r-none': {} },
                        '& > *:last-child': { '@apply rounded-l-none': {} },
                        '& > *:not(:first-child):not(:last-child)': { '@apply rounded-none': {} }
                    },

                    // Kbd
                    '.kbd': { '@apply inline-flex items-center justify-center bg-base-300 border border-base-300/50 rounded-md px-2 py-1 text-sm font-mono': {} },

                    // Link
                    '.link': { '@apply text-primary underline-offset-4 hover:underline cursor-pointer': {} },

                    // Loading
                    '.loading': { '@apply animate-spin rounded-full border-4 border-solid border-t-transparent': {} },
                    '.loading-primary': { '@apply border-primary/20 border-t-primary': {} },
                    '.loading-sm': { '@apply h-6 w-6 border-2': {} },
                    '.loading-md': { '@apply h-8 w-8 border-4': {} },
                    '.loading-lg': { '@apply h-12 w-12 border-4': {} },
                    
                    // Mask
                    '.mask': {
                        '-webkit-mask-size': 'contain', 'mask-size': 'contain',
                        '-webkit-mask-repeat': 'no-repeat', 'mask-repeat': 'no-repeat',
                        '-webkit-mask-position': 'center', 'mask-position': 'center',
                    },
                    '.mask-squircle': { '-webkit-mask-image': 'url("data:image/svg+xml,%3csvg width=\'200\' height=\'200\' xmlns=\'http://www.w3.org/2000/svg\'%3e%3cpath d=\'M100 0C20 0 0 20 0 100s20 100 100 100 100-20 100-100S180 0 100 0Z\'/%3e%3c/svg%3e")', 'mask-image': 'url("data:image/svg+xml,%3csvg width=\'200\' height=\'200\' xmlns=\'http://www.w3.org/2000/svg\'%3e%3cpath d=\'M100 0C20 0 0 20 0 100s20 100 100 100 100-20 100-100S180 0 100 0Z\'/%3e%3c/svg%3e")' },
                    '.mask-heart': { '-webkit-mask-image': 'url("data:image/svg+xml,%3csvg width=\'200\' height=\'200\' xmlns=\'http://www.w3.org/2000/svg\'%3e%3cpath d=\'M100 185.3 24.3 118C-21.7 78.4 12.5 8.5 69.3 28.5c18.9-40.4 86.1-32.9 84.5 28.1.3 4.2-7.4 8.7-11.4 12.3L100 185.3z\'/%3e%3c/svg%3e")', 'mask-image': 'url("data:image/svg+xml,%3csvg width=\'200\' height=\'200\' xmlns=\'http://www.w3.org/2000/svg\'%3e%3cpath d=\'M100 185.3 24.3 118C-21.7 78.4 12.5 8.5 69.3 28.5c18.9-40.4 86.1-32.9 84.5 28.1.3 4.2-7.4 8.7-11.4 12.3L100 185.3z\'/%3e%3c/svg%3e")' },

                    // Menu
                    '.menu': { '@apply p-2 rounded-lg bg-base-100 shadow-lg border border-base-300 w-56': {} },
                    '.menu-item > a, .menu-item > button': { '@apply flex items-center w-full px-4 py-2 text-sm text-left rounded-md hover:bg-base-200 focus:bg-base-200 focus:outline-none transition-colors': {} },
                    '.menu-item.disabled > *': { '@apply cursor-not-allowed opacity-50': {} },
                    '.menu-title': { '@apply px-4 py-2 text-xs font-bold uppercase text-base-content/50': {} },
                    
                    // Modal
                    '.modal': { '@apply fixed inset-0 z-50 flex items-center justify-center p-4': {}, '&:not(.open)': { '@apply hidden': {} } },
                    '.modal-backdrop': { '@apply fixed inset-0 bg-black/30 backdrop-blur-sm': {}, animation: 'fadeIn 0.2s ease-out', },
                    '.modal-box': { '@apply relative bg-base-100 text-base-content rounded-xl shadow-xl w-full max-w-md z-10': {}, animation: 'fadeInScale 0.2s ease-out', },
                    '.modal-header': { '@apply p-6 pb-2 font-bold text-lg': {} },
                    '.modal-body': { '@apply p-6': {} },
                    '.modal-actions': { '@apply p-6 pt-2 flex justify-end gap-2': {} },

                    // Navbar
                    '.navbar': { '@apply flex flex-wrap items-center justify-between gap-2 p-4 bg-base-100 shadow': {}, '@screen md': { '@apply flex-nowrap': {} } },
                    '.navbar-start': { '@apply flex-1': {} },
                    '.navbar-center': { '@apply flex-none hidden': {}, '@screen lg': { '@apply flex': {} } },
                    '.navbar-end': { '@apply flex items-center gap-2': {} },

                    // Pagination
                    '.pagination': { '@apply flex items-center justify-center space-x-1': {} },

                    // Phone Mockup
                    '.mockup-phone': { '@apply relative mx-auto border-gray-800 bg-gray-800 border-[14px] rounded-[2.5rem] h-[600px] w-[300px] shadow-xl': {} },
                    '.mockup-phone .camera': { '@apply w-[56px] h-[8px] bg-gray-800 absolute -start-[17px] top-[72px] rounded-s-lg': {} },
                    '.mockup-phone .display': { '@apply rounded-[2rem] overflow-hidden w-full h-full bg-white': {} },

                    // Progress
                    '.progress': { '@apply w-full h-4 bg-base-300 rounded-full overflow-hidden relative appearance-none': {}, '&::-webkit-progress-bar': { '@apply bg-transparent': {} }, '&::-webkit-progress-value': { '@apply bg-primary': {} }, '&::-moz-progress-bar': { '@apply bg-primary': {} } },

                    // Prose
                    '.prose': { '@apply max-w-none': {} },
                    '.prose h1': { '@apply text-4xl mb-4 font-bold': {} },
                    '.prose h2': { '@apply text-3xl mb-3 font-bold': {} },
                    '.prose p': { '@apply my-4': {} },
                    '.prose a': { '@apply link': {} },
                    '.prose blockquote': { '@apply blockquote': {} },

                    // Radial Progress
                    '.radial-progress': {
                        '@apply relative inline-grid place-content-center rounded-full bg-transparent': {},
                        '--value': '0', '--size': '4rem', '--thickness': '0.5rem',
                        'width': 'var(--size)', 'height': 'var(--size)',
                        '&:before': {
                            'content': '""', 'position': 'absolute', 'inset': '0',
                            'background': 'radial-gradient(farthest-side, currentColor 98%, #0000) top/var(--thickness) var(--thickness) no-repeat, conic-gradient(currentColor calc(var(--value) * 1%), #0000 0)',
                            '-webkit-mask': 'radial-gradient(farthest-side, #0000 calc(99% - var(--thickness)), #000 calc(100% - var(--thickness)))',
                            'mask': 'radial-gradient(farthest-side, #0000 calc(99% - var(--thickness)), #000 calc(100% - var(--thickness)))',
                            '@apply rounded-full bg-base-300': {},
                        }
                    },

                    // Radio
                    '.radio': { '@apply h-5 w-5 border-base-300 text-primary focus:ring-primary': {} },

                    // Range
                    '.range': { '@apply w-full h-2 bg-base-300 rounded-full appearance-none': {}, '&::-webkit-slider-thumb': { '@apply h-6 w-6 bg-primary rounded-full appearance-none': {} } },
                    
                    // Rating
                    '.rating': {
                        '@apply inline-flex': {},
                        '& input': { '@apply h-8 w-8 appearance-none': {} },
                        '& input:checked ~ input': { '--tw-text-opacity': '0.2' },
                        '& input:before': { 'content': '"★"', '@apply text-3xl text-base-content/20 cursor-pointer': {} },
                        '& input:hover:before, & input:hover ~ input:before, &:hover input:checked:before': { '--tw-text-opacity': '1', 'color': 'orange' },
                        '& input:checked:before': { '--tw-text-opacity': '1', 'color': 'orange' }
                    },
                    
                    // Select
                    '.select': { '@apply w-full rounded-md border-base-300 bg-base-100 shadow-sm focus:border-primary focus:ring focus:ring-primary focus:ring-opacity-50 transition': {} },
                    
                    // Skeleton
                    '.skeleton': { '@apply animate-pulse bg-base-300 rounded-md': {} },

                    // Stack
                    '.stack': { '@apply inline-grid': {}, '& > *': { '@apply col-start-1 row-start-1': {} } },
                    
                    // Stat
                    '.stat': { '@apply inline-grid gap-1 p-4 bg-base-200 rounded-lg text-center': {} },
                    '.stat-title': { '@apply text-sm text-base-content/60': {} },
                    '.stat-value': { '@apply text-3xl font-extrabold': {}, '@screen lg': { '@apply text-4xl': {} } },
                    '.stat-desc': { '@apply text-sm text-base-content/60': {} },

                    // Steps
                    '.steps': { '@apply flex w-full': {}, 'counter-reset': 'step' },
                    '.step': {
                        '@apply flex-1 flex flex-col items-center justify-center text-center relative': {},
                        '&:before': { 'content': '""', '@apply h-0.5 w-full bg-base-300 absolute top-1/2 -translate-y-1/2 left-[-50%]': {} },
                        '&:first-child:before': { '@apply hidden': {} },
                    },
                    '.step-primary': { '&:after': { '@apply bg-primary text-white': {} }, '&:before': { '@apply bg-primary': {} } },
                    '.step:after': { 'content': 'counter(step)', 'counter-increment': 'step', '@apply h-6 w-6 rounded-full bg-base-300 text-base-content flex items-center justify-center z-10': {} },

                    // Swap
                    '.swap': { '@apply relative inline-grid select-none': {} },
                    '.swap > *': { '@apply col-start-1 row-start-1 transition-transform duration-300 ease-in-out': {} },
                    '.swap-on': { '@apply opacity-0 scale-75': {} },
                    '.swap-active .swap-on': { '@apply opacity-100 scale-100': {} },
                    '.swap-active .swap-off': { '@apply opacity-0 scale-125': {} },

                    // Table
                    '.table-container': { '@apply w-full overflow-x-auto': {} },
                    '.table': { '@apply w-full text-left': {}, 'min-width': '600px' },
                    '.table th': { '@apply p-4 font-semibold bg-base-200': {} },
                    '.table td': { '@apply p-4 border-b border-base-300': {} },

                    // Tabs
                    '.tabs': { '@apply flex border-b border-base-300': {} },
                    '.tab': { '@apply px-6 py-3 font-medium text-base-content/70 cursor-pointer border-b-2 border-transparent hover:text-base-content': {} },
                    '.tab-active': { '@apply border-primary text-primary': {} },

                    // Theme Controller
                    '.theme-controller': { '@apply cursor-pointer': {} },
                    
                    // Timeline
                    '.timeline': { '@apply relative': {} },
                    '.timeline-item': { '@apply relative pl-8 pb-8': {} },
                    '.timeline-item:before': { 'content': '""', '@apply absolute left-3 top-1 w-0.5 h-full bg-base-300': {} },
                    '.timeline-item:last-child:before': { '@apply h-0': {} },
                    '.timeline-marker': { '@apply absolute left-0 top-0 w-6 h-6 rounded-full bg-base-300 border-4 border-base-100': {} },
                    '.timeline-marker-primary': { '@apply bg-primary': {} },

                    // Toast
                    '.toast': { '@apply fixed flex flex-col gap-2 z-50': {} },
                    '.toast-top': { '@apply top-4': {} },
                    '.toast-bottom': { '@apply bottom-4': {} },
                    '.toast-center': { '@apply left-1/2 -translate-x-1/2': {} },
                    '.toast-start': { '@apply left-4': {} },
                    '.toast-end': { '@apply right-4': {} },
                    
                    // Toggle
                    '.toggle': {
                        '@apply h-6 w-11 rounded-full bg-base-300 appearance-none transition-colors duration-300': {},
                        '&:checked': { '@apply bg-primary': {} },
                        '&:after': { 'content': '""', '@apply h-5 w-5 rounded-full bg-white shadow-md transform transition-transform duration-300 scale-110 -translate-x-1': {} },
                        '&:checked:after': { '@apply translate-x-5': {} }
                    },

                    // Tooltip
                    '.tooltip': {
                        '@apply relative inline-block': {},
                        '&:before': { 'content': 'attr(data-tip)', '@apply absolute z-10 hidden whitespace-nowrap bg-neutral text-white px-2 py-1 rounded-md text-sm': {} },
                        '&:hover:before': { '@apply block': {} },
                        '&.tooltip-top:before': { '@apply bottom-full left-1/2 -translate-x-1/2 mb-2': {} },
                        '&.tooltip-bottom:before': { '@apply top-full left-1/2 -translate-x-1/2 mt-2': {} },
                        '&.tooltip-left:before': { '@apply right-full top-1/2 -translate-y-1/2 mr-2': {} },
                        '&.tooltip-right:before': { '@apply left-full top-1/2 -translate-y-1/2 ml-2': {} },
                    },

                    // Window Mockup
                    '.mockup-window': { '@apply rounded-lg border bg-base-100 border-base-300': {} },
                    '.mockup-window-toolbar': { '@apply bg-base-200 px-4 py-2 flex items-center gap-2': {} },
                }),
                extend: {
                    colors: {
                        primary: 'var(--color-primary)',
                        secondary: 'var(--color-secondary)',
                        accent: 'var(--color-accent)',
                        neutral: 'var(--color-neutral)',
                        'neutral-content': 'var(--color-neutral-content)',
                        success: 'var(--color-success)',
                        warning: 'var(--color-warning)',
                        danger: 'var(--color-danger)',
                        'base-100': 'var(--color-base-100)',
                        'base-200': 'var(--color-base-200)',
                        'base-300': 'var(--color-base-300)',
                        'base-content': 'var(--color-base-content)',
                    },
                    borderRadius: {
                        sm: 'var(--radius-sm)',
                        md: 'var(--radius-md)',
                        lg: 'var(--radius-lg)',
                        xl: 'var(--radius-xl)',
                        full: 'var(--radius-full)',
                        box: 'var(--radius-box)',
                    },
                },
            },
        };
    }
);