tailwindcss

Use Vitest with @vue/test-utils to mount the component and assert that rendered elements contain expected Tailwind classes via wrapper.find() and classes(). Write these tests before implementing the component styling, following a TDD workflow.

Extend the theme.colors object in tailwind.config.js with named color tokens such as jarvis.primary and jarvis.bg.panel. Reference them in templates as utilities like bg-jarvis-primary instead of hardcoding hex values.

Extract repeated utility patterns into @apply directives inside a components layer only when the same combination appears three or more times. For single-use styles, compose utilities directly in the template to avoid unnecessary CSS abstraction.

Yes, set darkMode to 'class' in the config and define dark colors directly in the theme. For interfaces that are always dark, avoid writing light/dark variant pairs like bg-white dark:bg-gray-900 since the light styles are never used.

Oversized bundles usually come from overly broad content paths that include tests or unused files, or from defining unused variant extensions. Restrict content globs to actual source directories and rely on JIT mode to generate only used utilities.