# tailwindcss-responsive-embed

> Responsive Embed plugin for tailwindcss framework

Latest version **1.0.0** (published 2020-03-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install tailwindcss-responsive-embed
pnpm add tailwindcss-responsive-embed
yarn add tailwindcss-responsive-embed
bun add tailwindcss-responsive-embed
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2020-03-01 |
| First published | 2018-07-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 3.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 83 |
| Maintainers | drdogbot7 |
| Keywords | tailwind, tailwindcss, plugin, tailwindcss-plugin |

## Links

- npm: https://www.npmjs.com/package/tailwindcss-responsive-embed
- Repository: https://github.com/drdogbot7/tailwind-responsive-embed
- Homepage: https://github.com/drdogbot7/tailwind-responsive-embed#readme
- Issues: https://github.com/drdogbot7/tailwind-responsive-embed/issues
- npm.io page: https://npm.io/package/tailwindcss-responsive-embed

## Dependencies (2)

- [tailwindcss](https://npm.io/package/tailwindcss.md) ^1.2.0
- [tailwindcss-aspect-ratio](https://npm.io/package/tailwindcss-aspect-ratio.md) ^3.0.0

## 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

- 1.0.0 (latest) — 2020-03-01
- 0.2.2 — 2018-07-19

## README

# tailwind-responsive-embed

responsive embed component for tailwindcss, based on [bootstrap's responsive embed](https://getbootstrap.com/docs/4.1/utilities/embed/) which is itself credited to Nicolas Gallagher and [SUIT CSS](https://suitcss.github.io/). This will add the `.embed-responsive` and `.embed-responsive-item` components to your css.

This plugin relies on [webdna/tailwindcss-aspect-ratio](https://github.com/webdna/tailwindcss-aspect-ratio) to create the aspect ratio utility classes.

## Install

```bash
# Install via npm
npm install --save-dev tailwindcss-responsive-embed
```

## Usage

Responsive embed classes won't do much by themselves, so require `tailwindcss-aspect-ratio` also. It shouldn't matter what order they are included.

```js
module.exports = {
    theme: {
        aspectRatio: {
            none: 0,
            square: [1, 1],
            "16/9": [16, 9],
            "4/3": [4, 3],
            "21/9": [21, 9]
        }
    },
    variants: {
        aspectRatio: ['responsive']
    },
    plugins: [
        require("tailwindcss-responsive-embed"),
        require("tailwindcss-aspect-ratio"),
    ]
}
```

This configuration would create the following classes:

```scss
.embed-responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;

  .embed-responsive-item,
  iframe,
  embed,
  object,
  video {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    border: 0;
  }
}

.aspect-ratio-square {
  padding-top: 100%;
}
.aspect-ratio-16/9 {
  padding-top: 56.25%;
}
.aspect-ratio-4/3 {
  padding-top: 75%;
}
.aspect-ratio-21/9 {
  padding-top: 42.86%;
}
```

## Example HTML

```html
<div class="embed-responsive aspect-ratio-4/3">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/J---aiyznGQ"></iframe>
</div>
```

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