CSS 类名效果演示

这个页面展示了 Tailwind CSS 各种类名的实际渲染效果。

容器类名效果

无样式容器 - 占满全宽

max-w-4xl mx-auto - 最大宽度限制 + 居中

max-w-4xl mx-auto p-8 - 添加了 32px 内边距

text-xs - 极小文字 (12px)

text-sm - 小文字 (14px)

text-base - 基础文字 (16px)

text-lg - 大文字 (18px)

text-xl - 特大文字 (20px)

text-2xl - 超大文字 (24px)

text-3xl font-bold - 巨大粗体 (30px)

text-4xl font-bold text-center - 最大居中粗体 (36px)

space-y-2 项目 1

space-y-2 项目 2

space-y-2 项目 3

space-y-6 项目 1

space-y-6 项目 2

space-y-6 项目 3

space-y-12 项目 1

space-y-12 项目 2

space-y-12 项目 3

这是渐变文字效果

使用 gradient-text + text-3xl + font-bold + text-center

这是普通文字效果

使用 text-3xl + font-bold + text-center + text-gray-800

技术探索与知识分享

使用 CSS linear-gradient + background-clip: text 实现

每个 className 都有特定的作用，组合起来创建完整的布局和样式效果。