Tailwind CSS 排版 #

<!-- 无衬线字体（默认） -->
<p class="font-sans">无衬线字体</p>

<!-- 衬线字体 -->
<p class="font-serif">衬线字体</p>

<!-- 等宽字体 -->
<p class="font-mono">等宽字体</code>

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'display': ['Helvetica Neue', 'sans-serif'],
        'body': ['Georgia', 'serif'],
      },
    },
  },
}

<p class="font-display">自定义显示字体</p>
<p class="font-body">自定义正文字体</p>

<p class="text-xs">极小 (12px)</p>
<p class="text-sm">小 (14px)</p>
<p class="text-base">基础 (16px)</p>
<p class="text-lg">大 (18px)</p>
<p class="text-xl">超大 (20px)</p>
<p class="text-2xl">2xl (24px)</p>
<p class="text-3xl">3xl (30px)</p>
<p class="text-4xl">4xl (36px)</p>
<p class="text-5xl">5xl (48px)</p>
<p class="text-6xl">6xl (60px)</p>
<p class="text-7xl">7xl (72px)</p>
<p class="text-8xl">8xl (96px)</p>
<p class="text-9xl">9xl (128px)</p>

<p class="text-[14px]">自定义 14px</p>
<p class="text-[1.5rem]">自定义 1.5rem</p>

<p class="font-thin">细体 (100)</p>
<p class="font-extralight">特细 (200)</p>
<p class="font-light">轻 (300)</p>
<p class="font-normal">正常 (400)</p>
<p class="font-medium">中等 (500)</p>
<p class="font-semibold">半粗 (600)</p>
<p class="font-bold">粗体 (700)</p>
<p class="font-extrabold">特粗 (800)</p>
<p class="font-black">黑体 (900)</p>

<p class="italic">斜体</p>
<p class="not-italic">非斜体</p>

<p class="leading-none">行高 1</p>
<p class="leading-tight">行高 1.25</p>
<p class="leading-snug">行高 1.375</p>
<p class="leading-normal">行高 1.5（默认）</p>
<p class="leading-relaxed">行高 1.625</p>
<p class="leading-loose">行高 2</p>

<!-- 数值行高 -->
<p class="leading-3">行高 0.75rem</p>
<p class="leading-4">行高 1rem</p>
<p class="leading-5">行高 1.25rem</p>
<p class="leading-6">行高 1.5rem</p>
<p class="leading-7">行高 1.75rem</p>
<p class="leading-8">行高 2rem</p>
<p class="leading-9">行高 2.25rem</p>
<p class="leading-10">行高 2.5rem</p>

<p class="tracking-tighter">更紧凑 (-0.05em)</p>
<p class="tracking-tight">紧凑 (-0.025em)</p>
<p class="tracking-normal">正常 (0)</p>
<p class="tracking-wide">宽松 (0.025em)</p>
<p class="tracking-wider">更宽松 (0.05em)</p>
<p class="tracking-widest">最宽松 (0.1em)</p>

<!-- 使用颜色调色板 -->
<p class="text-black">黑色</p>
<p class="text-white">白色</p>
<p class="text-gray-500">灰色</p>
<p class="text-red-500">红色</p>
<p class="text-blue-500">蓝色</p>
<p class="text-green-500">绿色</p>

<!-- 任意颜色 -->
<p class="text-[#1da1f2]">自定义颜色</p>

<!-- 透明度 -->
<p class="text-blue-500/50">50% 透明度</p>
<p class="text-blue-500/75">75% 透明度</p>

<p class="text-left">左对齐</p>
<p class="text-center">居中对齐</p>
<p class="text-right">右对齐</p>
<p class="text-justify">两端对齐</p>
<p class="text-start">起始对齐</p>
<p class="text-end">结束对齐</p>

<p class="text-center md:text-left">
  移动端居中，桌面端左对齐
</p>

<p class="underline">下划线</p>
<p class="overline">上划线</p>
<p class="line-through">删除线</p>
<p class="no-underline">无装饰线</p>

<p class="underline decoration-blue-500">蓝色下划线</p>
<p class="underline decoration-red-500">红色下划线</p>

<p class="underline decoration-solid">实线</p>
<p class="underline decoration-double">双线</p>
<p class="underline decoration-dotted">点线</p>
<p class="underline decoration-dashed">虚线</p>
<p class="underline decoration-wavy">波浪线</p>

