ZanzyTHEbar/index.css

## index.css
@layer base {
    /* This style is REQUIRED due to how kobalte handles focus-visible state */
    * {
        @apply outline-none [&[data-focus-visible]]:outline-white;
    }

    :root {
        --background: 0 0% 100%;
        --foreground: 240 10% 3.9%;

        --muted: 240 4.8% 95.9%;
        --muted-foreground: 240 3.8% 46.1%;

        --popover: 0 0% 100%;
        --popover-foreground: 240 10% 3.9%;

        --border: 240 5.9% 90%;
        --input: 240 5.9% 90%;

        --card: 0 0% 100%;
        --card-foreground: 240 10% 3.9%;

        --primary: 240 5.9% 10%;
        --primary-foreground: 0 0% 98%;

        --secondary: 240 4.8% 95.9%;
        --secondary-foreground: 240 5.9% 10%;

        --accent: 240 4.8% 95.9%;
        --accent-foreground: 240 5.9% 10%;

        --destructive: 0 84.2% 60.2%;
        --destructive-foreground: 0 0% 98%;

        --info: 204 94% 94%;
        --info-foreground: 199 89% 48%;

        --success: 149 80% 90%;
        --success-foreground: 160 84% 39%;

        --warning: 48 96% 89%;
        --warning-foreground: 25 95% 53%;

        --error: 0 93% 94%;
        --error-foreground: 0 84% 60%;

        --ring: 240 5.9% 10%;

        --radius: 0.5rem;
    }

    [data-kb-theme='dark'] {
        --background: 240 10% 3.9%;
        --foreground: 0 0% 98%;

        --muted: 240 3.7% 15.9%;
        --muted-foreground: 240 5% 64.9%;

        --accent: 240 3.7% 15.9%;
        --accent-foreground: 0 0% 98%;

        --popover: 240 10% 3.9%;
        --popover-foreground: 0 0% 98%;

        --border: 240 3.7% 15.9%;
        --input: 240 3.7% 15.9%;

        --card: 240 10% 3.9%;
        --card-foreground: 0 0% 98%;

        --primary: 0 0% 98%;
        --primary-foreground: 240 5.9% 10%;

        --secondary: 240 3.7% 15.9%;
        --secondary-foreground: 0 0% 98%;

        --destructive: 0 62.8% 30.6%;
        --destructive-foreground: 0 0% 98%;

        --info: 204 94% 94%;
        --info-foreground: 199 89% 48%;

        --success: 149 80% 90%;
        --success-foreground: 160 84% 39%;

        --warning: 48 96% 89%;
        --warning-foreground: 25 95% 53%;

        --error: 0 93% 94%;
        --error-foreground: 0 84% 60%;

        --ring: 240 4.9% 83.9%;

        --radius: 0.5rem;
    }
}

@layer base {
    * {
        @apply border-border;
    }
    body {
        @apply bg-background text-foreground;
        font-feature-settings:
            'rlig' 1,
            'calt' 1;
    }
}

@media (max-width: 640px) {
    .container {
        @apply px-4;
    }
}

## postcss.config.cjs
// eslint-disable-next-line no-undef
module.exports = {
    purge: {
        options: {
            safelist: [/data-theme$/, './index.html', './src/**/*.{js,ts,jsx,tsx}'],
        },
    },
    plugins: {
        'postcss-import': {},
        tailwindcss: {},
        autoprefixer: {},
    },
}

## tailwind.config.ts
//* https://github.com/praveenjuge/tailwindcss-brand-colors/blob/master/index.js

import kobalte from '@kobalte/tailwindcss'
import forms from '@tailwindcss/forms'
import typography from '@tailwindcss/typography'
import daisyui from 'daisyui'
import defaultTheme from 'tailwindcss/defaultTheme'
import brandColors from 'tailwindcss-brand-colors'
import debugScreens from 'tailwindcss-debug-screens'
import uiPreset from './ui.preset'
import type { Config } from 'tailwindcss'

