Text Decoration

Controls the decoration applied to text, such as underlining or striking through. Text decoration utilities are useful for indicating links, emphasizing text, or showing deleted content. In Tailwind v4, text decoration utilities are optimized for better integration with custom fonts and variable fonts.

Typography1 variant4 examples

Official Docs Open Playground

Basic usage:

<p class="underline">This text is underlined.</p>
<p class="line-through">This text has a line through it.</p>
<p class="no-underline">This text has no decoration.</p>

Examples

Different text decorations

<p class="underline">This text is underlined.</p>
<p class="line-through">This text has a line through it.</p>
<p class="no-underline">This text has no decoration.</p>

Edit in playground

Text decoration used in a modern card design

<!-- Text decoration in a modern card design -->
<div class="max-w-sm mx-auto bg-white rounded-lg shadow-md overflow-hidden">
  <div class="bg-blue-600 p-6 text-white">
    <h2 class="text-2xl font-bold mb-2 underline">Modern Card Design</h2>
    <p class="text-lg font-medium italic underline">Subtitle with italic style</p>
  </div>
  <div class="p-6">
    <p>This card uses different text decorations to create a clear hierarchy.</p>
    <button class="mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg font-semibold">
      Call to Action
    </button>
  </div>
</div>

Edit in playground

Responsive typography with varying text decorations

<!-- Responsive typography with varying text decorations -->
<h1 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4 underline">
  Responsive Heading
</h1>
<p class="text-base md:text-lg lg:text-xl font-normal mb-4 no-underline">
  This paragraph has no underline, but you can adjust it based on screen size.
</p>
<p class="text-sm md:text-base lg:text-lg font-semibold line-through">
  This text is struck through and adjusts size responsively.
</p>

Edit in playground

Text decoration used in a modern interface

<!-- Text decoration in a modern interface -->
<div class="max-w-lg mx-auto bg-white rounded-lg shadow-md overflow-hidden">
  <div class="bg-gradient-to-r from-purple-500 to-blue-500 p-8 text-white">
    <h2 class="text-2xl font-extrabold mb-4 underline">Dashboard Overview</h2>
    <p class="font-semibold line-through">Welcome back to your analytics dashboard</p>
  </div>
  <div class="p-6">
    <div class="mb-6">
      <h3 class="text-lg font-semibold mb-2 underline">Statistics</h3>
      <div class="grid grid-cols-3 gap-4 text-center">
        <div>
          <p class="font-bold text-xl underline">1,234</p>
          <p class="font-normal text-sm text-gray-600 no-underline">Views</p>
        </div>
        <div>
          <p class="font-bold text-xl underline">$5,678</p>
          <p class="font-normal text-sm text-gray-600 no-underline">Revenue</p>
        </div>
        <div>
          <p class="font-bold text-xl underline">90%</p>
          <p class="font-normal text-sm text-gray-600 no-underline">Satisfaction</p>
        </div>
      </div>
    </div>
    <div>
      <h3 class="text-lg font-semibold mb-2 underline">Recent Activity</h3>
      <div class="text-sm space-y-2">
        <p class="font-normal line-through">New comment on your post</p>
        <p class="font-normal line-through">Invoice #12345 paid</p>
        <p class="font-normal line-through">New subscriber to your newsletter</p>
      </div>
    </div>
  </div>
</div>

Edit in playground