A utility-first CSS framework for rapidly building custom user interfaces.
---
# Tailwind CSS aspect ratio utilities
This is a Tailwind CSS plugin that adds an utilities for restrict an element with a set [aspect ratio](https://css-tricks.com/aspect-ratio-boxes/) **based on the parent's element's width**.
Maintained by: [Joan Piedra](https://joanpiedra.com) → [@neojp](https://twitter.com/neojp)
## Installation
Install as a node module with either `npm` or `yarn` on your command line
```bash
# 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](https://tailwindcss.com/docs/configuration#plugins) (`tailwind.config.js`).
```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.
```js
module.exports = {
variants: {
aspectRatio: ['responsive']
}
};
```
## Usage
Use the Tailwind utility classes provided by this plugin.
```html
```
### Examples
Draw a gray 256px square box:
```html
```
Restrict an image to a 4/3 aspect ratio:
```html
```
Embed a YouTube video and restrict it to an aspect ratio of 16/9:
```html
```
## Output
Tailwind will be outputed as follows.
```css
.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%; }
```
## Related plugins
Shout out to [tailwindcss-aspect-ratio](https://github.com/webdna/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](https://twitter.com/neojp)) about it.
## License
This project has been licensed under [the Hippocratic License](https://firstdonoharm.dev/).