精選 · 開放 · 免費

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 格線，功能卡片內有寬裕的 padding，區塊之間有清晰的間隔。

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 狀態下，提供顏色、背景顏色與透明度的平滑過渡。 · 為按鈕和連結等互動元素提供細微的變形動畫。 · 所有過渡效果均使用一致的緩動曲線，以營造連貫的視覺感受。

連結（文字到強調藍）與按鈕（背景變換）的細微顏色變化。 · 透過透明度或細微的變形變化，提供立即的視覺回饋。

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）作為強調色，用於程式碼高亮。字型排印使用人文主義無襯線體（humanist-sans）以求清晰，展示標題則採用粗體風格並搭配緊湊的字間距。關鍵的設計限制包括：永不使用置中的標題（佈局為強烈的左對齊）、避免使用多個強調色（堅持單一藍色），以及保持寬裕的留白。網站使用一個 12 欄格線系統，欄間距為 24px，功能卡片具有細微的圓角（12-16px）與極簡的陰影。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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