JSPM – tailwindcss-plugin-aspect-ratio@1.0.2

Package Exports

tailwindcss-plugin-aspect-ratio

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tailwindcss-plugin-aspect-ratio) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Tailwindcss Plugin: aspect ratio

This plugin add helper classes to keep the aspect ratio of an image.

Inspired by Adams Wathan's Fixed Aspect Ratio TailwindCSS tutorial

Installation

Add this plugin to your project

  npm install tailwindcss-plugin-aspect-ratio --save-dev

Usage

Here is an exampl one how to add this plugin to your project

// tailwind.config.js
const aspectRatioPlugin = require('tailwindcss-plugin-aspect-ratio');

module.exports = {
  theme: {
    extend: {}
  },
  variants: {},
  plugins: [
    aspectRatioPlugin()
  ]
};

Options

You can pass additional options to this plugin

Name	default	Description
`full`	`false`	Generates a helper component. (see the section below)
`className`	ratio	The default name of the generated classes
`ratioValues`	`{...}`	It generates all percent base padding bottoms. See all the values and examples at the Tailwindcss documentation for width

Classic approach

The classic css approach is as follow

<div class="relative" style="padding-bottom: 66.66%">
    <img class="absolute h-full w-full object-cover" src="#" alt="#" />
</div>

Plugin Example

The default configuration genearats the apsect-* helper classes

<div class="relative aspect-2/3">
    <img class="absolute h-full w-full object-cover" src="#" alt="#" />
</div>

add additional css helper component

If you set the full property of the configuration to true, it gives your an extra aspect property that you can apply to your html tag.

.aspect {
    position: relative;
    
    .img {
        position: absolute;
        height: 100%;
        width: 100%
    }
}

<div class="aspect aspect-2/3">
    <img class="object-cover" src="#" alt="#" />
</div>

Testing

To run the tests

npm run test

Licence

MIT