Text Alignment, Decoration, and Transform Utilities

<!-- Text alignment responsive -->
<p class="text-center md:text-left text-gray-600">
  Centered on mobile, left-aligned on desktop
</p>

<!-- Decorations: underline with custom style -->
<a href="#"
   class="underline decoration-blue-500 decoration-2 underline-offset-4
          hover:decoration-wavy hover:decoration-blue-700 transition-all">
  Styled link underline
</a>

<!-- Strikethrough for old price -->
<div class="flex items-center gap-3">
  <span class="line-through text-gray-400 text-sm">$99</span>
  <span class="text-2xl font-bold text-green-600">$49</span>
  <span class="bg-red-100 text-red-600 text-xs font-semibold px-2 py-0.5 rounded">50% OFF</span>
</div>

<!-- Text transform for badges and labels -->
<span class="uppercase tracking-wider text-xs font-bold text-purple-700 bg-purple-100 px-2 py-1 rounded">
  New Feature
</span>

<!-- Line clamp for card previews (v3.3+ built-in) -->
<div class="max-w-sm bg-white rounded-xl shadow p-4">
  <h3 class="font-semibold text-lg mb-2 truncate">Very Long Article Title That Gets Cut Off</h3>
  <p class="text-gray-500 text-sm line-clamp-3">
    This is a longer description of the article that will be clamped to exactly three lines
    of visible text regardless of how much content is actually here. A "..." ellipsis
    appears at the end to indicate truncation to the user.
  </p>
</div>

<!-- Whitespace and word break control -->
<p class="whitespace-nowrap overflow-hidden text-ellipsis max-w-xs text-gray-700">
  This single line will not wrap and shows ellipsis instead
</p>