Sizing

1. Width

• w-0: Sets the width to 0 pixels.
• w-px: Sets the width to 1 pixel.
• w-0.5 to w-64: Sets the width to values ranging from 2px to 256px.
• w-1/2 to w-11/12: Sets the width to fractions of the parent container's width, ranging from 50% to 91.67%.
• w-full: Sets the width to 100% of the parent container's width.
• w-screen, w-svw, w-lvw, w-dvw: Sets the width to the viewport width with various viewport-relative units (vw, svw, lvw, dvw - explained later in the lesson).
• w-min and w-max: Sets the width to the minimum or maximum content width, allowing the element to expand or shrink based on its content.
• w-fit: Sets the width to fit the content, expanding only as much as necessary to contain its content.

• vw (Viewport Width): 1vw represents 1% of the viewport width.
  It allows you to size elements relative to the width of the viewport.
  For example, width: 50vw; would make an element take up half of the viewport's width.

• svw (Smallest Viewport Width): 1svw represents 1% of the smaller dimension between the viewport's width and height.
  It's particularly useful for ensuring elements are responsive regardless of whether the viewport is in landscape or portrait orientation.

• lvw (Largest Viewport Width): 1lvw represents 1% of the larger dimension between the viewport's width and height.
  Similar to svw, but it's based on the larger dimension. Useful when you want elements to adapt to the longer side of the viewport.

• dvw (Device Viewport Width): 1dvw represents 1% of the device's viewport width, which may differ from the CSS viewport width.
  It's less commonly used but can be helpful when you need to consider the physical dimensions of the device's screen.

2. Height

• h-0: Sets the height to 0 pixels.
• h-px: Sets the height to 1 pixel.
• h-0.5 to h-64: Sets the height to values ranging from 2px to 256px.
• h-1/2 to h-5/6: Sets the height to fractions of the parent container's height, ranging from 50% to 83.33%.
• h-full: Sets the height to 100% of the parent container's height.
• h-screen, h-svh, h-lvh, h-dvh: Sets the height to the viewport height with various viewport-relative units (vh, svh, lvh, dvh).
• h-min and h-max: Sets the height to the minimum or maximum content height, allowing the element to expand or shrink based on its content.
• h-fit: Sets the height to fit the content, expanding only as much as necessary to contain its content.

3. Size

• size-0: Sets both the width and height to 0 pixels.
• size-px: Sets both the width and height to 1 pixel.
• size-0.5 to size-64: Sets both the width and height to values ranging from 2px to 256px.
• size-1/2 to size-11/12: Sets both the width and height to fractions of the parent container's width and height, respectively, ranging from 50% to 91.67%.
• size-full: Sets both the width and height to 100% of the parent container's width and height.
• size-auto: Allows both the width and height to be automatically determined based on the element's content.
• size-min: Sets both the width and height to the minimum content size, allowing the element to shrink based on its content.
• size-max: Sets both the width and height to the maximum content size, allowing the element to expand based on its content.
• size-fit: Sets both the width and height to fit the content, expanding only as much as necessary to contain its content.

4. Min-Width

• min-w-0: Sets the minimum width to 0 pixels, allowing the element to become as narrow as possible.
• min-w-px: Sets the minimum width to 1 pixel, ensuring that the element is at least one pixel wide.
• min-w-0.5 to min-w-64: Sets the minimum width to values ranging from 2px to 256px, providing various minimum width options.
• min-w-1 to min-w-96: Sets the minimum width to values ranging from 4px to 384px, offering more control over minimum width.
• min-w-full: Sets the minimum width to 100% of the parent container's width, ensuring that the element is never narrower than its container.
• min-w-min: Sets the minimum width to the minimum content size, allowing the element to shrink based on its content but not narrower than its content.
• min-w-max: Sets the minimum width to the maximum content size, ensuring that the element is at least as wide as its maximum content.
• min-w-fit: Sets the minimum width to fit the content, expanding only as much as necessary to contain its content but not narrower than its content.

5. Max-Width

