image
Akan.js
한국어
문서 (V1)
image
Akan.js
현재 Akan.js v1 문서를 보고 있습니다.최신 v2 문서 보기
문서 (V1)
MIT 라이선스 하에 배포되었습니다.
Akan.js 공식 컨설팅 서비스Akansoft
Copyright © 2026 Akan.js 모든 권리 보유.
시스템 관리자bassman
소개
• 시작하기
• 작동원리
• 실습하기
튜토리얼
• 상세하게 보여주기
• 상태 변경하기
• 서비스 내에서 상호작용
• 슬라이스로 표시하기
• 페이지를 통한 UX
• 스칼라 사용하기
• 인사이트 사용하기
• 데이터 연결하기
시스템 아키텍처
• 개요
• 백엔드 시스템
• 프론트엔드 시스템
• 환경변수
• 기본 스칼라 타입
• 도메인 기반 모듈
• CSS
모듈 규칙
• 개요
• model.constant.ts
• model.dictionary.ts
• model.document.ts
• model.service.ts
• model.signal.ts
• model.store.ts
• Model.Template.tsx
• Model.Unit.tsx
• Model.Util.tsx
• Model.View.tsx
• Model.Zone.tsx
스칼라 규칙
• 개요
• scalar.constant.ts
• scalar.dictionary.ts
• scalar.document.ts
소개
• 시작하기
• 작동원리
• 실습하기
튜토리얼
• 상세하게 보여주기
• 상태 변경하기
• 서비스 내에서 상호작용
• 슬라이스로 표시하기
• 페이지를 통한 UX
• 스칼라 사용하기
• 인사이트 사용하기
• 데이터 연결하기
시스템 아키텍처
• 개요
• 백엔드 시스템
• 프론트엔드 시스템
• 환경변수
• 기본 스칼라 타입
• 도메인 기반 모듈
• CSS
모듈 규칙
• 개요
• model.constant.ts
• model.dictionary.ts
• model.document.ts
• model.service.ts
• model.signal.ts
• model.store.ts
• Model.Template.tsx
• Model.Unit.tsx
• Model.Util.tsx
• Model.View.tsx
• Model.Zone.tsx
스칼라 규칙
• 개요
• scalar.constant.ts
• scalar.dictionary.ts
• scalar.document.ts
이전
도메인 기반 모듈
다음
개요

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-FirstUse Tailwind's utility classes instead of custom CSS
Component CompositionDesign for composition with className overrides
Theme ConsistencyUse DaisyUI's semantic color system
Responsive DesignMobile-first layouts with breakpoint prefixes
AccessibilityEnsure 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
옵션타입기본값설명예제
primarycolortheme-definedPrimary brand color
secondarycolortheme-definedSecondary brand color
base-100colortheme-definedBase background color
primary:color:theme-defined

Primary brand color

secondary:color:theme-defined

Secondary brand color

base-100:color:theme-defined

Base background color

Responsive Design
State Variants
Consistent Spacing

Additional Resources

  • TailwindCSS Documentation
  • DaisyUI Documentation
  • Tailwind CSS Cheat Sheet
CSS Styling Guidelines
Core Principles
Class Management (clsx)
Component Best Practices
Additional Resources