Text Decoration – Tailwind CSS

Inocencia Blewett

Underline Use the underline utility to underline text. The quick brown fox jumps over the lazy dog. <p class=”underline …”>The quick brown fox …</p> Line Through Use the line-through utility to strike out text. The quick brown fox jumps over the lazy dog. <p class=”line-through …”>The quick brown fox …</p> […]

The quick brown fox jumps over the lazy dog.

<p class="underline ...">The quick brown fox ...</p>

The quick brown fox jumps over the lazy dog.

<p class="line-through ...">The quick brown fox ...</p>
<a href="#" class="no-underline ...">Link with no underline</a>
<a href="#" class="no-underline hover:underline ...">Link</a>
<input class="focus:underline ..." value="Focus me">

By default, only responsive, group-hover, focus-within, hover and focus variants are generated for text decoration utilities.

You can control which variants are generated for the text decoration utilities by modifying the textDecoration property in the variants section of your tailwind.config.js file.

For example, this config will also generate active variants:

  
  module.exports = {
    variants: {
      extend: {
        
+       textDecoration: ['active'],
      }
    }
  }

If you don’t plan to use the text decoration utilities in your project, you can disable them entirely by setting the textDecoration property to false in the corePlugins section of your config file:

  
  module.exports = {
    corePlugins: {
      
+     textDecoration: false,
    }
  }

Source Article

Next Post

Help!! kitchen flow with island

Hi folks!! Man I need some help. I live in an old 1920s Tudor style house with the most terrible kitchen. We are doing everything we can with a fabulous designer to maximize the space, but I’m struggling with the latest flow, concerned that my addition of an island (which […]