Text Decoration – Tailwind CSS

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

Dannielle Weintraub

Next Post

The 10 Best Interior Designers in Redmond, WA 2021

Wed Nov 17 , 2021
Can I browse unscreened Interior Designers in Redmond? We do our best to screen all of our interior designers. However, there are still some interior designer professionals in Redmond that have not been pre-screened. This means that their licenses may not be up to date to operate in Redmond or […]