Installation

yarn add @kirschbaum-development/tailwindcss-scale-utilities --dev

or

npm install @kirschbaum-development/tailwindcss-scale-utilities --save-dev

Defaults

theme: {
  scale: {
    0: 0,
    25: '.25',
    50: '.5',
    75: '.75',
    100: '1',
    110: '1.1'
  }
},
variants: {
  scale: ['hover']
}

Usage

// tailwind.config.js
{
  theme: {
    scale: {
      '60': '0.6',
      '90': '0.9',
      '100': '1',
      '120': '1.2'
    }
  },
  variants: {
    scale: ['responsive']
  },
  plugins: [
    require('tailwindcss-scale-utilities')
  ]
}

This plugin generates the following utilities:

/* configurable with the "scale" theme object */
.scale-[key] {
  transform: scale([value]);
}

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security

If you discover any security related issues, please email [email protected] or [email protected] instead of using the issue tracker.

Credits

• David VanScott

Sponsorship

Development of this package is sponsored by Kirschbaum Development Group, a developer driven company focused on problem solving, team building, and community. Learn more about us or join us!

License

The MIT License (MIT). Please see License File for more information.