Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

<article class="max-w-2xl mx-auto px-4 py-8 space-y-4">

<p class="text-xs font-semibold uppercase tracking-widest text-blue-600">
    Tutorial
  </p>

<h1 class="text-4xl lg:text-5xl font-extrabold leading-tight text-gray-900">
    Mastering Tailwind CSS Typography
  </h1>

<p class="text-xl text-gray-500 leading-relaxed font-light">
    A comprehensive guide to building beautiful typographic layouts
    using Tailwind's utility classes.
  </p>

<hr class="border-gray-200" />

<p class="text-base text-gray-700 leading-7">
    Tailwind ships a carefully tuned type scale. Each step on the scale
    is designed to pair well with the spacing and sizing values throughout
    the rest of the framework, keeping your designs consistent by default.
  </p>

<h2 class="text-2xl font-bold text-gray-800 mt-6">Font Weight Examples</h2>

<ul class="space-y-1 text-gray-700">
    <li class="font-thin">font-thin — 100</li>
    <li class="font-extralight">font-extralight — 200</li>
    <li class="font-light">font-light — 300</li>
    <li class="font-normal">font-normal — 400</li>
    <li class="font-medium">font-medium — 500</li>
    <li class="font-semibold">font-semibold — 600</li>
    <li class="font-bold">font-bold — 700</li>
    <li class="font-extrabold">font-extrabold — 800</li>
    <li class="font-black">font-black — 900</li>
  </ul>
</article>