Posts Learn Components new Snippets new Categories Tags About
/

Tailwind CSS Aspect Ratio

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

Created on Jul 09, 2021

47 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>
new

If you like our tutorial, do make sure to support us with some coffee. We need the juice to write the content during the night 🤙🏻