Tailwind CSS 速查

Tailwind CSS 提供了大量的实用程序类,这些类名都是使用缩写的方式,以更简洁地表述其含义。以下是一些常用的 Tailwind CSS 缩写及其对应的意义:

  1. 布局
  • w: width

  • max-w: max-width

  • h: height

  • max-h: max-height

  • m: margin

  • mt: margin-top

  • mb: margin-bottom

  • ml: margin-left

  • mr: margin-right

  • p: padding

  • pt: padding-top

  • pb: padding-bottom

  • pl: padding-left

  • pr: padding-right

  1. 文本样式
  • font: font-family

  • text: text-color, text-alignment, text-transform, font-size

  • leading:line-height

  • tracking: letter-spacing

  • uppercase: text-transform: uppercase

  • lowercase: text-transform: lowercase

  1. 背景和边框
  • bg: background-color

  • border: border-style, border-width, border-color

  • rounded: border-radius

  • shadow: box-shadow

  1. 弹性盒子布局
  • flex: display: flex

  • justify: justify-content

  • items: align-items

  • self: align-self

  • order: order

  • flex-grow: flex-grow

  • flex-shrink: flex-shrink

  1. 网格布局
  • grid-cols: grid-template-columns

  • grid-rows: grid-template-rows

  • gap: grid-gap

  1. 响应式设计
  • sm, md, lg, xl: 分别对应移动设备、平板、桌面、大屏幕

  • hover: 鼠标悬停时的样式

  • focus: 元素获取焦点时的样式

除了上面列举的 Tailwind CSS 缩写和对应含义之外,Tailwind CSS 还提供了很多其他的实用程序类,以下是一些常用的 Tailwind CSS 缩写和对应含义:

  1. 边框和分隔符
  • divide: 分隔符 (border-color, border-style, border-width)

  • divide-x: 水平分隔符 (border-color, border-style, border-width)

  • divide-y: 垂直分隔符 (border-color, border-style, border-width)

  • border-collapse: 设置边框是否合并

  1. Flexbox 尺寸和排列
  • flex-wrap: 等同于 flex-flow 中的 wrap

  • flex-row, flex-row-reverse, flex-col, flex-col-reverse: flex-direction 的简写

  • flex-1...flex-12: 设置 flex-grow、flex-shrink 和 flex-basis 属性

  • gap-x: 水平包裹在对象(如 flex 子元素)之间的间距。

  • gap-y: 垂直包裹在对象(如 flex 子元素)之间的间距。

  • space-x: 水平排列中对象(如 flex 子元素)之间的空间

  • space-y: 垂直排列中对象(如 flex 子元素)之间的空间

  1. Z-index
  • z-{n}: 设置 z-index 的值,其中 n 为正整数
  1. 动画
  • animate-{name}: 向元素添加动画(使用 @keyframes 中定义的动画名称)
  1. 列表样式
  • list-style-{type}: 设置列表项的类型 (disc, decimal, decimal-leading-zero)
  1. 转换和过渡
  • transform: 让元素旋转、缩放、倾斜、平移等

  • transition-{property}: 用于添加一个过度效果 {property} 的值是必需的。

  1. 颜色
  • text-{color}: 设置文本颜色

  • bg-{color}: 设置背景颜色

  • border-{color}: 设置边框颜色

  1. 字体权重
  • font-thin: 字体细

  • font-light: 字体轻

  • font-normal: 字体正常

  • font-medium: 字体中等

  • font-semibold: 字体半粗

  • font-bold: 字体粗

  • font-extrabold: 字体特粗

  • font-black: 字体黑

  1. SVG
  • fill-{color}: 设置 SVG 填充颜色

  • stroke-{color}: 设置 SVG 描边颜色

  1. 显示和隐藏
  • hidden: 隐藏元素(display: none)

  • invisible: 隐藏元素,但仍保留该元素的布局和尺寸

  • visible: 显示元素

  1. 清除浮动
  • clear-{direction}: 清除某个方向的浮动效果
  1. 容器
  • container: 将内容限制在最大宽度的容器内部

  • mx-auto: 实现水平居中(margin-left 和 margin-right 设置为 auto)

以上是一些常用的 Tailwind CSS 缩写及其对应的意义,覆盖了基础的布局、文本、背景、边框、弹性盒子布局、网格布局和响应式设计,有助于更快速地开发出具有良好用户体验的 Web 应用程序。

posted @ 2023-10-16 12:43  easy5  阅读(397)  评论(0编辑  收藏  举报