Skip to content
Aspect Ratio Plugin for tailwindcss framework
Branch: master
Clone or download
Latest commit 3ab2a8b Apr 12, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore Initial Commit Mar 20, 2018
README.md Merge pull request #5 from chrisrowe/patch-3 Jul 11, 2018
index.js Escape entire class name not just user provided-portion Jun 24, 2018
package-lock.json 1.0.3 Apr 12, 2019
package.json 1.0.3 Apr 12, 2019

README.md

Aspect Ratio Tailwind Plugin

Installation

Add this plugin to your project:

# Install via npm
npm install --save-dev tailwindcss-aspect-ratio

Usage

The aspect ratio plugin exposes options for you to use. Here is the example for adding it to your project plugins

require('tailwindcss-aspect-ratio')({
  ratios: {
    'square': [1, 1],
    '16/9': [16, 9],
    '4/3': [4, 3],
    '21/9': [21, 9],
  }
})

This configuration would create the following classes:

.aspect-ratio-square { padding-top: 100%; }
.aspect-ratio-16/9 { padding-top: 56.25%; }
.aspect-ratio-4/3 { padding-top: 75%; }
.aspect-ratio-21/9 { padding-top: 42.86%; }

The plugin accepts an object where the key is the suffix of the class name and the value is an array of width and height [{width}, {height}].

In the example above you can see that the key does not have to replicate the values, so if you prefer "nice names" you could have some like 'cinema': [21, 9] or 'letterbox': [16,9].

As per the tailwind plugin docs you are able to pass variants (responsive, hover, etc.) as a parameter.

require('tailwindcss-aspect-ratio')({
  ratios: {
    'square': [1, 1],
    '16/9': [16, 9],
    '4/3': [4, 3],
    '21/9': [21, 9],
  },
  variants: ['responsive', 'hover'],
})

Using the above should mean your plugins config looks something like this:

// example plugins section of tailwind.js config file

plugins: [
  require('tailwindcss/plugins/container')({
    //center: true,
    // padding: '1rem',
  }),
  require('tailwindcss-aspect-ratio')({
    ratios: {
      'square': [1, 1],
      '16/9': [16, 9],
      '4/3': [4, 3],
      '21/9': [21, 9],
    }
  }),
],
You can’t perform that action at this time.