Skip to content
Square aspect ratio `.wh-*` size utility classes plugin for Tailwind css.
TypeScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib
tests
types
.gitattributes
.gitignore
README.md
jest.config.js
package-lock.json
package.json
tsconfig.json

README.md

tailwindcss-plugin-width-height

Square .wh-* size utility classes for Tailwind css. For when you want a DRY way to describe a square-sized element (profile image, close button, div container, etc.).

For Tailwind v1.0:

npm install --save-dev @ky-is/tailwindcss-plugin-width-height

For Tailwind v0.x:

npm install --save-dev @ky-is/tailwindcss-plugin-width-height@0

Example

A circular avatar:

<img class="wh-16 rounded-full" />

Is equivalent to:

<img class="w-16 h-16 rounded-full" />

Config

In your tailwind js configuration file:

  plugins: [
    require('@ky-is/tailwindcss-plugin-width-height')({ variants: ['responsive'] }),
  ],

Options

  • variants (string[], optional): responsive, hover, focus, active, group-hover
  • sizes (object, optional): Custom sizes to generate (in the same format as width and height from your config file). If you don't provide this value, it defaults to the intersection of the width and height values from your config.
You can’t perform that action at this time.