基本概念
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
表示鼠标悬停状态