YouBothAgent▾
You — Business rules and flows you own. Read these yourself.
Both — Know the idea; your agent follows the details.
Agent — Conventions and references your agent follows. Look up as needed.
Introduction▾
Tutorials▾
System Architecture▾
Module Convention▾
Scalar Convention▾
CSS Styling Guidelines
Comprehensive styling guidelines for Akan.js components using TailwindCSS and akanjs/ui semantic tokens ensuring consistency, maintainability and proper theming across applications.
Core Principles
Follow these fundamental principles for consistent styling:
principleDescription
Utility-First
Use Tailwind's utility classes instead of custom CSS
Component Composition
Design for composition with className overrides
Theme Consistency
Use the semantic design-token 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:
Component Best Practices
Forward className Prop
Semantic Color System
primarycolordefault theme-defined
Primary brand color
secondarycolordefault theme-defined
Secondary brand color
base-100colordefault theme-defined
Base background color
Responsive Design
State Variants
Consistent Spacing