@tkh/tailwind-plugin-aspect-ratio

Tailwindcss plugin to apply an aspect ratio to objects (images and videos).

Install

npm install @tkh/tailwind-plugin-aspect-ratio

Usage

Merge the plugin configuration with your tailwind.config.js

module.exports = {
  plugins: [require('@tkh/tailwind-plugin-aspect-ratio')()],
}

Apply an aspect ratio

To create a square aspect ratio use .aspect-ratio-square

<div class="relative aspect-square">
  <img
    src="https://via.placeholder.com/260"
    class="absolute top-0 left-0 w-full h-full object-cover"
  />
</div>

To create a 16x9 aspect ratio use .aspect-ratio-wide

<div class="relative aspect-wide">
  <img
    src="https://via.placeholder.com/260"
    class="absolute top-0 left-0 w-full h-full object-cover"
  />
</div>