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

5 views

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: [
    require('@tailwindcss/aspect-ratio'),
  ],
}

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>
</div>

Created by

PostSrc poster

PostSrc

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.