Utilities for controlling the transformation of text.
Use the normal-case
utility to preserve the original casing. This is typically used to reset capitalization at different breakpoints.
The quick brown fox jumped over the lazy dog.
<p class="normal-case ...">The quick brown fox ...</p>
The quick brown fox jumped over the lazy dog.
<p class="uppercase ...">The quick brown fox ...</p>
The quick brown fox jumped over the lazy dog.
<p class="lowercase ...">The quick brown fox ...</p>
The quick brown fox jumped over the lazy dog.
<p class="capitalize ...">The quick brown fox ...</p>
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.
<p class="capitalize md:uppercase ...">
The quick brown fox jumped over the lazy dog.
</p>
For more information about Tailwind's responsive design features, check out the Responsive Design documentation.
By default, only responsive variants are generated for text transformation utilities.
You can control which variants are generated for the text transformation utilities by modifying the textTransform
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: {
// ...
+ textTransform: ['hover', 'focus'],
}
}
}
If you don't plan to use the text transformation utilities in your project, you can disable them entirely by setting the textTransform
property to false
in the corePlugins
section of your config file:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ textTransform: false,
}
}