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-size 是 1.87rem？别急，下一章告诉你。

示例2

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
  <div class="shrink-0">
    <img class="h-12 w-12" src="https://file.axum.rs/asset/logo.png" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-slate-500">You have a new message!</p>
  </div>
</div>

类名	含义	原生CSS
p-6	内边距为 6	padding: 1.5rem;
max-w-sm	将 max-width 设置为 sm	max-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	设置高度为 12	height: 3rem;
w-12	设置宽度为 12	width: 3rem;
text-xl	设置文字大小为 xl	font-size: 1.25rem;line-height: 1.75rem;
font-medium	设置中等字号	font-weight: 500
text-black	设置文字颜色为 black	color:...（内容太多，不写了，下同）
text-slate-500	设置文字颜色为 slate-500	color:...

观后感

• Tailwind 大大节省了手写 CSS 的时间
• Tailwind 将类通过前缀的方式进行分组命名，比如
  • text-：与文本相关
  • font-：与字体相关
  • bg-：与背景相关
  • 以及其它
• Tailwind 应该定义了尺寸，比如 text-3xl、shadow-lg 等
• Tailwind 贴心地提供了一些实用工具类，比如 space-x-4等