Posts Learn Components Snippets Categories Tags Tools About
/

Tailwind CSS Aspect Ratio

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

Created on Jul 09, 2021

429 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>

If you like our tutorial, do make sure to support us by being our Patreon or buy us some coffee ☕️

Load comments for Tailwind CSS Aspect Ratio

)