<div class="aspect-w-16 aspect-h-9">
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div{% if variantModifier %} class="{{ variantModifier }}"{% endif %}>
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
{
"variantModifier": "aspect-w-16 aspect-h-9"
}
/* ======================================================================
# _utilities.ratio.css
====================================================================== */
/***
* TODO: @tailwindcss/aspect-ratio do not support @apply
*/
/* .u-ratio {
}
.u-ratio--1x1 {
@apply
aspect-w-1
aspect-h-1
;
}
.u-ratio--4x3 {
@apply
aspect-w-4
aspect-h-3
;
}
.u-ratio--16x9 {
@apply
aspect-w-16
aspect-h-9
;
} */
See @tailwindcss/aspect-ratio for documentations about aspect-ratio.
@tailwindcss/aspect-ratio do not support @apply