我的 Tailwind 样式指南
发布: (2026年2月23日 GMT+8 20:12)
2 分钟阅读
原文: Dev.to
Source: Dev.to
包含内容
- Typography — 实时渲染的每种字体大小、粗细、行高和字间距
- Colors — 完整调色板样本，包含类名和十六进制值
- Spacing — 使用彩色方块可视化的内边距和外边距比例
- Flexbox & Grid — 常见布局模式的实时示例
- Borders & Rounded — 从
rounded-none到rounded-full的所有圆角变体 - Shadows — 在实际卡片上展示
shadow-sm到shadow-2xl - Responsive breakpoints — 包含像素值的表格 + 实时断点指示器
- Common patterns — 卡片、按钮组、导航栏和表单组件，附带可复制的标记
每个章节都包含渲染结果 以及 代码片段。
查看
https://winkelstraatnl.github.io/tailwind-style-guide/
该页面完全使用 Tailwind 构建（自给自足）。它是一个单独的 HTML 文件，无需构建步骤——仅使用 Tailwind CDN。
我们将其公开，作为团队的快速参考，也觉得可能对其他人有帮助。欢迎提供反馈。