一、文字font-size单位改成px tailwindcss 默认给开发者提供了一些文字大小相关的类 fontSize: { xs: ['0.75rem', { lineHeight: '1rem' }], sm: ['0.875rem', { lineHeight: '1.25rem' }], base: ['1rem', { lineHeight: '1.5rem' }], lg: ['1.125rem', { lineHeight: '1.75rem' }],...
Tailwind默认采用三种网络安全的字体集合,分别是sans、serif、mono 字号大小(font size) Tailwind使用text-{size}工具类设置CSS中的font-size属性,字体大小采用rem作为相对长度单位。 rem是指相对于根元素<html>的font-size计算值的大小,可简单理解为屏幕宽度的百分比。 为什么会采用rem最为字体的单位呢?因为常见px像素...
w-[5em] 5*父元素 font-size3.指定百分比、分数值 w-80 即 80% w-1/24.跟随设备值 w-full 占据父元素 100% w-screen 占据设备宽 100% w-svw、w-lvw、w-dvw 跟随视窗宽度 一般使用 w-dvw 或 h-dvh, 表示当前视窗的宽度。随着视窗大小的变化而变化,适用于大多数响应式设计场景。5...
text-6xlfont-size: 3.75rem; line-height: 1; text-7xlfont-size: 4.5rem; line-height: 1; text-8xlfont-size: 6rem; line-height: 1; text-9xlfont-size: 8rem; line-height: 1; 用法 使用text-{size}功能类控制元素的字体大小。
text-basefont-size:1rem;/* 16px */line-height:1.5rem;/* 24px */ text-lgfont-size:1.125rem;/* 18px */line-height:1.75rem;/* 28px */ text-xlfont-size:1.25rem;/* 20px */line-height:1.75rem;/* 28px */ text-2xlfont-size:1.5rem;/* 24px */line-height:2rem;/* 32px */ ...
如果你需要自定义字体大小,可以在Tailwind CSS的配置文件(通常是tailwind.config.js)中扩展theme.fontSize部分。这样,你就可以添加自己的字体大小类,并在HTML中使用它们。 示例配置: javascript module.exports = { theme: { extend: { fontSize: { 'custom-xs': '0.75rem', 'custom-sm': '0.875rem', 'cust...
- font-normal: 字体正常 - font-medium: 字体中等 - font-semibold: 字体半粗 - font-bold: 字体粗 - font-extrabold: 字体特粗 - font-black: 字体黑 3. SVG - fill-{color}: 设置 SVG 填充颜色 - stroke-{color}: 设置 SVG 描边颜色 4. 显示和隐藏 - hidden: 隐藏元素(display: none) - invi...
启用暗模式后，动态更改设计比以往更加轻松2XL超宽断点，用于1536px及以上的设计新的大纲环实用程序，几乎就像使outline-radius真品一样好实用程序友好的表单样式，一种新的表单重置，使仅使用实用程序类即可轻松自定义表单元素（甚至复选框）每个font-size的默认行高，因为如果我们不能使用48px字体的1.5行高是非法的...
font-size: 16px; border: 1px solid #000; padding: 4px; } 1. 2. 3. 4. 5. 在html 里指定 class,然后在 css 里定义这个 class 的样式。 也就是 class 里包含多个样式: 而原子化 css 是这样的写法: <div class="text-base p-1 border border-black border-solid"></div> ...