Skip to content

Latest commit

 

History

History
44 lines (37 loc) · 716 Bytes

README.md

File metadata and controls

44 lines (37 loc) · 716 Bytes

functions

These helpers ease unit conversion and simplify config entries.

  • em(): Convert pixel value into ems
  • rem(): Convert pixel value into rems
  • remPair(): Convert pixel value to a rem-based object entry intended for spreading
  • pxPair(): Convert pixel value to a pixel-based object entry intended for spreading

Usage

const { em, rem, remPair, pxPair } = require('@viget/tailwindcss-plugins/utilities/fns')

screens: {
  sm: em(640),
},
width: {
  logo: rem(16),
},
height: {
  ...remPair(32),
},
borderWidth: {
  ...pxPair(8),
},

is equivalent to:

screens: {
  sm: '40em',
},
width: {
  logo: '1rem',
},
height: {
  32: '2rem',
},
borderWidth: {
  8: '8px',
},