styling-patterns

What problem does it solve?

This Skill provides a comprehensive guide to implementing a consistent and visually appealing design system using DaisyUI v5 and Tailwind CSS. It addresses common styling challenges by defining clear rules for background hierarchy, borders, text sizes, opacity, semantic colors, and spacing, ensuring a cohesive user interface and reducing design inconsistencies.

Core Features & Use Cases

• Background Hierarchy: Establishes a clear visual depth using bg-base-200 for pages, bg-base-100 for cards, and bg-base-200 for nested elements, ensuring proper contrast.
• Semantic Colors: Guides on using DaisyUI's semantic colors (primary, error, success, warning, info) for buttons, text, and backgrounds, aligning UI elements with their functional meaning.
• Text & Opacity Rules: Defines a consistent text size scale and strict rules for applying opacity (only 60, 70, 80) to metadata and secondary text, preserving readability and contrast.
• Shadow & Spacing System: Provides a standardized scale for shadows (shadow-md, shadow-lg) and spacing (gap-2, p-4), ensuring visual harmony and responsiveness.
• Use Case: Design a dashboard with multiple cards, each containing titles, body text, and metadata. This Skill provides the exact class names and rules to apply to each element, ensuring the dashboard has a professional, consistent look and feel, with clear visual hierarchy and readability.

Quick Start

For page backgrounds, use bg-base-200. For cards, use bg-base-100. Apply border-base-300 for most borders. Use text-3xl font-bold for page titles, text-base for body text, and text-sm opacity-60 for metadata. For primary actions, use btn btn-primary. For errors, use text-error. Apply shadow-md for default card shadows.