域名 AXUM.RS 将于 2025 年 10 月到期。我们无意再对其进行续费,如果你有意接续这个域名,请与我们取得联系。
  • AXUM.RS 现仅需人民币 3000 元(大写:叁仟元整。接受适度议价
  • 按照行业规则,AXUM.RS 到期后,大概率会进入长时间的赎回期,该期间内,如果你想拥有该域名,将要付出高额的费用
  • 我们已启用 AXUM.EU.ORG 域名,并将持续运营
  • 仅接受微信或支付宝交易
如果你对 AXUM.RS 有兴趣,请和我们进行联系:

Tailwind: 通过小示例体验它

示例1

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

示例2

点击查看本小结代码

类名含义原生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:...

观后感

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

  • Tailwind 大大节省了手写 CSS 的时间
  • Tailwind 将类通过前缀的方式进行分组命名,比如
    • text-:与文本相关
    • font-:与字体相关
    • bg-:与背景相关
    • 以及其它
  • Tailwind 应该定义了尺寸,比如 text-3xlshadow-lg
  • Tailwind 贴心地提供了一些实用工具类,比如 space-x-4
  • text-:与文本相关
  • font-:与字体相关
  • bg-:与背景相关
  • 以及其它
要查看完整内容,请先登录