피드로 돌아가기
Dev.toFrontend
원문 읽기
Tailwind v4 CSS-first 설정을 통한 Filament 테마 시스템 최적화
Understanding Filament themes in v4/v5: from Colors to custom CSS
AI 요약
Context
Filament v3 및 Tailwind v3 기반의 기존 설정 방식은 JS 설정 파일 기반의 복잡한 구성과 수동 배선 과정이 필요함. 특히 Panel별 테마 분리 시 Vite 설정과 Provider 등록을 수동으로 처리해야 하는 운영 오버헤드가 존재함.
Technical Solution
- Tailwind v4의 CSS-first configuration 도입을 통한 tailwind.config.js 의존성 제거
- @source 디렉티브를 활용한 Panel 단위의 스코핑 처리 및 불필요한 CSS Purge 방지
- make:filament-theme 명령어를 통한 vite.config.js 및 Panel Provider 자동 배선으로 휴먼 에러 차단
- fi- 접두사의 Hook Class 기반 스타일링을 통한 내부 구현 디테일 의존성 제거 및 업그레이드 안정성 확보
- @layer base 블록 내 CSS Variables 정의를 통한 라이트/다크 모드 대응 구조 설계
실천 포인트
- 커스텀 Blade/Livewire 컴포넌트 사용 시 @source 경로에 해당 디렉토리를 명시적으로 추가했는지 확인 - 내부 구현 클래스가 아닌 fi- 접두사가 붙은 Hook Class만을 타겟팅하여 스타일 정의 - 단순 브랜드 컬러 변경은 테마 생성 없이 Panel Provider의 colors() 메서드로 처리 - vendor 디렉토리 수정 대신 커스텀 theme.css 파일 내에서 오버라이드 수행