原子化 CSS，将样式直接写在类名上
为什么不直接使用内联样式？
- 没有语义化
- 内联不能处理悬停、焦点和其他状态
- 内联不能处理媒体查询
前缀
只在满足该前缀的条件时应用样式，前缀可以多个一起写（选择多种条件的组合）
选择器
- 所有 css 选择器有的基本都有
- 基于父级状态的样式：
group-xxx:、多个组嵌套：group/{name} - 基于同级状态的样式：
peer-xxx: - 所有子元素：
*: - 所有后代元素：
**:
媒体和特性查询
- 响应式断点
- 深色模式
- 其他特性查询…
后缀
important 标记
在单个类后面加 ! 表示 !important
变量
使用 [] 括起来的就是任意值
基本变量
如：
w-[100px]：宽度大小bg-[#bada55]：背景色text-[22px]：字体大小
原生 CSS
如果 Tailwind 没有现成工具类的 CSS 属性：直接使用方括号表示法来编写完全任意的原生 CSS：[原生css表达式]
空格
当任意值需要包含空格时，使用下划线（ _ ）代替：<div class="grid grid-cols-[1fr_500px_2fr]">
转义（当下划线和空格都有效时）：<div class="before:content-['hello\_world']">