tailwind-patterns
✓반응형 레이아웃, 카드, 탐색, 양식, 버튼, 타이포그래피 등 일반적인 웹 사이트 구성 요소를 위한 프로덕션 준비 Tailwind CSS 패턴입니다. 간격 배율, 중단점, 모바일 우선 패턴 및 어두운 모드 지원이 포함됩니다. UI 구성요소 구축, 랜딩 페이지 생성, 양식 스타일 지정, 탐색 구현 또는 반응형 레이아웃 수정 시 사용합니다.
SKILL.md
Status: Production Ready ✅ Last Updated: 2026-01-14 Tailwind Compatibility: v3.x and v4.x Source: Production projects, shadcn/ui patterns
| Tight spacing | gap-2 p-2 space-y-2 | 0.5rem (8px) | | Standard spacing | gap-4 p-4 space-y-4 | 1rem (16px) | | Comfortable | gap-6 p-6 space-y-6 | 1.5rem (24px) | | Loose | gap-8 p-8 space-y-8 | 2rem (32px) | | Section spacing | py-16 sm:py-24 | 4rem/6rem (64px/96px) |
Standard Pattern: Use increments of 4 (4, 6, 8, 12, 16, 24)
반응형 레이아웃, 카드, 탐색, 양식, 버튼, 타이포그래피 등 일반적인 웹 사이트 구성 요소를 위한 프로덕션 준비 Tailwind CSS 패턴입니다. 간격 배율, 중단점, 모바일 우선 패턴 및 어두운 모드 지원이 포함됩니다. UI 구성요소 구축, 랜딩 페이지 생성, 양식 스타일 지정, 탐색 구현 또는 반응형 레이아웃 수정 시 사용합니다. 출처: jezweb/claude-skills.
인용 가능한 정보
AI/검색 인용용 안정적인 필드와 명령어.
- 설치 명령어
npx skills add https://github.com/jezweb/claude-skills --skill tailwind-patterns- 카테고리
- </>개발 도구
- 인증됨
- ✓
- 최초 등록
- 2026-02-01
- 업데이트
- 2026-02-18
빠른 답변
tailwind-patterns이란?
반응형 레이아웃, 카드, 탐색, 양식, 버튼, 타이포그래피 등 일반적인 웹 사이트 구성 요소를 위한 프로덕션 준비 Tailwind CSS 패턴입니다. 간격 배율, 중단점, 모바일 우선 패턴 및 어두운 모드 지원이 포함됩니다. UI 구성요소 구축, 랜딩 페이지 생성, 양식 스타일 지정, 탐색 구현 또는 반응형 레이아웃 수정 시 사용합니다. 출처: jezweb/claude-skills.
tailwind-patterns 설치 방법은?
터미널 또는 명령줄 도구(Terminal, iTerm, Windows Terminal 등)를 엽니다 이 명령어를 복사하여 실행합니다: npx skills add https://github.com/jezweb/claude-skills --skill tailwind-patterns 설치 후 스킬은 자동으로 AI 코딩 환경에 설정되어 Claude Code나 Cursor에서 사용할 수 있습니다
소스 저장소는 어디인가요?
https://github.com/jezweb/claude-skills
상세
- 카테고리
- </>개발 도구
- 출처
- skills.sh
- 최초 등록
- 2026-02-01