Width and height

Helper classes for setting the width or height of an element.

Here are all the supported classes:

  • .w-0 - width: 0;
  • .w-100 - width: 100%;
  • .max-w-0 - max-width: 0;
  • .max-w-100 - max-width: 100%;
  • .max-w-max-content - max-width: max-content;
  • .max-w-min-content - max-width: min-content;
  • .min-w-0 - min-width: 0;
  • .min-w-100 - min-width: 100%;
  • .min-w-max-content - min-width: max-content;
  • .min-w-min-content - min-width: min-content;

  • .h-0 - height: 0;
  • .h-100 - height: 100%;
  • .h-screen - height: 100vh;
  • .max-h-0 - max-height: 0;
  • .max-h-100 - max-height: 100%;
  • .max-h-screen - max-height: 100vh;
  • .min-h-0 - min-height: 0;
  • .min-h-100 - min-height: 100%;
  • .min-h-screen - min-height: 100vh;
					
<!-- Width -->
<div class="w-100"> ... </div>
<div class="min-w-min-content"> ... </div>
<!-- Height -->
<div class="h-100"> ... </div>
<div class="min-h-100"> ... </div>