精选 · 开放 · 免费

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

悬停状态下颜色、背景色和不透明度的平滑过渡。 · 按钮和链接等交互元素的细微变换动画。 · 所有过渡效果使用一致的缓动曲线，营造统一感。

链接颜色微妙变化（文字变为点缀蓝色），按钮背景变化。 · 通过不透明度或细微变换变化提供即时视觉反馈。

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

这是 Tailwind CSS 的网站，一个实用优先的 CSS 框架。它将自身定位为开发者快速构建网站的现代、高效工具。视觉设计简洁、专业、以内容为中心。关键颜色包括干净的白色背景（#ffffff）、近黑色文字（#111827）和用于代码高亮的活力天空蓝点缀色（#0ea5e9）。排版使用人文无衬线字体以确保清晰度，展示风格为加粗且字间距紧凑。关键设计约束包括：绝不使用居中标题（布局为强烈左对齐），避免使用多种点缀色（仅使用单一蓝色），并保持充足的留白。网站采用12列网格，间距为24px，功能卡片带有细微圆角（12-16px）和极简阴影。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效，整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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