태그: Tailwind CSS
5편
-
Tailwind CSS 실전: 유틸리티 우선 방식 적응, 반응형·상태 변형, 다크 모드, @apply 재사용
Tailwind CSS 사용법 정리. Bootstrap과의 차이, 유틸리티 우선 방식에 적응하는 과정, 설치와 기본 사용, 반응형 디자인, 상태 변형, 다크 모드, 커스터마이징, @apply로 클래스 재사용을 예제로 다룹니다.
-
Tailwind CSS 커스텀 플러그인 | API·matchUtilities·테마·레이어
Tailwind 플러그인 API 구조, matchUtilities·matchVariant, theme() 해석, addBase/Components/Utilities 레이어 주입, 프로덕션 패턴까지 내부 동작 중심으로 정리합니다.
-
shadcn/ui: 설치 대신 소스를 복사하는 컴포넌트 키트, 테마·다크 모드, CLI, 커스터마이징
shadcn/ui CLI로 컴포넌트 소스를 프로젝트에 복사해 쓰는 방식과 Next.js 설치, CSS 변수 테마와 다크 모드, Dialog·Form·Data Table·Command 사용법, cva variant 커스터마이징, CSS 변수 미적용 같은 트러블슈팅을 다룹니다.
-
PostCSS 플러그인 활용: Autoprefixer, CSS Nesting, CSS Modules, Webpack·Vite·Tailwind 연동
PostCSS로 CSS를 변환하는 방법. 설치와 기본 설정, Autoprefixer, CSS Nesting, CSS Modules, Webpack·Vite 통합, Tailwind CSS 연동을 예제로 정리합니다.
-
Tailwind CSS로 컴포넌트·토큰 정리하는 실전 패턴 | 디자인 시스템
PostCSS 파이프라인과 JIT가 content 스캔으로 유틸리티를 생성하는 과정을 이해한 뒤, 프리미티브·시맨틱 디자인 토큰을 설계하고 컴포넌트 레이어로 승격하는 기준을 세웁니다. @apply 남용과 클래스 조합의 비교, Tailwind v4 설정 차이도 다룹니다.