CSS Styling Guidelines

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	설명	예제
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:

Component Best Practices

Forward className Prop

Semantic Color System

옵션	타입	기본값	설명	예제
primary	color	theme-defined	Primary brand color
secondary	color	theme-defined	Secondary brand color
base-100	color	theme-defined	Base background color

primary:color:theme-defined

Primary brand color

secondary:color:theme-defined

Secondary brand color

Additional Resources

CSS Styling Guidelines

Core Principles

Class Management (clsx)

Component Best Practices

Additional Resources