百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

第二章:基础概念精讲 - 第四节 - Tailwind CSS 排版和文本样式

myzbx 2025-03-07 22:16 19 浏览

字体系统

1. 字体系列

// tailwind.config.js 默认字体配置
module.exports = {
    theme: {
        fontFamily: {
            'sans': ['ui-sans-serif', 'system-ui', '-apple-system', 'BlinkMacSystemFont'],
            'serif': ['ui-serif', 'Georgia'],
            'mono': ['ui-monospace', 'SFMono-Regular'],
// 自定义字体
            'display': ['Oswald'],
            'body': ['Open Sans'],
        }
    }
}

2. 字体使用


系统无衬线字体
衬线字体
等宽字体

展示型标题

正文内容

文本样式

1. 字体大小


超大标题

大标题

中标题

小标题

正文文本

小号文本 超小文本

2. 字重控制


极细体 100

细体 300

常规体 400

中等体 500

半粗体 600

粗体 700

特粗体 800

黑体 900

3. 文本对齐


左对齐文本

居中文本

右对齐文本

两端对齐文本

4. 文本装饰


下划线文本

上划线文本

删除线文本

无装饰文本

自定义下划线

高级排版特性

1. 行高控制


紧凑行高

较紧行高

正常行高

宽松行高

超宽行高

2rem 行高

2. 字间距


较紧字间距

正常字间距

宽字间距

Word Spacing Example

3. 文本溢出处理


这是一段很长的文本,将会被截断并显示省略号...

这是一段很长的多行文本,超过两行的部分将被截断并显示省略号...

响应式排版

1. 断点适配


响应式标题

响应式行高文本

2. 文本对齐响应式


在不同屏幕尺寸下改变对齐方式的文本

富文本排版

1. 使用 @apply

/* 富文本样式 */
.prose h1 {
    @apply text-3xl font-bold mb-4;
}

.prose p {
    @apply text-gray-700 leading-relaxed mb-4;
}

.prose a {
    @apply text-blue-600 hover:text-blue-800 underline;
}

2. 列表样式


  1. 第一项
  2. 第二项
  3. 第三项
  • 项目一
  • 项目二
  • 项目三

特殊效果

1. 渐变文本


渐变文本效果

2. 文本阴影


带阴影的文本

最佳实践

1. 排版规范

  • 建立清晰的标题层级
  • 保持一致的行高和间距
  • 确保文本可读性

2. 响应式策略

  • 使用相对单位
  • 设置合适的断点
  • 考虑移动设备可读性

3. 性能优化

  • 合理使用字体加载
  • 避免过多字体变体
  • 优化文本渲染

总结

Tailwind CSS 的排版和文本样式系统提供了:

  1. 完整的字体控制
  2. 丰富的文本样式
  3. 灵活的响应式设计
  4. 强大的特效支持

通过合理运用这些特性,我们可以:

  1. 创建专业的排版效果
  2. 确保跨设备的可读性
  3. 提升用户体验
  4. 保持设计的一致性

在实际开发中,应该建立统一的排版规范,并在保证可读性的前提下,灵活运用各种排版特性。

相关推荐

砌体植筋拉拔试验检验值到底是6.0KN,还是10.2KN,如何计算确定

砌体拉结筋植筋养护完成后,需对所植钢筋进行拉拔试验,以检验植筋的锚固强度是否满足设计要求。检测时,按照一定的抽样比例进行拉拔试验。根据《混凝土结构后锚固技术规程》JGJ145-2013,以同品种、同...

柴油机功率如何计算?计算柴油机功率需要哪些参数?

在汽车领域,对于柴油机功率的计算是一项重要的工作,它有助于我们更好地了解柴油机的性能和适用场景。下面我们就来详细探讨一下柴油机功率的计算方法以及所需的参数。首先,我们要了解计算柴油机功率常用的公式。在...

变压器短路阻抗的作用和计算方法(变压器短路阻抗的作用和计算方法是什么)

变压器短路阻抗的作用和计算方法短路阻抗是在负载试验中测量的一项数据,它是二次侧短接并流过额定电流时,一次侧施加的电压与额定电压的的百分数。那么测量变压器的短路阻抗有什么意义呢?其实变压器的阻抗电压乃是...

