04. 核心概念

1. 概述

Tailwind CSS 提供了数百个工具类，分类清晰。掌握这些分类，就能快速找到需要的类。

2. 工具类分类总览

分类 说明 示例
布局 display、position、z-index flex, relative, z-10
盒模型 width、height、padding、margin w-full, h-screen, p-4, m-2
排版 字体、文字大小、颜色、对齐 text-lg, font-bold, text-center
背景 背景色、渐变、图片 bg-blue-500, bg-gradient
边框 边框宽度、颜色、圆角 border, border-red, rounded
效果 阴影、透明度 shadow-md, opacity-50
交互 悬停、焦点、激活 hover:bg-blue, focus:ring
变换 平移、旋转、缩放 translate-x-4, rotate-90
过渡 过渡属性、时长、缓动 transition, duration-300

3. 布局类

3.1 Display

类名 效果
block display: block
inline-block display: inline-block
inline display: inline
flex display: flex
inline-flex display: inline-flex
grid display: grid
inline-grid display: inline-grid
hidden display: none

3.2 Position

类名 效果
static position: static
fixed position: fixed
absolute position: absolute
relative position: relative
sticky position: sticky

3.3 Z-Index

类名 效果
z-0 z-index: 0
z-10 z-index: 10
z-20 z-index: 20
z-50 z-index: 50
z-auto z-index: auto

4. 盒模型类

4.1 宽度 (Width)

类名 效果
w-0 width: 0
w-4 width: 16px (1rem)
w-1/2 width: 50%
w-1/3 width: 33.333333%
w-full width: 100%
w-screen width: 100vw
w-auto width: auto
w-min width: min-content
w-max width: max-content

4.2 高度 (Height)

类名 效果
h-0 height: 0
h-4 height: 16px
h-1/2 height: 50%
h-full height: 100%
h-screen height: 100vh
h-auto height: auto

4.3 内边距 (Padding)

类名 效果
p-0 padding: 0
p-1 padding: 4px
p-2 padding: 8px
p-4 padding: 16px
p-8 padding: 32px
px-4 padding-left: 16px; padding-right: 16px
py-2 padding-top: 8px; padding-bottom: 8px
pt-4 padding-top: 16px
pl-4 padding-left: 16px

4.4 外边距 (Margin)

类名 效果
m-0 margin: 0
m-4 margin: 16px
mx-auto margin-left: auto; margin-right: auto (居中)
my-2 margin-top: 8px; margin-bottom: 8px
mt-4 margin-top: 16px
ml-4 margin-left: 16px
-mt-4 margin-top: -16px (负边距)

5. Flexbox 类

5.1 容器属性

类名 效果
flex display: flex
flex-row flex-direction: row
flex-col flex-direction: column
flex-wrap flex-wrap: wrap
flex-nowrap flex-wrap: nowrap

5.2 主轴对齐 (justify-content)

类名 效果
justify-start justify-content: flex-start
justify-end justify-content: flex-end
justify-center justify-content: center
justify-between justify-content: space-between
justify-around justify-content: space-around
justify-evenly justify-content: space-evenly

5.3 交叉轴对齐 (align-items)

类名 效果
items-start align-items: flex-start
items-end align-items: flex-end
items-center align-items: center
items-baseline align-items: baseline
items-stretch align-items: stretch

5.4 子项属性

类名 效果
flex-1 flex: 1 1 0%
flex-auto flex: 1 1 auto
flex-none flex: none
grow flex-grow: 1
shrink flex-shrink: 1

6. Grid 布局类

6.1 容器属性

类名 效果
grid display: grid
grid-cols-3 grid-template-columns: repeat(3, minmax(0, 1fr))
grid-cols-[200px,1fr] 自定义列宽
grid-rows-2 grid-template-rows: repeat(2, minmax(0, 1fr))
gap-4 gap: 16px
gap-x-4 column-gap: 16px
gap-y-2 row-gap: 8px

6.2 子项属性

类名 效果
col-span-2 grid-column: span 2 / span 2
col-start-2 grid-column-start: 2
col-end-4 grid-column-end: 4
row-span-2 grid-row: span 2 / span 2

7. 排版类

7.1 字体大小

类名 字号 行高
text-xs 12px 16px
text-sm 14px 20px
text-base 16px 24px
text-lg 18px 28px
text-xl 20px 28px
text-2xl 24px 32px
text-3xl 30px 36px
text-4xl 36px 40px

7.2 字重 (font-weight)

类名 效果
font-thin font-weight: 100
font-light font-weight: 300
font-normal font-weight: 400
font-medium font-weight: 500
font-semibold font-weight: 600
font-bold font-weight: 700
font-extrabold font-weight: 800

7.3 文本颜色

类名 效果
text-black 黑色
text-white 白色
text-gray-500 灰色 (500 是中等亮度)
text-red-500 红色
text-blue-500 蓝色
text-green-500 绿色

7.4 文本对齐

类名 效果
text-left 左对齐
text-center 居中对齐
text-right 右对齐
text-justify 两端对齐

8. 背景类

8.1 背景色

