<p class="text-xs ...">The quick brown fox ...</p> <p class="text-sm ...">The quick brown fox ...</p> <p class="text-base ...">The quick brown fox ...</p> <p class="text-lg ...">The quick brown fox ...</p> <p class="text-xl ...">The quick brown fox ...</p> <p class="text-2xl ...">The quick brown fox ...</p> <p class="text-3xl ...">The quick brown fox ...</p> <p class="text-4xl ...">The quick brown fox ...</p> <p class="text-5xl ...">The quick brown fox ...</p> <p class="text-6xl ...">The quick brown fox ...</p> <p class="text-7xl ...">The quick brown fox ...</p> <p class="text-8xl ...">The quick brown fox ...</p> <p class="text-9xl ...">The quick brown fox ...</p>

tailwind text size

<div class="text-base">TEXT</div>

tailwind text size

123456789101112131415161718192021222324252627282930313233<ul class="space-y-4"> <li> <div class="w-64 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div> </li> <li> <div class="w-56 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div> </li> <li> <div class="w-48 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div> </li> <li> <div class="w-40 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div> </li> <li> <div class="w-32 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div> </li> <li> <div class="w-24 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div> </li> <li> <div class="w-20 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div> </li> <li> <div class="w-16 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div> </li> <li> <div class="w-12 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div> </li> <li> <div class="w-10 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div> </li></ul>

tailwind sizing