响应式
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