Image Plugin for Tailwind CSS

Предоставляет классы для создания блоков картинок с соотношением сторон

Установка

npm install @qpokychuk/tailwind-image-ratio-plugin --save-dev

// tailwind.config.js
{    
  plugins: [
    require('@qpokychuk/tailwind-image-ratio-plugin'),
  ],
}

Основа использования

Добавьте обязательный класс image-ratio, затем добавьте дополнительный класс для настройки отображения img буде спозиционирован абсолютно image-ratio

<div class="image-ratio image-4/3">
    <img src="path/to/your/img.png" />
</div>

Установка размера блока

Управляйте размером с помощью утилит image-{imageRatio}.

<div class="image-ratio image-4/3">
    <img src="path/to/your/img.png" />
</div>

Если вам нужно использовать одноразовое значение imageRatio, которое не имеет смысла включать в вашу тему, используйте квадратные скобки, чтобы сгенерировать свойство "на лету", используя любое произвольное значение.

<div class="image-ratio image-[25/15]">
    <img src="path/to/your/img.png" />
</div>

Настройка вашей темы

По умолчанию плагин предоставляет соотношения сторон, вы можете их расширить

// tailwind.config.js
{
  theme: {
    imageRatio: {
        '1/1': '100%',
        '4/3': '75%',
        '16/9': '56.25%',
    }
  }
}

Поддержать автора