1. 颜色 - text-{color}: 设置文本颜色 - bg-{color}: 设置背景颜色 - border-{color}: 设置边框颜色 2. 字体权重 - font-thin: 字体细 - font-light: 字体轻 - font-normal: 字体正常 - font-medium: 字体中等 - font-semibold: 字体半粗 - font-bold: 字体粗 - font-extrabold: 字体特粗 - ...
示例: • font-bold: 文本加粗 • text-xl: 文本大小为大号 • italic: 文本斜体 3.1.5 定位类 定位类用于控制元素的位置。示例: • absolute: 绝对定位 • top-0: 距离顶部距离为 0 • left-4: 距离左侧距离为 1rem 3.1.6 显示/隐藏类 显示/隐藏类用于控制元素的可见性。示例: • hidden...
text-white: 文本颜色白色 bg-blue-500: 背景颜色为蓝色 border-gray-300: 边框颜色为灰色 3.1.3 尺寸类 尺寸类用于调整元素的大小、内边距和外边距。示例: w-64: 宽度为 p-4: 内边距为 m-2: 外边距为 3.1.4 字体类 字体类用于调整文本的字体样式。示例: font-bold: 文本加粗 text-xl: 文本大小为大...
text-white:将文字颜色设为白色。 py-4:为页眉的顶部和底部添加填充。 容器mx-auto:使导航菜单水平居中。 flexjust-between-items-center:使用 flexbox 均衡徽标和菜单项的间距,并使其垂直对齐。 text-2xl font-bold:使徽标文字变大并加粗。 flex space-x-4:使用 flexbox 在菜单项之间添加间距。 hover:text-...
@apply text-4xl font-bold; } } @layer components{ .btn-danger{ @apply rounded-lg } } @layer directives{ .flex-center{ @apply items-center } } 3.暗模式 //Tailwindcss.config export default{ darkMode:”class” } class是指在一些前端框架或库...
在这个例子中,我们使用了 text-4xl 和 font-bold 来将字体设置为大号和粗体。而 font-mono 则是用来指定为等宽字体。 在每个数字 span 标签中使用了 h-8 和 w-8 来指定这个标签的高度和宽度为都为 8px。同时,我们使用了 text-red-500,text-green-500 和 text-blue-500 这些类来为每个数字指定不同的颜...
What is this, an Apple website? 而且，我们还将默认的不透明度比例扩展为10，以及5和95的值：<blockquote>You can't see me.</blockquote>John Cena 仔细阅读整个默认配置文件，以查看可用的确切信息。任何东西都使用@apply 到目前为止，我多年来最常见的问题是“为什么不起作用@apply hover:bg-black？”...
text-lg:18px text-xl: 20px文本对齐方式text-left 即 text-align:left text-center、text-right、text-justify 同理加粗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...
Tailwind CSS 4.0 正式发布:全球最火的CSS框架! 架构 架构
文本颜色类:如text-red-500(文本颜色为红色500)、text-black(文本颜色为黑色)等。 文本大小类:如text-xl(文本大小为大号字体)、text-sm(文本大小为小号字体)等。 字体粗细类:如font-bold(使用粗体字体)、font-light(使用细体字体)等。 行间距类:如leading-6(行间距为6)等。