Tailwind CSS 11px Update
TODO: collapasable, copyable, download, etc
I'm using tailwind. My designer wants to update text-xs
to be 11px isntead of 12. How do I update that in tailwind config?To update the text-xs
class to use a font size of 11px instead of the default 12px in Tailwind CSS, you'll need to modify the tailwind.config.js
file. Here’s how you can do it:
- Open your
tailwind.config.js
file. - Extend the theme to include your custom font sizes. If you haven't extended the theme for font sizes before, you can add it under the
extend
section of thetheme
configuration.
Here is an example configuration that changes the text-xs
font size to 11px:
module.exports = {
theme: {
extend: {
fontSize: {
xs: '11px',
},
},
},
}
This code tells Tailwind to use 11px
for the text-xs
utility class, overriding the default value.
- Save the changes and make sure your build process compiles the Tailwind CSS with these new settings.
By doing this, any use of the text-xs
class in your HTML or template files will now correspond to a font size of 11px. Make sure to test your application to ensure that the new size integrates well with your design.
Related Chats
Tailwind CSS 11px Update 0.999
Merge and Deduplicate Tailwind Classes 0.334
Wrap Long Text CSS 0.330
React TypeScript - Handle Unknown 0.312
Estimate Character Width Roboto 0.305
Custom LaTeX Template. 0.295
Control Window Size: VisionOS 0.291
Adjusting Vertical Position CSS 0.290