源代码：
下载代码
AI 编程工具
点击运行
<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.tailwindcss.com"></script> <title>Tailwind Typography 排版示例</title> </head> <body class=" p-6"> <!-- 标题区域 --> <div class="max-w-4xl mx-auto"> <h1 class="text-3xl font-bold text-gray-900 text-center mb-6"> Tailwind CSS 排版示例 </h1> <!-- 段落区域 --> <p class="text-lg text-gray-700 leading-relaxed mb-4"> 这是一个使用 Tailwind CSS 排版工具类的完整示例。我们将使用不同的文本属性来调整字体、行高、字距、文本颜色和其他文本样式。 </p> <!-- 多段文本 --> <p class="text-base text-gray-800 leading-loose mb-6"> 通过使用 Tailwind CSS 的工具类，可以轻松实现现代、响应式的网页排版。你可以根据需要调整字体、字距、行高等样式来优化文本显示效果。 </p> <!-- 另一个段落 --> <p class="text-sm text-gray-600 tracking-wide mb-4"> Tailwind 的排版工具类使得我们无需编写自定义 CSS 样式，就可以快速实现标准化的设计。你可以使用如 <span class="font-bold">text-*</span>、<span class="font-bold">leading-*</span> 和 <span class="font-bold">tracking-*</span> 等工具类来控制文本样式。 </p> <!-- 链接文本 --> <p class="text-blue-500 underline hover:text-blue-700"> <a href="#">点击这里查看更多示例</a> </p> <!-- 响应式文本 --> <p class="text-sm sm:text-base md:text-lg lg:text-xl xl:text-2xl text-gray-900 mt-6"> 这是响应式文本，它在不同屏幕尺寸下的字体大小会发生变化。 </p> <!-- 具有删除线的文本 --> <p class="line-through text-gray-600 mt-6"> 这是具有删除线的文本，适用于显示已删除的内容。 </p> <!-- 字母间距 --> <p class="tracking-wide mt-4"> 这是宽字间距的文本，使每个字母之间有更多的空隙。 </p> <!-- 加粗文本 --> <p class="font-semibold mt-4"> 这是半粗体文本，适用于强调某些内容。 </p> <!-- 文字大小变换 --> <p class="uppercase font-semibold mt-4"> 这是全部大写的文本。所有字母都被转换为大写: runoob </p> <!-- 添加阴影的文本 --> <p class="text-shadow-lg mt-4"> 这是带有阴影效果的文本。 </p> </div> </body> </html>
运行结果：
AI 编程工具