tailwind-patterns
CSS 중심 아키텍처로 현대적인 Tailwind v4 UI 구축하기
또한 다음에서 사용할 수 있습니다: 0xDarkMatter,0xDarkMatter
Tailwind 설정과 반응형 디자인으로 고민하지 마세요. 이 스킬은 Tailwind CSS v4 로 확장 가능한 UI 를 구축하기 위한 CSS 중심 패턴, 컨테이너 쿼리 마스터리, 그리고 현대적인 디자인 토큰 아키텍처를 제공합니다.
스킬 ZIP 다운로드
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
토글을 켜고 사용 시작
테스트해 보기
"tailwind-patterns" 사용 중입니다. 컨테이너 쿼리가 있는 다크 모드 카드 컴포넌트 생성하기
예상 결과:
- .card { @container; background: white; padding: var(--spacing-lg); }
- .dark .card { background: zinc-900; }
- @sm { .card-content { grid-template-columns: 1fr 1fr; } }
"tailwind-patterns" 사용 중입니다. OKLCH 색상과 함께 디자인 토큰 설정하기
예상 결과:
- @theme {
- --color-primary: oklch(0.7 0.15 250);
- --color-surface: oklch(0.98 0 0);
- --spacing-md: 1rem;
- }
보안 감사
안전Static analysis detected 77 potential issues (backtick execution patterns, weak cryptography, system reconnaissance) but ALL are FALSE POSITIVES. The flagged patterns are markdown code block delimiters (```), inline code formatting, and CSS framework documentation comparing v3 vs v4. No executable code exists - this is documentation-only content for Tailwind CSS v4 patterns.
품질 점수
만들 수 있는 것
Tailwind v3 에서 v4 로 마이그레이션
JavaScript 설정을 CSS 중심 @theme 디렉티브로 교체해야 하는 Tailwind v3 에서 v4 로 업그레이드하는 개발자
반응형 컴포넌트 라이브러리 구축
뷰포트 브레이크포인트 대신 컨테이너 크기에 적응하는 재사용 가능한 컴포넌트를 만드는 UI 엔지니어
디자인 토큰 시스템 구현
OKLCH 와 CSS 변수를 사용하여 시맨틱 색상, 간격, 타이포그래피 스케일을 구축하는 팀
이 프롬프트를 사용해 보세요
[project type] 에 대한 기본 브랜드 색상, 간격 스케일, 폰트 스택을 포함한 Tailwind v4 @theme 설정 생성하기
좁은 컨테이너에서 넓은 컨테이너로 적응하는 컨테이너 쿼리를 사용한 반응형 [component type] 디자인하기
적절한 색상 토큰으로 [class/media/selector] 전략을 사용하여 [page type] 에 대한 다크 모드 구현하기
반응형 브레이크포인트와 비대칭 벤트 스타일 섹션을 포함한 [flexbox/grid] 를 사용한 [layout type] 생성하기
모범 사례
- 더 나은 성능과 네이티브 CSS 변수 지원을 위해 tailwind.config.js 대신 Tailwind v4 의 CSS 중심 @theme 디렉티브 사용
- 재사용 가능하고 컨텍스트에 독립적인 컴포넌트를 위해 뷰포트 브레이크포인트 대신 컴포넌트 수준의 반응형 디자인에 컨테이너 쿼리 (@container) 사용
- 원시 색상 (기본 값), 시맨틱 토큰 (primary, surface), 컴포넌트 토큰 (button-bg) 의 세 계층으로 디자인 토큰 구성
- 접두사 없이 기본 스타일을 작성하고 더 큰 화면에 sm:, md:, lg: 오버라이드를 추가하는 모바일 퍼스트 접근 방식 사용
- 클래스 조합이 3 번 이상 반복되거나 복잡한 상태 변형이 필요할 때 컴포넌트 추출 고려
피하기
- 어디서나 임의 값 사용 피하기 - w-[327px] 와 같은 하드코딩된 숫자 대신 일관성을 위해 디자인 시스템 스케일 값 사용
- 스타일 오버라이드를 위해 !important 사용하지 않기 - 적절한 컴포넌트 구조와 CSS 레이어링을 통해 특수성 문제 해결
- 인라인 스타일 속성 사용하지 않기 - 디자인 시스템 일관성 유지를 위해 Tailwind 유틸리티 클래스 사용
- v3 JavaScript 설정과 v4 CSS 중심 패턴 혼용하지 않기 - @theme 디렉티브와 CSS 기반 설정으로 완전 마이그레이션
- @apply 디렉티브 과다 사용 피하기 - 동적 동작은 React/Vue 컴포넌트 사용, 정적 패턴은 순수 CSS 컴포넌트 사용