• max-w-0 to max-w-64: Sets the maximum width to values ranging from 0px to 256px, allowing you to cap the width of an element at various fixed sizes.
• max-w-none: Removes any maximum width constraint, allowing the element to expand freely.
• max-w-xs to max-w-7xl: Sets the maximum width to responsive breakpoint values, ensuring that the element's width changes based on the screen size.
• max-w-full: Sets the maximum width to 100% of the parent container's width, making the element as wide as its container.
• max-w-min: Sets the maximum width to the minimum content size, ensuring that the element doesn't exceed its content's width.
• max-w-max: Sets the maximum width to the maximum content size, capping the width at the maximum content width.
• max-w-fit: Sets the maximum width to fit the content, allowing the element to expand only as much as necessary to contain its content.
• max-w-prose: Sets the maximum width to a recommended line length for text content (approximately 65 characters).
• max-w-screen-sm to max-w-screen-2xl: Sets the maximum width based on responsive screen size breakpoints, making it suitable for creating responsive layouts.

6. Min-Height

• min-h-0 to min-h-64: These classes set the minimum height to specific fixed values, ranging from 0px to 256px. They allow you to enforce a minimum height for elements at various predetermined sizes.
• min-h-px: This class sets the minimum height to an exact 1 pixel, offering ultra-fine control over element sizing.
• min-h-0.5: Establishes a minimum height of 0.125rem (2 pixels), providing a minimal but visible height for tiny elements that need a slight presence.
• min-h-1.5: Defines a minimum height of 0.375rem (6 pixels), offering a small but noticeable height for elements that require a bit more visibility.
• min-h-2.5: Sets a minimum height of 0.625rem (10 pixels), useful for elements that need slightly more vertical space while maintaining a compact size.
• min-h-3.5: Specifies a minimum height of 0.875rem (14 pixels), suitable for elements that require a bit more height than the smallest options.
• min-h-full: This class sets the minimum height to 100% of its parent container's height, making it adapt dynamically to its container's size.
• min-h-screen: Establishes a minimum height of 100vh (viewport height), ensuring the element takes up at least the full height of the viewport.
• min-h-svh: This class sets the minimum height to 100svh (scaled viewport height), allowing the element to adapt to a scaled viewport size.
• min-h-lvh: Defines a minimum height of 100lvh (logical viewport height), ensuring the element's height adapts to the logical viewport size.
• min-h-dvh: Sets the minimum height to 100dvh (dynamic viewport height), enabling the element to adjust to changes in the viewport height dynamically.
• min-h-min: This class sets the minimum height based on the content's minimum height, ensuring the element doesn't collapse smaller than its content.
• min-h-max: Establishes the minimum height based on the maximum content height, capping the minimum height at the maximum content height.
• min-h-fit: Sets the minimum height to fit the content, allowing the element to expand just enough to contain its content without unnecessary extra space.

7. Max-Height

• max-h-0 to max-h-64: These classes set the maximum height from 0px to 256px, providing a selection of predefined heights for compact elements.
• max-h-px: Establishes a maximum height of 1px, suitable for ultra-thin horizontal dividers.
• max-h-0.5 to max-h-3.5: These classes offer minimal but visible maximum heights, ranging from 0.125rem (2 pixels) to 0.875rem (14 pixels), ideal for tiny elements that require slight vertical presence.
• max-h-4 to max-h-64: Extending the range, these classes set maximum heights from 1rem (16 pixels) to 16rem (256 pixels), offering a spectrum of predefined heights for various UI components.
• max-h-none: Removes any maximum height limitation, allowing elements to expand freely in height.
• max-h-full: Sets the maximum height to 100% of the parent container's height, making the element as tall as its container.
• max-h-screen, max-h-svh, max-h-lvh, max-h-dvh: These classes establish maximum heights based on viewport units, ensuring elements adapt to different screen and viewport sizes.
• max-h-min: Defines the maximum height based on the element's minimum content size, preventing it from exceeding its content's height.
• max-h-max: Caps the maximum height at the element's maximum content size, limiting the height based on the content.
• max-h-fit: Adapts the maximum height to fit the content, allowing elements to expand only as much as needed to contain their content.