I recommend switching to @tailwindcss/aspect-ratio instead of using this plugin. This plugin DOES NOT WORK with @tailwindcss/aspect-ratio. If you are already using this plugin on a site without issue⦠that's probably fine.
Responsive embed component for tailwindcss, based on bootstrap's responsive embed which is itself credited to Nicolas Gallagher and SUIT CSS. This will add the .embed-responsive
and .embed-responsive-item
components to your css.
This plugin relies on webdna/tailwindcss-aspect-ratio to create the aspect ratio utility classes.
# Install via npm
npm install --save-dev tailwindcss-responsive-embed
Responsive embed classes won't do much by themselves, so require tailwindcss-aspect-ratio
also. It shouldn't matter what order they are included.
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:
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
position: absolute;
top: 0;
left: 0;
bottom: 0;
height: 100%;
width: 100%;
border: 0;
}
}
// tailwindcss-aspect-ratio generates these
.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%;
}
<div class="embed-responsive aspect-ratio-4/3">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/J---aiyznGQ"></iframe>
</div>