Tailwind CSS aspect ratio utilities

This is a Tailwind CSS plugin that adds an utilities for restrict an element with a set aspect ratio based on the parent's element's width.

Maintained by: Joan Piedra → @neojp

Installation

Install as a node module with either npm or yarn on your command line

# Install via npm
npm install --save-dev @neojp/tailwindcss-aspect-ratio-utilities

# Install via yarn
yarn add --dev @neojp/tailwindcss-aspect-ratio-utilities

Add this module as a plugin on your Tailwind configuration file (tailwind.config.js).

module.exports = {
  plugins: [
      require('@neojp/tailwindcss-aspect-ratio-utilities')
  ]
};

Variants

Note that this plugin allows the usage of variants through the key aspectRatio and will default to your global variant setting.

module.exports = {
  variants: {
    aspectRatio: ['responsive']
  }
};

Usage

Use the Tailwind utility classes provided by this plugin.

<div class="aspect-ratio-square"></div>
<div class="aspect-ratio-3/2"></div>
<div class="aspect-ratio-2/3"></div>
<div class="aspect-ratio-4/3"></div>
<div class="aspect-ratio-5/6"></div>
<div class="aspect-ratio-16/9"></div>
<div class="aspect-ratio-21/9"></div>

Examples

Draw a gray 256px square box:

<div class="bg-gray-500 w-64">
  <div class="aspect-ratio-square"></div>
</div>

Restrict an image to a 4/3 aspect ratio:

<div class="bg-gray-500 relative w-64">
  <div class="aspect-ratio-4/3"></div>
  <img class="absolute h-full left-0 object-cover top-0 w-full" src="https://images.unsplash.com/photo-1575470066032-42f6bce0c7fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=300&q=80" alt="Unsplash stock image by Josh Hild">
</div>

Embed a YouTube video and restrict it to an aspect ratio of 16/9:

<div class="bg-gray-400 mx-auto relative w-1/2">
  <div class="aspect-ratio-16/9"></div>
  <iframe class="absolute h-full left-0 top-0 w-full" width="560" height="315" src="https://www.youtube.com/embed/21HuwjmuS7A" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

Output

Tailwind will be outputed as follows.

.aspect-ratio-square { padding-top: 100%; }
.aspect-ratio-3\/2   { padding-top: 66.66666666666667%; }
.aspect-ratio-2\/3   { padding-top: 150%; }
.aspect-ratio-4\/3   { padding-top: 75%; }
.aspect-ratio-5\/6   { padding-top: 120%; }
.aspect-ratio-16\/9  { padding-top: 56.25%; }
.aspect-ratio-21\/9  { padding-top: 42.86%; }

Shout out to tailwindcss-aspect-ratio another plugin that attemps to handle aspect ratios on Tailwind CSS.

Contributing

Feel free to submit a PR request, and send me a message on Twitter (@neojp) about it.

License

This project has been licensed under the Hippocratic License.

@neojp/tailwindcss-aspect-ratio-utilities

Package Exports

Readme