Posts Learn Snippets Categories Tags About

TailwindCSS Aspect Ratio

How to set up aspect ratio in TailwindCSS for videos and images

Created on Jul 09, 2021


To set up the aspect ratio helper utility in TailwindCSS you have to install the official plugin.
# Using npm
npm install @tailwindcss/aspect-ratio

# Using Yarn
yarn add @tailwindcss/aspect-ratio

Then update the config file to require the plugin.
// tailwind.config.js

module.exports = {
  plugins: [

Now you can make use of the class to wrap up the iframe of the video that you are embedding.
<div class="aspect-w-16 aspect-h-9">
  <iframe src="#" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Created by

PostSrc poster


Full stack developer mainly focusing on the front end side of the web. The main author of PostSrc and loves writing tutorial and guides online.