Max-Width
Utilities for setting the maximum width of an element
Work in progress!
More detailed documentation is coming soon, but in the meantime here's a quick class reference.
Class reference
Customizing
Max-Width Scale
By default Tailwind provides ten max-width utilities. You change, add, or remove these by editing the maxWidth section of your Tailwind config.
{
// ...
maxWidth: {
'xs': '20rem',
'sm': '30rem',
'md': '40rem',
'lg': '50rem',
'xl': '60rem',
- '2xl': '70rem',
- '3xl': '80rem',
- '4xl': '90rem',
- '5xl': '100rem',
+ '1/4': '25%',
+ '1/2': '50%',
+ '3/4': '75%',
'full': '100%',
}
}
Responsive and State Variants
By default, only responsive variants are generated for max-width utilities.
You can control which variants are generated for the max-width utilities by modifying the maxWidth property in the modules section of your Tailwind config file.
For example, this config will also generate hover and focus variants:
{
// ...
modules: {
// ...
- maxWidth: ['responsive'],
+ maxWidth: ['responsive', 'hover', 'focus', 'active', 'group-hover'],
}
}
Disabling
If you don't plan to use the max-width utilities in your project, you can disable them entirely by setting the maxWidth property to false in the modules section of your config file:
{
// ...
modules: {
// ...
- maxWidth: ['responsive'],
+ maxWidth: false,
}
}