域名 AXUM.RS 将于2025年10月到期。我们无意再对其进行续费,我们希望你能够接续这个域名,让更多 AXUM 开发者继续受益。
  • 方案1️⃣AXUM.RS 域名 = 3000
  • 方案2️⃣方案1️⃣ + 本站所有专题原始 Markdown 文档 = 5000
  • 方案3️⃣方案2️⃣ + 本站原始数据库 = 5500
如果你有意接续这份 AXUM 情怀,请与我们取得联系。
说明:
  1. 如果有人购买 AXUM.RS 域名(方案1️⃣),或者该域名到期,本站将启用新的免费域名继续提供服务。
  2. 如果有人购买了 AXUM.RS 域名,且同时购买了内容和/或数据库(方案2️⃣/方案3️⃣),本站将关闭。届时我们或许会以另一种方式与你再相遇。

Tailwind: 通过小示例体验它

本章通过两个小示例来体验一下 tailwind 的魔力。

示例1

<h1 class="text-3xl font-bold underline">
  你好,axum.rs!
</h1>

点击查看本小结代码

类名含义原生CSS
text-3xl将文字大小设置为 3xl font-size: 1.875rem;line-height: 2.25rem;
font-bold将文字设置为粗体font-weight: 700;
underline给文字设置下线线text-decoration-line: underline;
  • text-3xl
    • 不仅设置了 font-size,还设置了 line-height
    • 为毛 3xl它设置的 font-size1.87rem?别急,下一章告诉你。

点击查看本小结代码

类名含义原生CSS
p-6内边距为 6padding: 1.5rem;
max-w-smmax-width 设置为 smmax-width: 24rem;
mx-auto水平方向外边距设为 auto(实现水平居中)margin-left: auto;margin-right: auto;
bg-white背景色设置为white--tw-bg-opacity: 1;background-color: rgb(255 255 255 / var(--tw-bg-opacity));
rounded-xl设置大小为 xl 的圆角 border-radius: 0.75rem
shadow-lg设置大小为 lg 的阴影box-shadow....(内容太多,不写了)
flex开启弹性布局display: flex;
items-center弹性布局的子元素,垂直居中align-items: center
space-x-4弹性布局的子元素之间,水平间距为 4这是 Tailwind 提供的工具类,原理是通过设置伪类的水平外边距的值
shrink-0弹性布局中,(当视口变小时)不对该元素进行收缩flex-shrink: 0;
h-12设置高度为 12height: 3rem;
w-12设置宽度为 12width: 3rem;
text-xl设置文字大小为 xlfont-size: 1.25rem;line-height: 1.75rem;
font-medium设置中等字号font-weight: 500
text-black设置文字颜色为 blackcolor:...(内容太多,不写了,下同)
text-slate-500设置文字颜色为 slate-500color:...

观后感

通过以上两个小示例,你有什么感觉?我觉得:

要查看完整内容,请先登录