Tailwind css tutorial Hindi #7 Width | Minimum Width | Maximum width in Tailwind version 4

Width, Min-Width and Max-Width

Width, min-width and max-width control how wide a box can be: actual width, minimum limit, and maximum limit. In Tailwind, all three are easy with simple classes like w-…, min-w-…, max-w-….

•Apply width, min-width, max-width.

Basic width, min-width, max-width

Width: w-…

Example: w-40 (fix width), w-full (take 100% of parent), w-auto (fit content or layout).​

Min-width: min-w-…

Example: min-w-40, min-w-full (at least full width of parent).​

Max-width: max-w-…

Example: max-w-xs, max-w-md, max-w-full (never grow more than this limit).

•Width in percentage.

Use fraction classes or w-full:

w-1/2 → 50% of parent.

w-1/3, w-2/3, w-1/4, w-3/4 etc. → percentage widths.​

w-full → 100% width.

These are very common in responsive layouts.

•Provide specific width.

If scale classes are not exact, use arbitrary values:

Exact width: w-[300px], w-[600px] etc.​

Exact min-width: min-w-[200px].

Exact max-width: max-w-[500px].

This is helpful for things like cards, modals, or sidebars.


• Width with hover.

Use hover variants:

<div class="w-40 hover:w-60 transition-all duration-300">

Hover me

</div>

•Interview Question

 What if we put width greater than max-width

 Use of auto width



Height, Min-Height and Max-Height

Height, min-height and max-height control how tall a box can be: actual height, minimum limit and maximum limit


•Apply Height, min-Height, max-Height.

  1. Basic height, min-height, max-height
  2. Tailwind pattern is simple:
  3. Height: h-…
  4. Examples: h-10, h-40, h-full, h-auto.​
  5. Min-height: min-h-…
  6. Examples: min-h-0, min-h-full, min-h-screen.​
  7. Max-height: max-h-…
  8. Examples: max-h-0, max-h-full, max-h-[200px].​
  9. Min-height = cannot be smaller than this.
  10. Max-height = cannot be bigger than this.


• Full Screen Height.

h-screen → height = 100% of viewport height (full screen).​

For “minimum full screen” section: min-h-screen (at least full screen, can grow if content is more).​

Example: <section class="min-h-screen bg-blue-500">

...

</section>

• Height in percentage.

Use:

  1. h-full → 100% of parent height.​
  2. Parent must have some height set (like min-h-screen, fixed h-96, etc.), otherwise percentage has no effect.​
  3. For custom percentage once:
  4. h-[50%], h-[75%] etc.​


• Provide specific Height.

  1. When built-in sizes are not exact:
  2. h-[200px], h-[500px] etc. → exact pixel height.​
  3. min-h-[300px], max-h-[400px] → exact min or max height.
  4. Very useful for cards, modals, sidebars.

•Height with hover.

  1. Just like width, use hover variant:

<div class="h-20 hover:h-40 transition-all duration-300">

Hover me

</div>

  1. Normal: h-20, on hover: hover:h-40, and transition-all duration-300 makes it smooth.

•Interview Question

What is View Port

h-screen vs h-full