Skip to content

0x03f-taiwindcss-tips

响应式

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