tailwind css 中 text- 和 bg- 类可直接在 class 属性中使用，无需额外 css；text- 控制文字颜色、大小、对齐等，bg- 设置背景色、透明度及渐变，组合时后写的类覆盖同类型前写的类，状态类（如 hover:）应置于末尾。
直接在 HTML 元素的 class 属性里写 text-xxx 和 bg-xxx 类即可，不需要额外 CSS 或内联样式。关键是要理解命名逻辑、颜色层级和组合顺序。
text-类控制文字颜色与对齐
text-开头的类负责文字颜色、大小、粗细、对齐等。常见用法：
- 颜色：text-gray-700（中灰）、text-blue-600（标准蓝）、text-red-500（警告红）——数字越大通常越深
- 对齐：text-left / text-center / text-right / text-justify
- 大小：text-sm / text-base / text-lg / text-xl（默认 text-base ≈ 1rem）
- 样式：font-bold / italic / underline / uppercase
bg-类设置背景色与透明度
bg-开头的类专管背景，支持颜色、图片、渐变和透明度：
- 纯色背景：bg-white、bg-gray-100、bg-indigo-500、bg-black
- 透明度控制：bg-opacity-70 配合 bg-blue-500 使用（需两者共存），单独写无效
- 深色模式适配：dark:bg-gray-800 可在 html 标有 dark 类时生效，无需 JS 切换
- 渐变背景：bg-gradient-to-r from-blue-400 to-purple-500（需开启 gradientColorStops 配置）
组合使用要注意顺序和覆盖规则
多个 class 写在同一 class 属性中，后写的会覆盖同类型前写的（非 CSS 权重，是 Tailwind 解析顺序）：
- ✅ 正确：
class="text-white bg-blue-600 hover:bg-blue-700"—— 悬停时背景加深，文字保持白色 - ❌ 错误：
class="bg-blue-600 text-white bg-red-500"—— 最后 bg-red-500 覆盖了蓝色背景 - ⚠️ 注意：
text-blue-500 text-red-400最终显示红色文字，因为后者在后 - ? 提示：状态类（hover:、focus:、dark:）建议放在最后，确保能生效
避免硬编码色值，优先用语义化配置
直接写 bg-blue-600 在换主题时难维护。更稳妥的方式：
- 在
tailwind.config.js的theme.extend.colors中定义：primary: '#2563eb' - HTML 中写
bg-primary hover:bg-primary/90（/90 是 opacity 缩写） - 任意值如
text-[#1e3a8a]仅限开发调试，生产环境建议走配置
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
