Text Transform

@include('_partials.class-table', [ 'rows' => [ [ '.uppercase', 'text-transform: uppercase;', 'Makes all text uppercase within an element.', ], [ '.lowercase', 'text-transform: lowercase;', 'Makes all text lowercase within an element.', ], [ '.capitalize', 'text-transform: capitalize;', 'Capitalizes the text within an element.', ], [ '.normal-case', 'text-transform: none;', 'Disables any text transformations previously applied to an element.', ], ] ])

Normal Case

Use the .normal-case utility to preserve the original casing. This is typically used to reset capitalization at different breakpoints.

@component('_partials.code-sample')

The quick brown fox jumped over the lazy dog.

@slot('code')

The quick brown fox ...

@endslot @endcomponent

Uppercase

Use the .uppercase utility to uppercase text.

@component('_partials.code-sample')

The quick brown fox jumped over the lazy dog.

@slot('code')

The quick brown fox ...

@endslot @endcomponent

Lowercase

Use the .lowercase utility to lowercase text.

@component('_partials.code-sample')

The quick brown fox jumped over the lazy dog.

@slot('code')

The quick brown fox ...

@endslot @endcomponent

Capitalize

Use the .capitalize utility to capitalize text.

@component('_partials.code-sample')

The quick brown fox jumped over the lazy dog.

@slot('code')

The quick brown fox ...

@endslot @endcomponent

Responsive

To control the text transformation of an element at a specific breakpoint, add a {screen}: prefix to any existing text transformation utility. For example, use md:uppercase to apply the uppercase 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

Customizing

@include('_partials.variants-and-disabling', [ 'utility' => [ 'name' => 'text transformation', 'property' => 'textTransform', ], 'variants' => [ 'responsive', ], ])