Aspect ratio

Class reference

# Usage

Combine the aspect-w-{n} and aspect-h-{n} classes to specify the aspect ratio for an element:

<div class="aspect-w-16 aspect-h-9">
  <!-- ... -->
</div>

Use aspect-none to remove any aspect ratio behavior:

<div class="aspect-w-16 aspect-h-9 lg:aspect-none">
  <!-- ... -->
</div>

Note that due to the way this currently needs to be implemented (the old padding-bottom trick) you need to assign the aspect ratio to a parent element, and make the actual element you are trying to size the only child of that parent.

Once the aspect-ratio property is supported in modern browsers, we’ll add official support to Tailwind CSS itself and deprecate this plugin.

# Responsive

To control the line-clamp at a specific breakpoint, add a {screen}: prefix to any existing z-index utility. For example, use md:line-clamp-5 to apply the line-clamp-5 utility at only medium screen sizes and above.

For more information about Elements’ responsive design features, check out the Responsive Design documentation.