Letter Spacing
Utilities for controlling the tracking (letter spacing) of an element.
Default class reference
Class | Properties |
---|---|
tracking-tighter | letter-spacing: -0.05em; |
tracking-tight | letter-spacing: -0.025em; |
tracking-normal | letter-spacing: 0em; |
tracking-wide | letter-spacing: 0.025em; |
tracking-wider | letter-spacing: 0.05em; |
tracking-widest | letter-spacing: 0.1em; |
Usage
Control the letter spacing of an element using the tracking-{size}
utilities.
<p class="tracking-tighter ...">The quick brown fox ...</p>
<p class="tracking-tight ...">The quick brown fox ...</p>
<p class="tracking-normal ...">The quick brown fox ...</p>
<p class="tracking-wide ...">The quick brown fox ...</p>
<p class="tracking-wider ...">The quick brown fox ...</p>
<p class="tracking-widest ...">The quick brown fox ...</p>
Responsive
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.
<p class="tracking-tight md:tracking-wide ...">The quick brown fox jumps over the lazy dog.</p>
For more information about Tailwind’s responsive design features, check out the Responsive Design documentation.
Customizing
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.
// tailwind.config.js
module.exports = {
theme: {
letterSpacing: {
+ tightest: '-.075em',
tighter: '-.05em',
- tight: '-.025em',
normal: '0',
- wide: '.025em',
wider: '.05em',
- widest: '.1em',
+ widest: '.25em',
}
}
}
Variants
By default, only responsive variants are generated for tracking utilities.
You can control which variants are generated for the tracking utilities by modifying the letterSpacing
property in the variants
section of your tailwind.config.js
file.
For example, this config will also generate hover and focus variants:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ letterSpacing: ['hover', 'focus'],
}
}
}
Disabling
If you don’t plan to use the tracking utilities in your project, you can disable them entirely by setting the letterSpacing
property to false
in the corePlugins
section of your config file:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ letterSpacing: false,
}
}