Text Decoration

@include('_partials.class-table', [ 'rows' => [ [ '.underline', 'text-decoration: underline;', 'Underlines the text within an element.', ], [ '.line-through', 'text-decoration: line-through;', 'Adds a line through the text within an element.', ], [ '.no-underline', 'text-decoration: none;', 'Disables any text decorations previously applied to an element.', ], ] ])

Underline

Use the .underline utility to underline text.

@component('_partials.code-sample')

The quick brown fox jumped over the lazy dog.

@slot('code')

The quick brown fox ...

@endslot @endcomponent

Line Through

Use the .line-through utility to strike out text.

@component('_partials.code-sample')

The quick brown fox jumped over the lazy dog.

@slot('code')

The quick brown fox ...

@endslot @endcomponent

No Underline

Use the .no-underline utility to remove underline or line-through styling.

@component('_partials.code-sample')

@slot('code')Link with no underline@endslot @endcomponent

Responsive

To control the text decoration of an element at a specific breakpoint, add a {screen}: prefix to any existing text decoration utility. For example, use md:underline to apply the underline utility at only medium screen sizes and above.

For more information about Tailwind's responsive design features, check out the Responsive Design documentation.

@component('_partials.responsive-code-sample') @slot('none')

The quick brown fox jumped over the lazy dog.

@endslot @slot('sm')

The quick brown fox jumped over the lazy dog.

@endslot @slot('md')

The quick brown fox jumped over the lazy dog.

@endslot @slot('lg')

The quick brown fox jumped over the lazy dog.

@endslot @slot('xl')

The quick brown fox jumped over the lazy dog.

@endslot @slot('code')

The quick brown fox jumped over the lazy dog.

@endslot @endcomponent

Hover

To control the text decoration of an element on hover, add the hover: prefix to any existing text decoration utility. For example, use hover:underline to apply the underline utility on hover.

@component('_partials.code-sample', ['class' => 'text-center'])

Link@endcomponent

Hover utilities can also be combined with responsive utilities by adding the responsive {screen}: prefix before the hover: prefix.

<a href="#" className="... md:no-underline md:hover:underline ...">Link</a>

Focus

To control the text decoration of an element on focus, add the focus: prefix to any existing text decoration utility. For example, use focus:underline to apply the underline utility on focus.

@component('_partials.code-sample', ['lang' => 'html'])

@slot('code')

@endslot @endcomponent

Focus utilities can also be combined with responsive utilities by adding the responsive {screen}: prefix before the focus: prefix.

<input className="md:focus:underline ..." value="Focus me"/>

Customizing

@include('_partials.variants-and-disabling', [ 'utility' => [ 'name' => 'text decoration', 'property' => 'textDecoration', ], 'variants' => [ 'responsive', 'hover', 'focus', ], ])