font-normal font-weight: 400; font-medium font-weight: 500; font-semibold font-weight: 600; font-bold font-weight: 700; font-extrabold font-weight: 800; font-black font-weight: 900; Functionality Of Tailwind CSS Font Weight Classes font-thin: Applies a weight of '100' to the text, mak...
将字体上传到网站放到指定目录下,如 resources/font/方正鲁迅简体改个名.ttf 第二步:在css文件中导入本字体 # /www/livewire-tutorial/01/resources/sass/app.scss样式文件 @tailwind base; @tailwind components; @tailwind utilities; @layer base { @font-face { font-family: Sui Bian; font-weight: 400;...
.font-extralight (font-weight: 200;) .font-light (font-weight: 300;) .font-normal (font-weight: 400;) .font-medium (font-weight: 500;) .font-semibold (font-weight: 600;) .font-bold(font-weight:700;) .font-extrabold(font-weight:800;) .font-black(font-weight:900;) <div class="...
italic 即 font-style: italic; font-thin 即 font-weight: 100; font-light 即 font-weight: 300; font-normal 即 font-weight: 400; font-bold 即 font-weight: 700; font-black 即 font-weight: 900;6. 颜色 透明 渐变<p className="text-red-500">islandZzz -- 文本颜色</p> <p className="...
font-{weight}:设置字体重量。 text-{color}:设置文字颜色。 uppercase, lowercase, capitalize:转换文本大小写。 举例说明: <p> Styled text </p> Tailwind Colors Tailwind CSS 提供了可自定义的默认调色板。颜色由颜色名称和阴影组合而成。 bg-{color}-{shade}:设置背景颜色。
@font-face 规则 您可以使用相同的方式为您正在使用的任何自定义字体添加@font-face规则。 @tailwindbase;@tailwindcomponents;@tailwindutilities;@layerbase{@font-face{font-family:Proxima Nova;font-weight:400;src:url(/fonts/proxima-nova/400-regular.woff)format("woff");}@font-face{font-family:Proxima ...
Utilities for controlling the font weight of an element. ClassStyles font-thin font-weight: 100; font-extralight font-weight: 200; font-light font-weight: 300; font-normal font-weight: 400; font-medium font-weight: 500; font-semibold ...
组合多个实用程序类:第 14 行中组合了多个类,即bg-green、font-weight-400和text-underline。这些样式在 Hello world 3 文本中都生效了。 实用程序类的可重用性:第 12 行和第 14 行中多次使用了text-underline类。 当然,如果想遵循这种原子 CSS 架构,就需要创建多个单一用途的实用程序类。这就是 Tailwind CSS...
组合多个实用程序类:第 14 行中组合了多个类,即bg-green、font-weight-400和text-underline。这些样式在 Hello world 3 文本中都生效了。 实用程序类的可重用性:第 12 行和第 14 行中多次使用了 text-underline 类。 当然,如果想遵循这种原子 CSS 架构,就需要创建多个单一用途的实用程序类。这就是 Tailwind ...
font-light 表示 font-weight: 300; font-normal 表示 font-weight: 400; font-bold 表示 font-weight: 700; font-black 表示 font-weight: 900; 复制 <div class="bg-blue-600 w-[300px] h-[300px]"> <p class="text-[20px] font-bold">好好学习</p> ...