字体粗细可以通过font-*工具类来控制,Tailwind 提供了从font-thin到font-black的多种粗细选项。 常用工具类: font-thin: 超细字体 font-light: 轻字体 font-normal: 普通字体 font-medium: 中等粗细字体 font-semibold: 半粗字体 font-bold: 粗体 font-extrabold: 更粗字体 ...
在HTML代码中使用相应的Tailwind CSS类: 要在HTML元素中应用字体加粗,只需在元素的class属性中添加相应的Tailwind CSS类名。例如,要将某个段落文本的字体加粗,可以使用font-bold类: html <p class="font-bold">这是加粗的文本</p> 类似地,你也可以使用其他字体粗细类名来设置不同的字体粗细...
-- Using utilities: --><buttonclass="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">Button</button><!-- Extracting component classes: --><buttonclass="btn btn-blue">Button</button><style>.btn{@applyfont-bold py-2 px-4 rounded;}.btn-blue{@applybg-blue-...
• font-bold: 文本加粗 • text-xl: 文本大小为大号 • italic: 文本斜体 3.1.5 定位类 定位类用于控制元素的位置。示例: • absolute: 绝对定位 • top-0: 距离顶部距离为 0 • left-4: 距离左侧距离为 1rem 3.1.6 显示/隐藏类 显示/隐藏类用于控制元素的可见性。示例: • hidden: 元素...
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-size: 2rem; } } @layer components { btn-blue { @apply bg-blue-500 px-4 py-2 rounded-xl font-bold hover:bg-blue-700; } } @config:用于指定 Tailwind 在编译该 CSS 文件时应使用的配置文件 @config "./tailwind.input.config.js"; b. 函数 函数用于访问 Tailwind 中的特定值,构建后会...
bold underline">一个程序员的异常,开启TailWindCSS 学习之旅</h1><buttonclass="bg-green-400 font-semibold text-white py-2 px-4 rounded hover:bg-green-700">北封</button><buttonclass="bg-green-400 font-semibold text-white py-2 px-4 rounded hover:bg-green-700">北封</button></body></...
// 我们在之前的步骤中,已经在其中引入了 tailwind 指令import"./App.css";functionApp(){return(<><h1 className="text-3xl font-bold underline">前端柒八九</h1></>);}exportdefaultApp; 随后,我们就可以使用yarn dev进行本地项目的部署和查验了。
使用Tailwind 时,也可以结合 CSS 变量来实现更灵活的设计。例如,定义一个颜色变量,并在 Tailwind 中使用: :root { --primary-color: #3490dc; } .btn { @apply bg-[var(--primary-color)] text-white font-bold py-2 px-4 rounded; } <button class="btn"> Custom Button </button> 总结 Tailwind...
<h1class="text-3xl font-bold underline"> 一个程序员的异常,开启TailWindCSS 学习之旅 </h1> <buttonclass="bg-green-400 font-semibold text-white py-2 px-4 rounded hover:bg-green-700">北封</button> <buttonclass="bg-green-400 font-semibold text-white py-2 px-4 rounded hover:bg-green-...