스타일링 기반

Akan은 Tailwind CSS와 DaisyUI를 기본 스타일링 기반으로 사용합니다. Tailwind는 레이아웃, 간격, 반응형 동작, 일회성 조합을 빠르게 작성할 수 있는 유틸리티 언어를 제공합니다. DaisyUI는 의미 기반 컴포넌트 이름과 테마 토큰을 더해, 앱 화면이 모든 색상을 하드코딩하지 않고 primary, base, warning, error 같은 의도를 표현할 수 있게 합니다.

구조와 레이아웃에는 Tailwind를 사용하고, 테마를 인식하는 컴포넌트 표현과 의미 기반 색상에는 DaisyUI를 사용하세요. Tailwind CSS / DaisyUI

레이어가 함께 동작하는 방식

styles.css: Tailwind, Akan UI style, DaisyUI, 앱 테마 토큰을 import합니다.

Theme tokens: 브랜드 결정을 primary, base, warning, error 같은 재사용 가능한 이름으로 바꿉니다.

Components: btn, input, card, alert, Tailwind utility class를 통해 그 이름들을 사용합니다.

Screens: raw color와 spacing rule을 반복하지 않고 일관된 비즈니스 화면을 조립합니다.

디자인 시스템을 먼저 설계

모든 페이지를 처음부터 따로 디자인하지 마세요. 앱의 기본 컴포넌트 스타일을 먼저 정의하고, 페이지는 그 컴포넌트를 조립하도록 만드세요. 버튼, input, card, form, alert, tab, modal, navigation은 같은 간격, radius, 텍스트 색, border, 상태 동작을 공유해야 합니다.

button, input, card, form, alert, tab, modal, navigation은 공유 클래스를 사용해야 합니다.

비즈니스 페이지는 색상과 간격을 다시 정의하기보다 디자인 시스템을 조립해야 합니다.

가져온 모듈도 같은 Tailwind와 DaisyUI 토큰을 사용하면 일관되게 보입니다.

테마 시스템 선언 방식

테마와 색상은 앱 스타일 진입점에서 선언합니다. 앱은 Tailwind와 Akan UI 스타일을 import하고 DaisyUI를 활성화한 뒤, 하나 이상의 DaisyUI theme을 선언합니다. 각 theme은 의미 기반 이름을 실제 색상에 매핑합니다.

apps/myapp/page/akanjs/styles.css

DaisyUI는 여러 theme block을 지원하므로, 하나의 앱에서도 같은 컴포넌트 클래스를 유지한 채 light, dark, brand, admin, demo 테마를 선언할 수 있습니다. DaisyUI 테마 문서

폰트 선언 방식

폰트는 루트 레이아웃에서 선언합니다. font name, file path, weight, optional default 값을 가진 fonts 배열을 export하면, Akan은 이를 Tailwind와 유사한 클래스처럼 노출합니다. 컴포넌트는 font-pretendard, font-lemonmilk 같은 className으로 폰트를 사용할 수 있습니다.

apps/myapp/page/akanjs/_layout.tsx

Using font classes