const generateSizeClass = (upToSize: number, startAt = 80) => {
    const classes = {}
    for (let i = startAt; i < upToSize / 4; i += 4) {
        classes[i] = `${(i * 4) / 16}rem`
    }

    return classes
}

const labelsClasses = ['indigo', 'gray', 'green', 'blue', 'red', 'purple']

// add class='dark' to <html> to enable dark mode - https://tailwindcss.com/docs/dark-mode

const config = {
    plugins: [kobalte, forms, typography, daisyui, brandColors, debugScreens, uiPreset],
    content: ['./src/**/*.{js,ts,jsx,tsx}'],
    purge: {
        //Because we made a dynamic class with the label we need to add those classes
        // to the safe list so the purge does not remove that
        safelist: [
            ...labelsClasses.map((lbl) => `bg-${lbl}-500`),
            ...labelsClasses.map((lbl) => `bg-${lbl}-200`),
            ...labelsClasses.map((lbl) => `text-${lbl}-400`),
        ],
    },
    theme: {
        debugScreens: {
            position: ['bottom', 'left'],
        },
        screens: {
            xxs: '300px',
            xs: '475px',
            ...defaultTheme.screens,
        },
        extend: {
            width: generateSizeClass(1024),
            minHeight: generateSizeClass(1024, 0),
            maxHeight: generateSizeClass(1024, 0),
            maxWidth: generateSizeClass(1024, 0),
            minWidth: generateSizeClass(1024, 0),
            borderWidth: {
                1: '1px',
            },
            fontFamily: {
                sans: ['Roboto', 'sans-serif'],
            },
            gridTemplateColumns: {
                '1/5': '1fr 5fr',
            },
        },
    },
    // daisyUI config (optional - here are the default values)
    daisyui: {
        themes: true, // false: only light + dark | true: all themes | array: specific themes like this ["light", "dark", "cupcake"]
        darkTheme: 'dark', // name of one of the included themes for dark mode
        base: true, // applies background color and foreground color for root element by default
        styled: true, // include daisyUI colors and design decisions for all components
        utils: true, // adds responsive and modifier utility classes
        prefix: '', // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors)
        logs: true, // Shows info about daisyUI version and used config in the console when building your CSS
        themeRoot: '*', // The element that receives theme color CSS variables
    },
} satisfies Config

export default config

## ui.config.json
{
    "tsx": true,
    "componentDir": "./src/components/ui",
    "tailwind": {
        "config": "tailwind.config.ts",
        "css": "src/styles/imports.css"
    },
    "aliases": {
        "path": "@src"
    }
}

## ui.preset.js
// eslint-disable-next-line @typescript-eslint/no-var-requires, no-undef
const { fontFamily } = require('tailwindcss/defaultTheme')