类名 效果
bg-black 黑色背景
bg-white 白色背景
bg-gray-100 浅灰色
bg-blue-500 蓝色
bg-transparent 透明

8.2 背景渐变

类名 效果
bg-gradient-to-r 从左到右渐变
bg-gradient-to-t 从下到上渐变
from-blue-500 渐变起始色
to-purple-500 渐变结束色 
<div class="bg-gradient-to-r from-blue-500 to-purple-500">
  渐变背景
</div>

9. 边框类

9.1 边框宽度

类名 效果
border border-width: 1px
border-0 border-width: 0
border-2 border-width: 2px
border-t border-top-width: 1px
border-b border-bottom-width: 1px

9.2 边框颜色

类名 效果
border-gray-300 灰色边框
border-red-500 红色边框
border-transparent 透明边框

9.3 圆角

类名 效果
rounded-none 无圆角
rounded-sm 小圆角
rounded 默认圆角
rounded-md 中等圆角
rounded-lg 大圆角
rounded-full 完全圆形
rounded-t-lg 顶部圆角

10. 效果类

10.1 阴影

类名 效果
shadow-sm 小阴影
shadow 默认阴影
shadow-md 中等阴影
shadow-lg 大阴影
shadow-xl 超大阴影
shadow-2xl 特大阴影
shadow-none 无阴影

10.2 透明度

类名 效果
opacity-0 完全透明
opacity-25 25% 不透明
opacity-50 50% 不透明
opacity-75 75% 不透明
opacity-100 完全不透明

11. 交互类

11.1 状态前缀

前缀 说明 示例
hover: 鼠标悬停 hover:bg-blue
focus: 获得焦点 focus:ring
active: 激活状态 active:scale-95
disabled: 禁用状态 disabled:opacity-50

11.2 示例

<button class="bg-blue-500 hover:bg-blue-700 active:scale-95 focus:ring focus:ring-blue-300">
  交互按钮
</button>

12. 综合示例

完整的卡片组件

<div class="max-w-sm mx-auto bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
  <div class="p-6">
    <div class="flex items-center gap-3 mb-4">
      <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center">
        <span class="text-white font-bold">A</span>
      </div>
      <div>
        <h3 class="font-bold text-gray-900">张三</h3>
        <p class="text-sm text-gray-500">2024-01-15</p>
      </div>
    </div>
    <p class="text-gray-700 mb-4">
      这是一段示例文本，展示 Tailwind CSS 的组合能力。
    </p>
    <div class="flex gap-2">
      <span class="px-2 py-1 bg-gray-100 text-gray-600 text-sm rounded">标签1</span>
      <span class="px-2 py-1 bg-gray-100 text-gray-600 text-sm rounded">标签2</span>
    </div>
  </div>
</div>

效果：

  • 最大宽度 384px，自动居中
  • 白色背景，大圆角，阴影
  • 悬停时阴影变大，过渡动画
  • 头部：头像、名字、日期
  • 正文：描述文本
  • 底部：标签

13. 快速查询表

需求 类名
居中 flex justify-center items-center
两端对齐 flex justify-between
等宽列 grid grid-cols-3
响应式网格 grid grid-cols-1 md:grid-cols-2
卡片 bg-white rounded-lg shadow-md p-4
按钮 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700
输入框 border rounded px-3 py-2 focus:outline-none focus:ring
隐藏 hidden
移动端隐藏 hidden md:block

14. 练习

练习 1

用 Tailwind 实现下面的布局：

  • 一个 Flex 容器，水平排列
  • 三个等宽的子元素
  • 每个子元素白色背景、阴影、内边距

参考答案：

<div class="flex gap-4">
  <div class="flex-1 bg-white shadow p-4">1</div>
  <div class="flex-1 bg-white shadow p-4">2</div>
  <div class="flex-1 bg-white shadow p-4">3</div>
</div>

练习 2

实现一个警告提示框：

  • 黄色背景
  • 左侧红色边框
  • 圆角
  • 内边距
  • 包含标题和描述

参考答案：

<div class="bg-yellow-50 border-l-4 border-red-500 rounded-lg p-4">
  <h4 class="font-bold text-yellow-800">警告</h4>
  <p class="text-yellow-700">这是一个警告信息</p>
</div>

15. 总结

分类 关键类名
布局 flex, grid, relative, absolute
盒模型 w-*, h-*, p-*, m-*
Flex flex, justify-*, items-*
Grid grid, grid-cols-*, col-span-*
排版 text-*, font-*, text-*
背景 bg-*, bg-gradient-*
边框 border, rounded-*
效果 shadow-*, opacity-*
交互 hover:, focus:, active:

16. 下一步

掌握了核心工具类后，接下来学习响应式设计：

👉 下一节：05. 响应式设计

# css
Logo
AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐

cover

Yearning+客户端+手工EXPLAIN，NineData社区版能作为替代方案？

avatar AtomGit开源社区
cover

2026 毕业季终极破局：PaperXie 四大核心功能，重构降重 + AIGC 检测双达标新范式

avatar AtomGit开源社区
cover

答辩 PPT 不用熬！PaperXie AI PPT 生成器：把论文变专业 slides，10 分钟搞定毕业关

avatar AtomGit开源社区