Tailwind CSS 备忘单

tailwind css 备忘单

页面布局

实用类名 描述

container居中内容。block / inline-block 块级或内联块级元素。flex / grid Flexbox 或 Grid 布局。flex-col / flex-row Flex 布局方向:列/行。items-center垂直居中对齐项目。justify-center水平居中对齐项目。gap-1 – gap-12 项目间距。—

间距与填充

实用类名 描述

m-{size}外边距:mt, mb, ml, mr。p-{size}内边距:pt, pb, pl, pr。{size} 值0, px, 1 – 96 等。—

文本样式

实用类名 描述

text-{size}字体大小 (例如:text-sm)。font-bold粗体文本。font-medium中等粗细文本。font-light细体文本。text-left / text-center / text-right 文本对齐方式。text-gray-500文本颜色。—

背景样式

实用类名 描述

bg-{color}背景颜色。bg-gradient-to-r从左到右的渐变背景。bg-opacity-{value}背景透明度。—

边框样式

实用类名 描述

border默认边框宽度。border-{color}边框颜色。rounded / rounded-{size} 圆角。—

阴影效果

实用类名 描述

shadow-sm小阴影。shadow-md中等阴影。shadow-lg大阴影。shadow-none无阴影。—

尺寸设置

实用类名 描述

w-{size} / h-{size} 宽度/高度 (full, auto, 百分比)。max-w-{size}最大宽度。min-h-{size}最小高度。—

Flexbox 对齐方式

实用类名 描述

justify-start项目起始位置对齐。justify-between项目间距平均分配。items-start项目顶部对齐。—

元素定位

实用类名 描述

absolute / relative 定位模式。top-{value} / left-{value} 偏移值。z-{value}Z-index (层叠顺序)。—

颜色选择

类名示例 描述

text-blue-500蓝色文本颜色。bg-green-300绿色背景颜色。border-red-400红色边框颜色。—

过渡与动画

(此处应补充过渡和动画相关的实用类名及描述)

以上就是Tailwind CSS 备忘单的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2845595.html

(0)
上一篇 2025年3月10日 12:39:31
下一篇 2025年3月10日 12:39:37

AD推荐 黄金广告位招租... 更多推荐

相关推荐

发表回复

登录后才能评论