/**@type {import("tailwindcss").Config} */
// eslint-disable-next-line no-undef
module.exports = {
    darkMode: ['class', '[data-kb-theme="dark"]'],
    content: ['./src/**/*.{js,jsx,md,mdx,ts,tsx}'],
    theme: {
        container: {
            center: true,
            padding: '2rem',
            screens: {
                '2xl': '1400px',
            },
        },
        extend: {
            colors: {
                border: 'hsl(var(--border))',
                input: 'hsl(var(--input))',
                ring: 'hsl(var(--ring))',
                background: 'hsl(var(--background))',
                foreground: 'hsl(var(--foreground))',
                primary: {
                    DEFAULT: 'hsl(var(--primary))',
                    foreground: 'hsl(var(--primary-foreground))',
                },
                secondary: {
                    DEFAULT: 'hsl(var(--secondary))',
                    foreground: 'hsl(var(--secondary-foreground))',
                },
                destructive: {
                    DEFAULT: 'hsl(var(--destructive))',
                    foreground: 'hsl(var(--destructive-foreground))',
                },
                info: {
                    DEFAULT: 'hsl(var(--info))',
                    foreground: 'hsl(var(--info-foreground))',
                },
                success: {
                    DEFAULT: 'hsl(var(--success))',
                    foreground: 'hsl(var(--success-foreground))',
                },
                warning: {
                    DEFAULT: 'hsl(var(--warning))',
                    foreground: 'hsl(var(--warning-foreground))',
                },
                error: {
                    DEFAULT: 'hsl(var(--error))',
                    foreground: 'hsl(var(--error-foreground))',
                },
                muted: {
                    DEFAULT: 'hsl(var(--muted))',
                    foreground: 'hsl(var(--muted-foreground))',
                },
                accent: {
                    DEFAULT: 'hsl(var(--accent))',
                    foreground: 'hsl(var(--accent-foreground))',
                },
                popover: {
                    DEFAULT: 'hsl(var(--popover))',
                    foreground: 'hsl(var(--popover-foreground))',
                },
                card: {
                    DEFAULT: 'hsl(var(--card))',
                    foreground: 'hsl(var(--card-foreground))',
                },
            },
            borderRadius: {
                lg: 'var(--radius)',
                md: 'calc(var(--radius) - 2px)',
                sm: 'calc(var(--radius) - 4px)',
            },
            fontFamily: {
                sans: ['Inter', ...fontFamily.sans],
            },
            keyframes: {
                'accordion-down': {
                    from: { height: 0 },
                    to: { height: 'var(--kb-accordion-content-height)' },
                },
                'accordion-up': {
                    from: { height: 'var(--kb-accordion-content-height)' },
                    to: { height: 0 },
                },
                'content-show': {
                    from: { opacity: 0, transform: 'scale(0.96)' },
                    to: { opacity: 1, transform: 'scale(1)' },
                },
                'content-hide': {
                    from: { opacity: 1, transform: 'scale(1)' },
                    to: { opacity: 0, transform: 'scale(0.96)' },
                },
            },
            animation: {
                'accordion-down': 'accordion-down 0.2s ease-out',
                'accordion-up': 'accordion-up 0.2s ease-out',
                'content-show': 'content-show 0.2s ease-out',
                'content-hide': 'content-hide 0.2s ease-out',
            },
        },
    },
    // eslint-disable-next-line no-undef
    plugins: [require('tailwindcss-animate')],
}
	@layer base {
	/* This style is REQUIRED due to how kobalte handles focus-visible state */
	* {
	@apply outline-none [&[data-focus-visible]]:outline-white;
	}

	:root {
	--background: 0 0% 100%;
	--foreground: 240 10% 3.9%;

	--muted: 240 4.8% 95.9%;
	--muted-foreground: 240 3.8% 46.1%;

	--popover: 0 0% 100%;
	--popover-foreground: 240 10% 3.9%;

	--border: 240 5.9% 90%;
	--input: 240 5.9% 90%;

	--card: 0 0% 100%;
	--card-foreground: 240 10% 3.9%;

	--primary: 240 5.9% 10%;
	--primary-foreground: 0 0% 98%;

	--secondary: 240 4.8% 95.9%;
	--secondary-foreground: 240 5.9% 10%;

	--accent: 240 4.8% 95.9%;
	--accent-foreground: 240 5.9% 10%;

	--destructive: 0 84.2% 60.2%;
	--destructive-foreground: 0 0% 98%;

	--info: 204 94% 94%;
	--info-foreground: 199 89% 48%;

	--success: 149 80% 90%;
	--success-foreground: 160 84% 39%;

	--warning: 48 96% 89%;
	--warning-foreground: 25 95% 53%;

	--error: 0 93% 94%;
	--error-foreground: 0 84% 60%;

	--ring: 240 5.9% 10%;

	--radius: 0.5rem;
	}

	[data-kb-theme='dark'] {
	--background: 240 10% 3.9%;
	--foreground: 0 0% 98%;

	--muted: 240 3.7% 15.9%;
	--muted-foreground: 240 5% 64.9%;

	--accent: 240 3.7% 15.9%;
	--accent-foreground: 0 0% 98%;

	--popover: 240 10% 3.9%;
	--popover-foreground: 0 0% 98%;

	--border: 240 3.7% 15.9%;
	--input: 240 3.7% 15.9%;

	--card: 240 10% 3.9%;
	--card-foreground: 0 0% 98%;

	--primary: 0 0% 98%;
	--primary-foreground: 240 5.9% 10%;

	--secondary: 240 3.7% 15.9%;
	--secondary-foreground: 0 0% 98%;

	--destructive: 0 62.8% 30.6%;
	--destructive-foreground: 0 0% 98%;

	--info: 204 94% 94%;
	--info-foreground: 199 89% 48%;

	--success: 149 80% 90%;
	--success-foreground: 160 84% 39%;

	--warning: 48 96% 89%;
	--warning-foreground: 25 95% 53%;

	--error: 0 93% 94%;
	--error-foreground: 0 84% 60%;

	--ring: 240 4.9% 83.9%;

	--radius: 0.5rem;
	}
	}

	@layer base {
	* {
	@apply border-border;
	}
	body {
	@apply bg-background text-foreground;
	font-feature-settings:
	'rlig' 1,
	'calt' 1;
	}
	}

	@media (max-width: 640px) {
	.container {
	@apply px-4;
	}
	}
	// eslint-disable-next-line no-undef
	module.exports = {
	purge: {
	options: {
	safelist: [/data-theme$/, './index.html', './src/*/.{js,ts,jsx,tsx}'],
	},
	},
	plugins: {
	'postcss-import': {},
	tailwindcss: {},
	autoprefixer: {},
	},
	}
	//* https://github.com/praveenjuge/tailwindcss-brand-colors/blob/master/index.js

	import kobalte from '@kobalte/tailwindcss'
	import forms from '@tailwindcss/forms'
	import typography from '@tailwindcss/typography'
	import daisyui from 'daisyui'
	import defaultTheme from 'tailwindcss/defaultTheme'
	import brandColors from 'tailwindcss-brand-colors'
	import debugScreens from 'tailwindcss-debug-screens'
	import uiPreset from './ui.preset'
	import type { Config } from 'tailwindcss'

	const generateSizeClass = (upToSize: number, startAt = 80) => {
	const classes = {}
	for (let i = startAt; i < upToSize / 4; i += 4) {
	classes[i] = `${(i * 4) / 16}rem`
	}

	return classes
	}

	const labelsClasses = ['indigo', 'gray', 'green', 'blue', 'red', 'purple']

	// add class='dark' to <html> to enable dark mode - https://tailwindcss.com/docs/dark-mode

	const config = {
	plugins: [kobalte, forms, typography, daisyui, brandColors, debugScreens, uiPreset],
	content: ['./src/*/.{js,ts,jsx,tsx}'],
	purge: {
	//Because we made a dynamic class with the label we need to add those classes
	// to the safe list so the purge does not remove that
	safelist: [
	...labelsClasses.map((lbl) => `bg-${lbl}-500`),
	...labelsClasses.map((lbl) => `bg-${lbl}-200`),
	...labelsClasses.map((lbl) => `text-${lbl}-400`),
	],
	},
	theme: {
	debugScreens: {
	position: ['bottom', 'left'],
	},
	screens: {
	xxs: '300px',
	xs: '475px',
	...defaultTheme.screens,
	},
	extend: {
	width: generateSizeClass(1024),
	minHeight: generateSizeClass(1024, 0),
	maxHeight: generateSizeClass(1024, 0),
	maxWidth: generateSizeClass(1024, 0),
	minWidth: generateSizeClass(1024, 0),
	borderWidth: {
	1: '1px',
	},
	fontFamily: {
	sans: ['Roboto', 'sans-serif'],
	},
	gridTemplateColumns: {
	'1/5': '1fr 5fr',
	},
	},
	},
	// daisyUI config (optional - here are the default values)
	daisyui: {
	themes: true, // false: only light + dark \| true: all themes \| array: specific themes like this ["light", "dark", "cupcake"]
	darkTheme: 'dark', // name of one of the included themes for dark mode
	base: true, // applies background color and foreground color for root element by default
	styled: true, // include daisyUI colors and design decisions for all components
	utils: true, // adds responsive and modifier utility classes
	prefix: '', // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors)
	logs: true, // Shows info about daisyUI version and used config in the console when building your CSS
	themeRoot: '*', // The element that receives theme color CSS variables
	},
	} satisfies Config

	export default config
	{
	"tsx": true,
	"componentDir": "./src/components/ui",
	"tailwind": {
	"config": "tailwind.config.ts",
	"css": "src/styles/imports.css"
	},
	"aliases": {
	"path": "@src"
	}
	}
	// eslint-disable-next-line @typescript-eslint/no-var-requires, no-undef
	const { fontFamily } = require('tailwindcss/defaultTheme')

	/*@type {import("tailwindcss").Config} /
	// eslint-disable-next-line no-undef
	module.exports = {
	darkMode: ['class', '[data-kb-theme="dark"]'],
	content: ['./src/*/.{js,jsx,md,mdx,ts,tsx}'],
	theme: {
	container: {
	center: true,
	padding: '2rem',
	screens: {
	'2xl': '1400px',
	},
	},
	extend: {
	colors: {
	border: 'hsl(var(--border))',
	input: 'hsl(var(--input))',
	ring: 'hsl(var(--ring))',
	background: 'hsl(var(--background))',
	foreground: 'hsl(var(--foreground))',
	primary: {
	DEFAULT: 'hsl(var(--primary))',
	foreground: 'hsl(var(--primary-foreground))',
	},
	secondary: {
	DEFAULT: 'hsl(var(--secondary))',
	foreground: 'hsl(var(--secondary-foreground))',
	},
	destructive: {
	DEFAULT: 'hsl(var(--destructive))',
	foreground: 'hsl(var(--destructive-foreground))',
	},
	info: {
	DEFAULT: 'hsl(var(--info))',
	foreground: 'hsl(var(--info-foreground))',
	},
	success: {
	DEFAULT: 'hsl(var(--success))',
	foreground: 'hsl(var(--success-foreground))',
	},
	warning: {
	DEFAULT: 'hsl(var(--warning))',
	foreground: 'hsl(var(--warning-foreground))',
	},
	error: {
	DEFAULT: 'hsl(var(--error))',
	foreground: 'hsl(var(--error-foreground))',
	},
	muted: {
	DEFAULT: 'hsl(var(--muted))',
	foreground: 'hsl(var(--muted-foreground))',
	},
	accent: {
	DEFAULT: 'hsl(var(--accent))',
	foreground: 'hsl(var(--accent-foreground))',
	},
	popover: {
	DEFAULT: 'hsl(var(--popover))',
	foreground: 'hsl(var(--popover-foreground))',
	},
	card: {
	DEFAULT: 'hsl(var(--card))',
	foreground: 'hsl(var(--card-foreground))',
	},
	},
	borderRadius: {
	lg: 'var(--radius)',
	md: 'calc(var(--radius) - 2px)',
	sm: 'calc(var(--radius) - 4px)',
	},
	fontFamily: {
	sans: ['Inter', ...fontFamily.sans],
	},
	keyframes: {
	'accordion-down': {
	from: { height: 0 },
	to: { height: 'var(--kb-accordion-content-height)' },
	},
	'accordion-up': {
	from: { height: 'var(--kb-accordion-content-height)' },
	to: { height: 0 },
	},
	'content-show': {
	from: { opacity: 0, transform: 'scale(0.96)' },
	to: { opacity: 1, transform: 'scale(1)' },
	},
	'content-hide': {
	from: { opacity: 1, transform: 'scale(1)' },
	to: { opacity: 0, transform: 'scale(0.96)' },
	},
	},
	animation: {
	'accordion-down': 'accordion-down 0.2s ease-out',
	'accordion-up': 'accordion-up 0.2s ease-out',
	'content-show': 'content-show 0.2s ease-out',
	'content-hide': 'content-hide 0.2s ease-out',
	},
	},
	},
	// eslint-disable-next-line no-undef
	plugins: [require('tailwindcss-animate')],
	}