Name		Name	Last commit message	Last commit date
Latest commit History 4 Commits
tests		tests
.gitignore		.gitignore
CHANGELOG.md		CHANGELOG.md
LICENSE		LICENSE
README.md		README.md
index.js		index.js
package.json		package.json
yarn.lock		yarn.lock

Repository files navigation

Scale Utilities Plugin for Tailwind CSS

Installation

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

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

Defaults

theme: {
  scale: {
    0: 0,
    25: '.25',
    50: '.5',
    75: '.75',
    1: 1
  }
},

variants: {
  scale: ['responsive', 'hover', 'focus']
}

Usage

// tailwind.config.js
{
  theme: {
    scale: {
      '90': '0.9',
      '100': '1',
      '110': '1.1'
    }
  },
  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]);
}

/* specifying a negative key will follow framework conventions */
.-scale-[key] {
  transform: scale([value]);
}