tailwind-ratio

Your Package Name

Ratio plugin for Tailwind CSS

Installation

Install the package using npm:

npm install tailwind-ratio

Add the package to your tailwind.config.js

// Example Tailwind CSS configuration
const ratioPlugin = require('tailwind-ratio');

module.exports = {
  // ... other configurations
  plugins: [
    // ... other plugins
    ratioPlugin,
  ],
};

Example usages: The 'ratio' class is required. A secondary class (ratio-1x1) will add the aspect ratio. It will auto calculate the correct ratios.

Square example

<div class="ratio ratio-1x1">
    <img src="..."/>
</div>

Video example

<div class="ratio ratio-16x9">
    <img src="..."/>
</div>

Random example. You can create all and any aspect ratio's as you wish.

<div class="ratio ratio-14x5 lg:ratio-3x4">
    <img src="..."/>
</div>