큐레이션 · 오픈 · 무료

Tailwind CSS

현대적인 웹사이트를 빠르게 구축하기 위한 유틸리티-퍼스트 CSS 프레임워크입니다.

devtoolscss
Tailwind CSS 스크린샷
↓ 디자인 시스템 다운로드 (26 MB)OpenDesign 에서 열기

원본 사이트: https://tailwindcss.com

📦 팩 내용 보기 →

01

디자인 DNA

유틸리티-퍼스트모던개발자 중심깔끔효율적

강력하면서도 친숙하게 느껴지는 웹 개발자를 위한 정밀 도구 모음입니다.

02

컬러

#0ea5e9Accent
#111827Ink
#374151Ink soft
#ffffffBG
#f9fafbBG soft
#f3f4f6BG quiet
#6b7280Muted
rgba(0, 0, 0, 0.05)Line

고대비 모노크로𝑚 베이스에 코드와 인터랙티브 요소를 위한 생동감 있는 스카이블루 악센트를 하나 사용합니다.

03

타이포그래피

humanist-sans · monospace

제목은 모던하고 밀도 높은 느낌을 위해 타이트한 자간(-2px에서 -1px)을 사용합니다. · 본문은 가독성을 위해 편안한 1.5줄 높이를 유지합니다. · 코드 블록은 명확한 구분을 위해 별도의 모노스페이스 폰트를 사용합니다.

04

여백

4px
8px
12px
16px
20px
24px
32px
40px
48px
64px
80px
96px

일관된 4px 그리드를 기반으로, 기능 카드에는 넉넉한 패딩을, 섹션 간에는 명확한 간격을 둡니다.

05

표면 (라운드 / 그림자 / 경계선)

sm · 4px
md · 8px
lg · 12px
xl · 16px
pill · 999px

컨테이너에는 1px solid rgba(0, 0, 0, 0.05)의 테두리를, 인터랙티브 요소에는 미묘한 삽입 테두리를 사용합니다.

0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1) · inset 0 0 0 1px rgba(0, 0, 0, 0.1) · inset 0 0 0 1px rgba(255, 255, 255, 0.1) · inset 0 0 0 1px rgba(0, 0, 0, 0.05)

06

레이아웃

1280container
12columns
24pxgutter
640 / 768 / 1024 / 1280breakpoints

중앙 정렬, 단일 컬럼 히어로 영역이 기능 카드용 반응형 그리드로 이어집니다.

07

모션과 인터랙션

150msmicro
300mssmall
350msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

hover 상태에서의 색상, 배경색, 불투명도에 대한 부드러운 전환. · 버튼과 링크와 같은 인터랙티브 요소에 대한 미묘한 transform 애니메이션. · 모든 전환에서 일관된 이징 곡선을 사용하여 통일된 느낌을 줍니다.

링크(텍스트에서 악센트 블루로)와 버튼의 배경 변경에 대한 미묘한 색상 변화. · 불투명도나 미묘한 transform 변화를 통한 즉각적인 시각적 피드백.

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

Tailwind CSS — 桌面首屏（hero）
桌面首屏（hero）
Tailwind CSS — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Tailwind CSS — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Tailwind CSS — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Tailwind CSS — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Tailwind CSS — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Tailwind CSS — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Tailwind CSS — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Tailwind CSS — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Tailwind CSS — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Tailwind CSS — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Tailwind CSS — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Tailwind CSS — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Tailwind CSS — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Tailwind CSS — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Tailwind CSS — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Tailwind CSS — 移动首屏
移动首屏

실제 페이지에서 캡처 · 실 computed styles

11

System Prompt

이것은 유틸리티-퍼스트 CSS 프레임워크인 Tailwind CSS의 웹사이트입니다. 개발자가 웹사이트를 빠르게 구축할 수 있는 현대적이고 효율적인 도구로 자리매김합니다. 비주얼 디자인은 깔끔하고 전문적이며 콘텐츠 중심적입니다. 주요 색상으로는 깨끗한 흰색 배경(#ffffff), 거의 검은색 텍스트(#111827), 그리고 코드 하이라이트를 위한 생동감 있는 스카이블루 악센트(#0ea5e9)가 포함됩니다. 타이포그래피는 명확성을 위해 humanist-sans 폰트를 사용하며, 타이트한 자간의 굵은 디스플레이 스타일을 적용합니다. 핵심 디자인 제약 조건은 다음과 같습니다: 절대 중앙 정렬 제목 사용 금지(레이아웃은 강한 좌측 정렬), 여러 악센트 색상 사용 금지(단일 블루 유지), 그리고 넉넉한 여백 유지. 사이트는 24px 거터가 있는 12컬럼 그리드를 사용하며, 미묘하게 둥근 모서리(12-16px)와 최소한의 그림자가 적용된 카드를 특징으로 합니다.

이 감각을 당신의 에이전트에

이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.

OpenDesign 스킬 ↗ · 이 팩 (에이전트용) ↗

en · zh-CN · zh-TW · ja · ko