响应式
html
<div class="md:hidden">
请在大屏设备查看
</div>
<div class="hidden flex-col md:flex">
大屏视觉效果
</div><div class="md:hidden">
请在大屏设备查看
</div>
<div class="hidden flex-col md:flex">
大屏视觉效果
</div>个性化
设置颜色、宽度、line-height 示例：
css
<div class="bg-[#1da1f2] text-white p-2">
bg-[#1da1f2] text-white p-2
</div>
<div class="bg-[#1da1f2] text-white p-2 mt-2 w-[410px]">
bg-[#1da1f2] text-white p-2 mt-2 w-[410px]
</div>
<div class="border-solid border-2 border-[#419bf9] mt-2 p-2">
border-solid border-2 border-[#419bf9] mt-2 p-2
</div>
line-height:1.1 => leading-[1.1]<div class="bg-[#1da1f2] text-white p-2">
bg-[#1da1f2] text-white p-2
</div>
<div class="bg-[#1da1f2] text-white p-2 mt-2 w-[410px]">
bg-[#1da1f2] text-white p-2 mt-2 w-[410px]
</div>
<div class="border-solid border-2 border-[#419bf9] mt-2 p-2">
border-solid border-2 border-[#419bf9] mt-2 p-2
</div>
line-height:1.1 => leading-[1.1] bg-[#1da1f2] text-white p-2
bg-[#1da1f2] text-white p-2 mt-2 w-[410px]
border-solid border-2 border-[#419bf9] mt-2 p-2
important
class前面用!修饰。
mx-auto
mx-auto
多行文本省略号
例如三行： line-clamp-3
<div class="border-solid border-2 line-clamp-3">
在一个阳光明媚的早晨，一只小鸟在树枝上欢快地歌唱。它的歌声清脆动听，吸引了周围的昆虫和小动物们的注意。森林里万物复苏，花朵在微风中轻轻摇曳，散发出迷人的香气。
与此同时，在小溪旁边，一只悠闲的小松鼠正在寻找食物，它仔细地翻阅着落叶，偶尔停下身来，竖起耳朵倾听四周的动静。溪水潺潺流过，阳光照在水面上，泛起点点波光。
在远处的山坡上，一群孩子们正在快乐地玩耍，他们的笑声回荡在空气中，宛如一首动人的乐曲。大自然的美好与孩子们的欢声笑语交织在一起，构成了一幅生动的画面。
</div><div class="border-solid border-2 line-clamp-3">
在一个阳光明媚的早晨，一只小鸟在树枝上欢快地歌唱。它的歌声清脆动听，吸引了周围的昆虫和小动物们的注意。森林里万物复苏，花朵在微风中轻轻摇曳，散发出迷人的香气。
与此同时，在小溪旁边，一只悠闲的小松鼠正在寻找食物，它仔细地翻阅着落叶，偶尔停下身来，竖起耳朵倾听四周的动静。溪水潺潺流过，阳光照在水面上，泛起点点波光。
在远处的山坡上，一群孩子们正在快乐地玩耍，他们的笑声回荡在空气中，宛如一首动人的乐曲。大自然的美好与孩子们的欢声笑语交织在一起，构成了一幅生动的画面。
</div> 在一个阳光明媚的早晨，一只小鸟在树枝上欢快地歌唱。它的歌声清脆动听，吸引了周围的昆虫和小动物们的注意。森林里万物复苏，花朵在微风中轻轻摇曳，散发出迷人的香气。 与此同时，在小溪旁边，一只悠闲的小松鼠正在寻找食物，它仔细地翻阅着落叶，偶尔停下身来，竖起耳朵倾听四周的动静。溪水潺潺流过，阳光照在水面上，泛起点点波光。 在远处的山坡上，一群孩子们正在快乐地玩耍，他们的笑声回荡在空气中，宛如一首动人的乐曲。大自然的美好与孩子们的欢声笑语交织在一起，构成了一幅生动的画面。
伪类
字体
动画过渡
text-xs 12px/0.75rem
text-sm 14px/0.875rem
text-base 16px
text-lg 18px
text-xl 20
text-2xl 24
text-3xl. 30
text-4xl 36
text-5xl 48
text-6xl 60
text-7xl 72
text-8xl 96
text-9xl 128