font-lightfont-weight: 300; font-normalfont-weight: 400; font-mediumfont-weight: 500; font-semiboldfont-weight: 600; font-boldfont-weight: 700; font-extraboldfont-weight: 800; font-blackfont-weight: 900; Basic usage Setting the font weight ...
Font Smoothing 用于设置字体的平滑程度 Utilities for controlling the font smoothing of an element. .antialiased反锯齿化 Font Style 用于设置字体样式 Utilities for controlling the style of text. .italic 斜体 font style <pclass="italic">This is sample of font style.</p> Font Weight 用于设置字体粗...
让我们实际构建并创建一个 css 文件,以从添加了 Tailwind 指令的 style.css 文件中读取 html。 $ % npx tailwind build ./css/style.css -o ./public/css/style.csstailwindcss2.1.2 Building: css/style.css ✅ Finished in 2.61 s Size: 3.81MB Saved to public/css/style.css 你可以看到创建的 css...
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 中的特定值,构建后会...
<h1class="text-3xl font-bold text-center mt-4">Welcome to Tailwind CSS!</h1> </body> </html> 创建CSS: npx tailwindcss -i ./src/input.css -o ./src/output.css --watch 现在,当你在浏览器中打开 index.html 时,你应该会看到一个粗体的大标题,上面写着Welcome to Tailwind CSS!
Tailwind使用.font-{weight}工具类设置CSS中font-weight属性以控制字体粗细 字间距(Letter Spacing) CSS中使用letter-spacing属性以增减字符之间的空白间距,简单来说就是用来定位在文本字符框之间插入多少空白空间。这里的letter表示是字符,如果是英文则表示一个字母,如果是中文则表示一个汉字。letter-spacing允许设置负值。
- font-[size]:表示设置元素的字号大小,[size]可以是预设的字号大小名称(如xs、sm、lg等)或者具体的像素大小(px); - font-[weight]:表示设置元素的字体粗细,[weight]可以是字体的粗细程度(如thin、normal、bold等)。 5.布局和定位类名: - flex:表示将元素设置为弹性布局; - justify-[position]:表示设置弹...
组合多个实用程序类:第 14 行中组合了多个类,即bg-green、font-weight-400和text-underline。这些样式在 Hello world 3 文本中都生效了。 实用程序类的可重用性:第 12 行和第 14 行中多次使用了text-underline类。 当然,如果想遵循这种原子 CSS 架构,就需要创建多个单一用途的实用程序类。这就是 Tailwind CSS...
@font-face { font-family: Proxima Nova; font-weight: 500; src: url(/fonts/proxima-nova/500-medium.woff) format("woff"); } } 查看完整回答 反对 回复 2023-10-10 皈依舞 TA贡献1851条经验 获得超3个赞 如果Tailwind 作为项目的依赖项安装,您可以使用npm install tailwindcss 脚步: 复制下载的字体...