Skip to content

Latest commit

 

History

History
82 lines (57 loc) · 1.48 KB

README.md

File metadata and controls

82 lines (57 loc) · 1.48 KB
Raw

variants-unit

Adds new CSS unit variants. Applying the variant will convert the unit of the width/heights applied.

Whatever the length variant is prefixed with, the declaration value's unit will be replaced with that of the variant.

Installation

Following commands will install @downwindcss/variant-units as a "devDependency".

$ npm install -D @downwindcss/variant-units
# Or
$ yarn add -D @downwindcss/variant-units
# Or
$ pnpm add -D @downwindcss/variant-units

Configuration

In your tailwind.config.js,

  1. Add the unitsPlugin plugin with units
  2. Extend variants (typically, (max/min)width/height).
module.exports = {
  plugins: [unitsPlugin({ units: ['em', 'vw', 'vh', '%'] })],
  variants: {
    extend: {
      width: ['em', 'vh', 'vw', '%'],
      height: ['em', 'vh', 'vw', '%'],
    },
  },
}

Unit Options

Refer to MDN for the list of CSS length units: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#lengths

MDN document doesn't have % as a length unit but you can still add it to the units plugin option in the configuration section.

  • %
  • cm
  • mm
  • Q
  • in
  • pc
  • pt
  • px
  • em
  • ex
  • ch
  • rem
  • lh
  • vw
  • vh
  • vmin
  • vmax

Usage

w-4 has a length of `1rem'.

Following class em:w-4 will apply 1em instead of 1rem.

<div class="em:w-4"></div>

If you were to use %:w-4, it will be 1%.

Example

https://codesandbox.io/s/variant-units-e6c5c