tailwindcss-ar

An aspect ratio plugin for Tailwind CSS, based on the https://css-tricks.com/aspect-ratio-boxes/, using the pseudo-element technique.

Inspired by the webdna/tailwindcss-aspect-ratio plugin and improved: no runtime dependencies (plain JavaScript), no need for empty elements because content goes inside the box itself.

Quick start

npm install --save tailwindcss-ar

In your tailwind.config.js import the plugin using require('tailwindcss-ar') and define ratios under the theme.aspectRatios object. This object must provide suffixes for the .ar- class as keys, and box ratios (expressed as numbers) as values:

module.exports = {
  theme: {
    // ...
    aspectRatios: {
      'square': 1,
      '4-by-3': 4 / 3,
      '16/9': 16 / 9
    },
  },
  // ...
  plugins: [
    require('tailwindcss-ar')
  ],
}

By default, only the responsive variant is enabled. Variants can be changed under the variants.aspectRatios array:

module.exports = {
  variants: {
    aspectRatios: ['responsive', 'hover'],
  },
  // ...
}

Usage

Use the class.ar-<suffix> class to shape any element with the given aspect ratio:

<div class="w-64 bg-gray-300 ar-16/9">
  Your content here.
</div>

The ratio box is "safe", if the content exceeds the height, it will grow as necessary.