In Tailwind CSS, you can set the minimum width of an element by using the following utilities:
- min-w-0
- min-w-full
- min-w-min
- min-w-max
- min-w-fit
To set the maximum width for an element, use max-w-{value}. Value can be 0, xs, sm, md, lg, xl, etc. You can see the full list of available values in the official docs.
To set the minimum height for an element, you can use the following utilities:
- min-h-0
- min-h-full
- min-h-screen
- min-h-min
- min-h-max
- min-h-fit
To set the maximum height for an element, use max-h-{value}. Value can be 0, 0.5, 1, 1.5, etc. You can see the full list of available numbers in the official docs.
Example
Screen record:
The code:
<body>
<div class="px-3 py-20 w-full bg-indigo-500">
<div class="mx-auto max-w-xs h-36 sm:max-w-md md:max-w-xl bg-amber-500"></div>
</div>
</body>Further reading:
- Tailwind CSS: How to Create a Responsive Layout
- Tailwind CSS: How to Create Parallax Scrolling Effect
- Tailwind CSS: Make a Child Element Fill the Remaining Space
- Tailwind CSS: Removing the Outline of a Text Input on Focus
- How to Create Frosted Glass Effect in Tailwind CSS
- Tailwind CSS: Create a Search Field with an Icon Inside
You can also check out our CSS category page for the latest tutorials and examples.
