Comprehensive styling guidelines for Akan.js components using TailwindCSS and DaisyUI ensuring consistency, maintainability and proper theming across applications.
Core Principles
Follow these fundamental principles for consistent styling:
principle
Description
Example
Utility-First
Use Tailwind's utility classes instead of custom CSS
Component Composition
Design for composition with className overrides
Theme Consistency
Use DaisyUI's semantic color system
Responsive Design
Mobile-first layouts with breakpoint prefixes
Accessibility
Ensure proper contrast and focus states
Utility-First
Use Tailwind's utility classes instead of custom CSS
Component Composition
Design for composition with className overrides
Theme Consistency
Use DaisyUI's semantic color system
Responsive Design
Mobile-first layouts with breakpoint prefixes
Accessibility
Ensure proper contrast and focus states
Class Management (clsx)
Use clsx for conditional class handling and composition:
