Aspect Ration - Tailwind docs example

Basic usage

Setting the aspect ratio

Use the aspect-{ratio} utilities to set the desired aspect ratio of an element.

<iframe
  class="aspect-video w-full rounded-lg shadow-lg"
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>

Tailwind doesn't include a large set of aspect ratio values out of the box since it's easier to just use arbitrary values. See the arbitrary values section for more information.

Browser support

The aspect-{ratio} utilities use the native aspect-ratio CSS property, which was not supported in Safari until version 15. Until Safari 15 is popularized, Tailwind's aspect-ratio plugin is a good alternative.

Applying conditionally

Hover, focus, and other states

Using custom values

Customizing your theme

By default, Tailwind provides a minimal set of aspect-ratio utilities. You can customize these values by editing theme.aspectRatio or theme.extend.aspectRatio in your tailwind.config.js file.

tailwind.config.js

  module.exports = {
    theme: {
      extend: {
        aspectRatio: {
+         '4/3': '4 / 3',
        },
      }
    }
  }