A17 Tailwind Plugins

Description

Produces ratio boxes, which can be optionally grow if the content is longer than the height and can also be set to be free ratio if the ratio is no longer required.

NB: You may want to use Tailwind's official plugin. The main difference with this plugin is the ability to have expandable ratio boxes, so effectively a min-height of a ratio which expands if the content is too tall.

A note about Tailwind 3's native aspect ratio

In Tailwind 3, Tailwind introduced "Modern aspect ratio API" to use browser native aspect-ratio and so the life span of this plugin is very much limited.

At A17 we generally try and target current major and 2 previous major versions the browsers with our styling and browser native aspect ratio isn't there just yet. As of December 2021, Safari is lagging behind. Now this might not be as big of deal as it might have been in the olden days, as iOS and MacOS is pretty good at making its users update their devices, so you'll need to weigh up how you do aspect ratio boxes in project yourself.

Browser native aspect-ratio boxes will expand if the content is taller than the box, unless you lock it with min-height: 0/min-h-0.

Setup

tailwind.config.js

const { RatioBox } = require('@area17/a17-tailwind-plugins');

module.exports = {
  ...
  plugins: [RatioBox],
  theme: {
    ratios: {
      "1x1": "1:1",
      "16x9": "16:9"
    }
  }
  ...
};

Demo

Using this plugin requires a wrapper and a child.

The wrapper gets the ratio classes: eg: ratio ratio-1x1,
the child gets a class of ratio-content.

Based on the reference config mentioned in this guide, a 1:1 box that changes to 16:9 ratio at the md breakpoint:

document.html

<div class="ratio ratio-1x1 md:ratio-16x9">
  <div class="ratio-content bg-column">
  </div>
</div>

A 16:9 box, which can grow if the content is taller than the box (effectively this box is min-height: 16:9):

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ligula risus, fermentum id elit sit amet, fringilla viverra metus. Phasellus in convallis metus. Sed maximus nibh vitae nulla auctor pharetra et vel felis. Suspendisse ornare gravida nunc eget suscipit. Curabitur ullamcorper libero finibus efficitur pulvinar. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus congue non est eu tempus. Cras ut tellus ligula. Maecenas ac pellentesque elit, ac ultrices dolor. Donec id nisi sem. Sed vitae accumsan erat. Quisque eu lobortis neque, at suscipit tellus. Sed molestie risus et sem fringilla egestas. Morbi porttitor ante sit amet placerat tincidunt. Praesent cursus fermentum sapien et suscipit. Aenean augue ex, faucibus vel erat a, consectetur cursus ante.

Sed rhoncus rhoncus maximus. Donec et feugiat ipsum. Duis nec euismod nisi. Nam eget augue interdum, pulvinar eros condimentum, consectetur leo. Etiam malesuada urna semper metus facilisis, vel rutrum massa imperdiet. Ut id gravida velit. Proin egestas leo ipsum, quis blandit dolor vehicula a. Nullam tristique euismod est non egestas. Sed at euismod risus.

Suspendisse hendrerit aliquet efficitur. Suspendisse placerat lectus nisi. Duis id nibh tellus. Sed vehicula ipsum eu mauris sagittis, ac ultricies magna feugiat. In luctus fermentum augue, non tristique dolor iaculis blandit. Etiam quis lobortis metus, sit amet cursus nisl. Maecenas rhoncus malesuada nibh at pretium. Duis cursus eros nisi, sed laoreet mi luctus ac.

document.html

<div class="ratio ratio-16x9 ratio-expandable">
  <div>
    ...
  </div>
</div>

A 16:9 ratio box that becomes free ratio at lg.
NB: currently not possible to make this box constrained by a ratio again at a larger breakpoint - so ratio-16x9 lg:ratio-free xl:ratio-16:9 would have unexpexted results.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ligula risus, fermentum id elit sit amet, fringilla viverra metus.

document.html

<div class="ratio ratio-16x9 lg:ratio-free">
  <div class="ratio-content">
    ...
  </div>
</div>