登录注册

当前位置：首页 > 文章列表 > 文章 > 前端 > Tailwind CSS 备忘单

Tailwind CSS 备忘单

2025-01-22 17:15:40 0浏览 收藏

文章小白一枚，正在不断学习积累知识，现将学习到的知识记录一下，也是将我的所得分享给大家！而今天这篇文章《Tailwind CSS 备忘单》带大家来了解一下##content_title##，希望对大家的知识积累有所帮助，从而弥补自己的不足，助力实战开发！


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 备忘单》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！

华虹宏力“沟槽栅的制造方法”专利获授权华虹宏力“沟槽栅的制造方法”专利获授权
上一篇
华虹宏力“沟槽栅的制造方法”专利获授权
什么是WordPress，WordPress能做什么用？
下一篇
什么是WordPress，WordPress能做什么用？
查看更多
最新文章
查看更多
课程推荐
  • 前端进阶之JavaScript设计模式
    前端进阶之JavaScript设计模式
    设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。
    542次学习
  • GO语言核心编程课程
    GO语言核心编程课程
    本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。
    508次学习
  • 简单聊聊mysql8与网络通信
    简单聊聊mysql8与网络通信
    如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让
    497次学习
  • JavaScript正则表达式基础与实战
    JavaScript正则表达式基础与实战
    在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
    487次学习
  • 从零制作响应式网站—Grid布局
    从零制作响应式网站—Grid布局
    本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。
    484次学习
查看更多
AI推荐
  • AI Make Song：零门槛AI音乐创作平台，助你轻松制作个性化音乐
    AI Make Song
    AI Make Song是一款革命性的AI音乐生成平台，提供文本和歌词转音乐的双模式输入，支持多语言及商业友好版权体系。无论你是音乐爱好者、内容创作者还是广告从业者，都能在这里实现“用文字创造音乐”的梦想。平台已生成超百万首原创音乐，覆盖全球20个国家，用户满意度高达95%。
    24次使用
  • SongGenerator.io：零门槛AI音乐生成器，快速创作高质量音乐
    SongGenerator
    探索SongGenerator.io，零门槛、全免费的AI音乐生成器。无需注册，通过简单文本输入即可生成多风格音乐，适用于内容创作者、音乐爱好者和教育工作者。日均生成量超10万次，全球50国家用户信赖。
    19次使用
  • BeArt AI换脸：免费在线工具，轻松实现照片、视频、GIF换脸
    BeArt AI换脸
    探索BeArt AI换脸工具，免费在线使用，无需下载软件，即可对照片、视频和GIF进行高质量换脸。体验快速、流畅、无水印的换脸效果，适用于娱乐创作、影视制作、广告营销等多种场景。
    20次使用
  • SEO标题协启动：AI驱动的智能对话与内容生成平台 - 提升创作效率
    协启动
    SEO摘要协启动（XieQiDong Chatbot）是由深圳协启动传媒有限公司运营的AI智能服务平台，提供多模型支持的对话服务、文档处理和图像生成工具，旨在提升用户内容创作与信息处理效率。平台支持订阅制付费，适合个人及企业用户，满足日常聊天、文案生成、学习辅助等需求。
    21次使用
  • Brev AI：零注册门槛的全功能免费AI音乐创作平台
    Brev AI
    探索Brev AI，一个无需注册即可免费使用的AI音乐创作平台，提供多功能工具如音乐生成、去人声、歌词创作等，适用于内容创作、商业配乐和个人创作，满足您的音乐需求。
    23次使用
查看更多
相关文章
关于我们 免责声明 意见反馈 联系我们 内容提交
Golang学习网：公益在线Go学习平台，帮助Go学习者快速成长！
技术交流群
Copyright 2023 http://www.17golang.com/ All Rights Reserved ｜ 苏ICP备2023003363号-1
  • Golang学习网
    关注公众号
    Golang学习网
微信登录更方便
  • 密码登录
  • 注册账号
忘记密码
登录即同意 用户协议 和 隐私政策
返回登录
  • 重置密码
发送验证码