9.35m层高高支模支撑架计算书(支模架多高属于高支模)

某工厂新扩建的建筑面积为1989.2m^2,建筑物总体分为2层,但局部为4层。建筑物檐高19.4m,建筑物总高23m。建筑物呈长方形设置,长度为48.20m,宽度为23.88m,结构形式为框架结构...

吊篮(悬挂装置前梁加长)安全复核计算书

吊篮(悬挂装置前梁加长)安全复核计算书一种超常规搭设的高处作业吊篮,因使用要求将吊篮悬挂装置前梁加长设置,本计算书针对这种工况的校核,以作参考。计算依据:1、《高处作业吊篮》GB/T19155-...

电功率计算公式精编汇总(电功率计算视频讲解)

一、电功率计算公式:1在纯直流电路中:P=UIP=I2RP=U2/R式中:P---电功率(W),U---电压(V),I----电流(A),R---电阻(Ω)。2在单相交流电路中:P=UIcosφ...

灌注桩承载力检测方法及步骤(灌注桩承载力不够怎么办)

检测灌注桩的承载力是确保基础工程安全可靠的关键环节,检测结果的精细能准确为我们提供可靠的数据,让我们能准确判断桩基础的承载力,方便后续施工安排,同样也能让我们根据数据分辨出有问题桩基,采取可靠有效的措...

很哇塞的体积计算方法:向量叉乘 很哇塞的体积计算方法

高中数学必看:向量叉乘,体积的神。大家都知道a、b的向量是什么意思,但是a、b的向量又是什么?很多同学都不知道,向量的向量在高中阶段非常有用,虽然它是大学的知识,在高中阶段可以干两件事。·第一件事,表...

施工升降机基础(设置在地库顶板回顶)计算书

施工升降机基础(设置在地库顶板回顶)计算书计算依据:1、《施工现场设施安全设计计算手册》谢建民编著2、《建筑地基基础设计规范》GB50007-20113、《混凝土结构设计标准》GB/T50010-2...

剪力墙水平钢筋根数如何计算?(剪力墙水平钢筋绑扎搭接规范)

剪力墙水平钢筋根数的计算需综合考虑墙高、起步距离、间距及构造要求等因素,具体步骤如下及依据:1.基本计算公式水平钢筋根数计算公式为:根数=(墙高-起步距离)/间距(墙高-起步距离)/间距...

直流电路常用计算公式(直流电路常用计算公式有哪些)

1、电阻导体阻碍电流通过的能力叫做电阻,用字母R表示,单位欧(Ω)。R=ρl/s式中R-导体的电阻,欧(Ω);ρ-导体的电阻率,欧·米(Ω·m);l-导体的长度,米(m);s-导体的截面积,平方米(m...

电气主电路图的绘制特点(电气原理图主电路)

1、电气主电路图中的电气设备、元件,如电源进线、变压器、隔离开关、断路器、熔断器、避雷器等都垂直绘制,而母线则水平绘制。电气主电路图除特殊情况外,几乎无一例外地画成单线图,并以母线为核心将各个项目(如...

中考总复习:物理专题 功和机械能 (功的计算、功率、动能、势能)

中考物理专题:功与机械能解析一、力学中的功——能量转化的桥梁功是力对物体能量变化的量度,需满足两要素:作用在物体上的力、物体沿力方向移动距离。例如推箱子时,若箱子未移动,推力不做功;若箱子滑动,推力做...

40亿QQ号,不超过1G内存,如何去重?

分享一道网上很火的面试题:40亿QQ号,不超过1G的内存,如何去重?这是一个非常经典的海量数据去重问题,并且做了内存限制,最多只能1GB,本文跟大家探讨一下~~一、常规思路我们日常开发中,如果谈到去重...

填充墙体拉结筋植筋深度、孔径、拉拔试验承载力计算!

今天分享下植筋间距及保护层要求:根据JGJ145-2013混凝土后锚固技术规程要求植筋与混凝土结构边缘不应小于5mm,植筋为两根及以上时水平间距为不应小于5d(d为钢筋直径)。根据混凝土结构后锚固技...