<p class="underline decoration-1">1px</p>
<p class="underline decoration-2">2px</p>
<p class="underline decoration-4">4px</p>

<p class="underline underline-offset-1">偏移 1</p>
<p class="underline underline-offset-2">偏移 2</p>
<p class="underline underline-offset-4">偏移 4</p>
<p class="underline underline-offset-auto">自动偏移</p>

<p class="uppercase">大写字母</p>
<p class="lowercase">小写字母</p>
<p class="capitalize">首字母大写</p>
<p class="normal-case">正常大小写</p>

<!-- 单行截断 -->
<p class="truncate w-64">
  这是一段很长的文本，会被截断显示省略号
</p>

<!-- 文本溢出：剪裁 -->
<p class="overflow-hidden text-clip w-64">
  这是一段很长的文本
</p>

<!-- 文本溢出：省略号 -->
<p class="overflow-hidden text-ellipsis whitespace-nowrap w-64">
  这是一段很长的文本，会显示省略号
</p>

<p class="whitespace-normal">正常换行</p>
<p class="whitespace-nowrap">不换行</p>
<p class="whitespace-pre">保留空白</p>
<p class="whitespace-pre-line">保留换行</p>
<p class="whitespace-pre-wrap">保留空白和换行</p>
<p class="whitespace-break-spaces">保留所有空白</p>

<p class="break-normal">正常换行</p>
<p class="break-words">单词内换行</p>
<p class="break-all">任意位置换行</p>
<p class="break-keep">保持单词完整（CJK）</p>

<span class="align-baseline">基线对齐</span>
<span class="align-top">顶部对齐</span>
<span class="align-middle">居中对齐</span>
<span class="align-bottom">底部对齐</span>
<span class="align-text-top">文本顶部对齐</span>
<span class="align-text-bottom">文本底部对齐</span>
<span class="align-sub">下标对齐</span>
<span class="align-super">上标对齐</span>

<ul class="list-disc list-inside">
  <li>无序列表项</li>
  <li>无序列表项</li>
</ul>

<ol class="list-decimal list-inside">
  <li>有序列表项</li>
  <li>有序列表项</li>
</ol>

<ul class="list-none">
  <li>无标记列表</li>
</ul>

<ul class="list-disc list-inside">
  <li>标记在内部</li>
</ul>

<ul class="list-disc list-outside ml-4">
  <li>标记在外部</li>
</ul>

<p class="indent-0">无缩进</p>
<p class="indent-4">缩进 1rem</p>
<p class="indent-8">缩进 2rem</p>
<p class="indent-[2em]">缩进 2em</p>

<p class="text-left ltr">从左到右</p>
<p class="text-right rtl">从右到左</p>

<div class="content-none">无内容</div>

<article class="prose prose-lg max-w-none">
  <h1 class="text-3xl font-bold mb-4">文章标题</h1>
  <p class="text-gray-600 mb-2">
    <span class="font-medium">作者</span> · 2024年1月1日
  </p>
  <div class="text-gray-700 leading-relaxed space-y-4">
    <p>这是文章的第一段内容。使用适当的行高和间距可以提高阅读体验。</p>
    <p>这是文章的第二段内容。段落之间使用间距分隔，让内容更清晰。</p>
    <blockquote class="border-l-4 border-gray-300 pl-4 italic text-gray-600">
      这是一段引用文字，使用左边框和斜体样式突出显示。
    </blockquote>
  </div>
</article>

<span class="inline-block px-2 py-1 text-xs font-semibold text-white bg-blue-500 rounded">
  标签
</span>

<span class="inline-block px-2 py-1 text-xs font-semibold text-blue-700 bg-blue-100 rounded-full">
  胶囊标签
</span>

<div class="flex items-baseline">
  <span class="text-3xl font-bold text-gray-900">¥99</span>
  <span class="text-sm text-gray-500 line-through ml-2">¥199</span>
</div>

<code class="px-2 py-1 text-sm font-mono bg-gray-100 text-pink-600 rounded">
  console.log('Hello')
</code>

<pre class="p-4 bg-gray-900 text-gray-100 rounded-lg overflow-x-auto">
  <code class="text-sm font-mono">
function hello() {
  console.log('Hello, World!')
}
  </code>
</pre>

<a href="#" class="text-blue-600 hover:text-blue-800 underline">
  普通链接
</a>

<a href="#" class="text-blue-600 hover:underline">
  悬停显示下划线
</a>

<a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">
  无下划线链接
</a>