# tailwindcss-aspect-ratio

> Tailwind CSS plugin to generate aspect ratio utilities

Latest version **3.0.0** (published 2020-02-07) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install tailwindcss-aspect-ratio
pnpm add tailwindcss-aspect-ratio
yarn add tailwindcss-aspect-ratio
bun add tailwindcss-aspect-ratio
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 3.0.0 |
| Published | 2020-02-07 |
| First published | 2018-03-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 6.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 245 |
| Author | webdna |
| Maintainers | webdna |
| Keywords | tailwind, tailwindcss, plugin, tailwindcss-plugin |

## Links

- npm: https://www.npmjs.com/package/tailwindcss-aspect-ratio
- Repository: https://github.com/webdna/tailwindcss-aspect-ratio
- Issues: https://github.com/webdna/tailwindcss-aspect-ratio/issues
- npm.io page: https://npm.io/package/tailwindcss-aspect-ratio

## Dependencies (1)

- [lodash](https://npm.io/package/lodash.md) ^4.17.15

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads

## Recent versions

- 3.0.0 (latest) — 2020-02-07
- 2.0.0 — 2019-07-03
- 1.0.3 — 2019-04-12
- 1.0.2 — 2019-04-12
- 1.0.1 — 2018-06-25
- 1.0.0 — 2018-03-20

## README

# Aspect Ratio Plugin for Tailwind CSS

## Installation

```bash
npm install tailwindcss-aspect-ratio
```

## Usage

This plugin uses the `aspectRatio` key in your Tailwind config’s `theme` and `variants` objects to generate aspect ratio utilities. Here is an example:

```js
// tailwind.config.js
module.exports = {
  theme: {
    aspectRatio: { // defaults to {}
      'none': 0,
      'square': [1, 1], // or 1 / 1, or simply 1
      '16/9': [16, 9],  // or 16 / 9
      '4/3': [4, 3],    // or 4 / 3
      '21/9': [21, 9],  // or 21 / 9
    },
  },
  variants: {
    aspectRatio: ['responsive'], // defaults to ['responsive']
  },
  plugins: [
    require('tailwindcss-aspect-ratio'),
  ],
};
```

The `aspectRatio` theme object is a dictionary where the key is the suffix of the class name and the value is an array of width and height or a number that represents a width / height ratio. The key doesn’t have to replicate the values, so if you prefer "nice names" you could have something like `'video': [16, 9]`.

The above configuration would create the following classes, as well as their responsive variants:

```css
.aspect-ratio-none {
  padding-bottom: 0;
}
.aspect-ratio-square {
  padding-bottom: 100%;
}
.aspect-ratio-16\/9 {
  padding-bottom: 56.25%;
}
.aspect-ratio-4\/3 {
  padding-bottom: 75%;
}
.aspect-ratio-21\/9 {
  padding-bottom: 42.86%;
}
```

Note: The `/` character is escaped in CSS and turned into `\/`, but the actual class name you would use in your HTML is `aspect-ratio-16/9`.

---
_Source: https://npm.io/package/tailwindcss-aspect-ratio · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._