基本概念

Tailwind CSS 是一个备受欢迎的、基于原子类的CSS框架（原子类是一个类，对应于一个特定的 CSS 属性和值的组合。通过使用这些原子类，开发者可以直接在HTML中应用样式，而不必手动编写和管理一堆的CSS样式规则），是CSS的代码片段

Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何 模板中的 CSS 类（class）名，然后生成相应的样式代码并写入 到一个静态 CSS 文件中

Tailwind 的原子类遵循一套简单的命名规则，由以下几个部分组成：

• 属性（Property）： 表示样式属性的缩写，如bg表示背景颜色
• 值（Value）： 表示样式属性的取值，如blue-500表示蓝色，p-4 表示内边距为 4
• 状态（State）： 表示伪类或状态，如hover表示鼠标悬停状态