styling

What problem does it solve?

Inconsistent styling and bloated DOM arise when building UI components, making maintenance costly and error-prone. This guide provides concise rules to apply styles with minimal wrappers, consistent utility usage, and themed design.

Core Features & Use Cases

• Minimize wrapper elements by applying classes to the target element when semantically appropriate.
• Tailwind best practices:
  • Use cn() utility from $lib/utils to compose classes conditionally
  • Prefer utility classes over custom CSS
  • Use tailwind-variants for component variants
  • Follow the background/foreground convention for colors
  • Leverage CSS variables for theme consistency
• Use Case: When building a reusable button component, apply styling directly to the button element and use utility classes to adjust variants.

Quick Start

Apply these guidelines when styling components to ensure accessible, responsive, and consistent UI.