Letter Spacing
@include('_partials.class-table', [
'rows' => [
[
'.tracking-tighter',
'letter-spacing: -0.05em;',
'Set the letter spacing of an element to -0.05em.',
],
[
'.tracking-tight',
'letter-spacing: -0.025em;',
'Set the letter spacing of an element to -0.025em.',
],
[
'.tracking-normal',
'letter-spacing: 0;',
'Set the letter spacing of an element to 0.',
],
[
'.tracking-wide',
'letter-spacing: 0.025em;',
'Set the letter spacing of an element to 0.025em.',
],
[
'.tracking-wider',
'letter-spacing: 0.05em;',
'Set the letter spacing of an element to 0.05em.',
],
[
'.tracking-widest',
'letter-spacing: 0.1em;',
'Set the letter spacing of an element to 0.1em.',
],
]
])
Usage
Control the letter spacing of an element using the .tracking-{size} utilities.
@component('_partials.code-sample')
.tracking-tighter
The quick brown fox jumped over the lazy dog.
.tracking-tight
The quick brown fox jumped over the lazy dog.
.tracking-normal
The quick brown fox jumped over the lazy dog.
.tracking-wide
The quick brown fox jumped over the lazy dog.
.tracking-wider
The quick brown fox jumped over the lazy dog.
.tracking-widest
The quick brown fox jumped over the lazy dog.
The quick brown fox ...
The quick brown fox ...
The quick brown fox ...
The quick brown fox ...
The quick brown fox ...
The quick brown fox ...
@endslot @endcomponentResponsive
To control the letter spacing of an element at a specific breakpoint, add a {screen}: prefix to any existing letter spacing utility. For example, use md:tracking-wide to apply the tracking-wide 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 @endcomponentCustomizing
Letter Spacings
By default Tailwind provides six tracking utilities. You can change, add, or remove these by editing the theme.letterSpacing section of your Tailwind config.
@component('_partials.customized-config', ['key' => 'theme.letterSpacing'])
- tightest: '-.075em', tighter: '-.05em',
- tight: '-.025em', normal: '0',
- wide: '.025em', wider: '.05em',
- widest: '.1em',
- widest: '.25em', @endcomponent
@include('_partials.variants-and-disabling', [ 'utility' => [ 'name' => 'tracking', 'property' => 'letterSpacing', ], 'variants' => [ 'responsive', ], ])
