@twind/aspect-ratio

A Twind extension that provides a composable API for giving elements a fixed aspect ratio.

Based on @tailwindcss/aspect-ratio.

Installation

Install from npm:

# Using npm
npm install @twind/aspect-ratio

# Using Yarn
yarn add @twind/aspect-ratio

Usage as Directive

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 Twind itself and deprecate this plugin.

Use the aspectRatio function to specify the aspect ratio for an element:

import { aspectRatio } from '@twind/aspect-ratio'

document.body.innerHTML = `
  <div class="${tw(aspectRatio(16, 9))}">
    <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
`

// Alternative APIs
aspectRatio('16/9')
aspectRatio({ w: 16, h: 9 })

To remove any aspect ratio, use aspectRatio('none'):

document.body.innerHTML = `
  <div class="${tw`${aspectRatio(16, 9)} lg:${aspectRatio('none')}`}">
    <!-- ... -->
  </div>
`

Usage as Plugin

Add to plugins of your setup call:

import { aspectRatio } from '@twind/aspect-ratio'

setup({
  plugins: {
    aspect: aspectRatio,
  },
})

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">
  <iframe
    src="https://www.youtube.com/embed/dQw4w9WgXcQ"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen
  ></iframe>
</div>

Use aspect-x/y shorthand:

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

Use aspect-x-y shorthand:

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

Use aspect-none to remove any aspect ratio behavior:

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

License

MIT