Tailwind Typography

排版样式

Typography

标题（heading）

标题

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">

<div class="container mx-auto my-12 p-4 bg-gray-100">
  <h1 class="mt-0 mb-2 leading-normal text-6xl text-gray-800 font-normal">heading one</h1>
  <h2 class="mt-0 mb-2 leading-normal text-5xl text-gray-800 font-normal">heading two</h2>
  <h3 class="mt-0 mb-2 leading-normal text-4xl text-gray-800 font-normal">heading three</h3>
  <h4 class="mt-0 mb-2 leading-normal text-3xl text-gray-800 font-normal">heading four</h4>
  <h5 class="mt-0 mb-2 leading-normal text-2xl text-gray-800 font-normal">heading five</h5>
  <h6 class="mt-0 mb-2 leading-normal text-1xl text-gray-800 font-normal">heading six</h6>
</div>

样式	属性
mt-0 mb-2	margin-top:0; mrgin-bottom:.25rem;
leading-normal	-
text-6xl text-gray-800 font-normal	-

段落（paragraph）

paragraph

<p class="mt-0 mb-4 leading-relaxed text-base font-light text-gray-800">
段落文字样式段落文字样式段落文字样式段落文字样式段落文字样式段落文字样式段落文字样式段落文字样式
</p>

样式	属性
mt-0 mb-4	margin-top:0; margin-bottom:1rem;
leading-relaxed	-
text-base	-
font-light	-
text-gray-800	-

引导（lead text）

lead text

<p class="mt-6 mb-4 leading-relaxed text-lg font-light text-gray-800">
引导文引导文引导文引导文引导文引导文引导文引导文引导文引导文引导文引导文引导文引导文引导文引导文
</p>

样式	属性
mt-6 mb-4	margin-top:1.25rem; margin-bottom:1rem;
leading-relaxed	-
text-lg	-
font-light	-
text-gray-800	-

引用（Quote）

quote

<p class="mt-0 mb-0 leading-normal font-normal text-gray-800">
引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引
</p>
<quote class="block text-gray-800">
- 来自于 <cite>标题</cite>
</quote>

小型文本（small）

small

<small class="mt-0 mb-4 leading-normal font-normal text-gray-800">
小号段落文字小号段落文字小号段落文字小号段落文字小号段落文字小号段落文字小号段落文字小号段落文字
</small>

源代码

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">

<div class="container mx-auto my-12 p-4 bg-gray-100">
  <h1 class="mt-0 mb-2 leading-normal text-6xl text-gray-800 font-normal">一级标题</h1>
  <h2 class="mt-0 mb-2 leading-normal text-5xl text-gray-800 font-normal">二级标题</h2>
  <h3 class="mt-0 mb-2 leading-normal text-4xl text-gray-800 font-normal">三级标题</h3>
  <h4 class="mt-0 mb-2 leading-normal text-3xl text-gray-800 font-normal">四级标题</h4>
  <h5 class="mt-0 mb-2 leading-normal text-2xl text-gray-800 font-normal">五级标题</h5>
  <h6 class="mt-0 mb-2 leading-normal text-1xl text-gray-800 font-normal">六级标题</h6>
  
  <p class="mt-0 mb-4 leading-relaxed text-base font-light text-gray-800">
    段落文字样式段落文字样式段落文字样式段落文字样式段落文字样式段落文字样式段落文字样式段落文字样式
  </p>
  
  <p class="mt-6 mb-4 leading-relaxed text-lg font-light text-gray-800">
    引导文引导文引导文引导文引导文引导文引导文引导文引导文引导文引导文引导文引导文引导文引导文引导文
  </p>
  
  <p class="mt-0 mb-0 leading-normal font-normal text-gray-800">
    引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引
  </p>
  <quote class="block text-gray-800">
    - 来自于 <cite>标题</cite>
  </quote>
  
  <small class="mt-0 mb-4 leading-normal font-normal text-gray-800">
    小号段落文字小号段落文字小号段落文字小号段落文字小号段落文字小号段落文字小号段落文字小号段落文字
  </small>
</div>