tailwindcss

核心概念

• 本质上是一个工具集，包含了大量类似 flex、 pt-4、 text-center 以及 rotate-90 等工具类，可以组合使用并直接在 HTML 代码上实现任何 UI 设计;
• 响应式设计：通过添加特定的前缀，如 sm:、md:、lg: 等，可以轻松实现不同屏幕尺寸下的响应式样式，sm优先，未带前缀的默认是sm开头；
• 自定义配置：允许开发者根据项目需求自定义颜色、间距、字体大小等各种样式属性的值和范围。可以通过修改 tailwind.config.js 文件来进行个性化配置

命名规则(6种)

• 唯一性的样式属性直接作为类名：
  • block 对应 display: block
  • absolute 对应 position: absolute，
  • m-auto 对应 margin: auto 等
• 对于 CSS 通用名称，有统一规范：
  • left、right、top、bottom 分别对应 l、r、t、b，x和y分别对应 left-right 对应 x，top-bottom 对应 y
  • 例如：
    • ml-(2px) 表示 margin-left: 2px，
    • mx-(2px) 表示 margin-left: 2px; margin-right: 2px，
    • pt-2 表示 padding-top: 0.5rem
• 其他简写符合常用则简的原则：
  • bg-black 表示 background: black，
  • bg-(url(/img.png)) 表示 background: url(/img.png) 等
• 部分类名的命名能体现其作用：
  • whitespace-nowrap 表示 white-space: nowrap，
  • transition-opacity 表示 transition-property: opacity;
  • transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms
• 修改器语法(修改器:类名)：
  • 内置的修改器包括伪类选择器（如 hover、focus、active）、
  • 子选择器（如 first、last、even、odd）、
  • 父状态选择器（如 group）、
  • 伪元素（如 before、after）
  • 以及 !important 修改器（用于强制生效某个类名）。
• 支持任意属性值：
  • w-full 表示 width: 100%，w-(100px) 表示 width: 100px，
  • top-(10px) 表示元素距离顶部的距离为 10px 等。

布局

• 容器（container）：.container类用于将元素的宽度固定到当前断点。它没有自动居中或内置水平填充的功能。若要使容器居中，可搭配使用.mx-auto类。
• 列（Columns）：从.columns-1到.columns-12：用于设置元素内的列数分别为 1 到 12 列，搭配.gap-8可设置每列之间的间隙。
• 宽高比（aspect）：使用aspect-*类来设置元素的长宽比。
• 换行（break-after、break-before、break-inside）:控制列或页面在元素之后的中断行为。例如.break-after-column可强制在元素之后进行列分隔。
• 还有一些用于设置元素基本布局属性的类名(间隔 & 尺寸)：宽度、高度、外边距、内边距；

Flexbox & Grid

排版

• 字体
• 行高
• 文本居中

背景 & 边框

效果 & Filters

动画 & Transforms

交互性 & SVG

高效、灵活且易于维护

• 高效
  • 不用从头开始编写复杂的样式规则；
  • 快速原型开发：能够快速地为元素添加和调整样式，使得在设计原型阶段能够迅速迭代和尝试不同的样式组合。
• 灵活
  • 可定制性强：通过修改配置文件，可以自定义颜色、间距、字体大小等各种样式属性，满足项目的独特需求。
  • 这些内容可以定制：
    • 颜色、间距、字体、边框、尺寸、阴影、断点
    • 文本对齐方式（text-align）、显示属性（display）、弹性布局（flex）等各种常见的样式属性。
• 易维护
  • 当需要更改全局样式或添加新的样式时，只需在配置文件中进行调整，而无需在多个 CSS 文件中查找和修改。
• 例如：在项目中如果需要更改所有按钮的背景颜色，只需要在配置文件中修改相关颜色的定义，而无需在多个页面或组件的 CSS 代码中逐个修改。