Scaling with Tailwind

Home / News & Articles
Scaling with Tailwind

By David VanScott

We’ve begun adopting atomic CSS on several of our client projects with Tailwind CSS. It’s been a dream to work with and we couldn’t be happier with the workflow that it’s provided us.

During a recent project, we found ourselves in need of the ability to scale items on the page. Instead of writing CSS for it though, we decided to write a Tailwind plugin to add scale utility classes to the framework.

While the plugin is small and straightforward, it provided us with the means of continuing to use utility classes for the project without the need to write and maintain CSS for the project.

To get started, you can install the plugin through NPM or Yarn from:

@kirschbaum-development/tailwindcss-scale-utilities

To use the plugin, simply require it in the plugins section of your Tailwind config file:

plugins: [
  require('tailwindcss-scale-utilities')
]

Out of the box, we include some sensible defaults:

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

Like the core utilities in Tailwind though, you can customize the values and variants that are generated to fit your needs. If you want to customize the values generated by the plugin, you can simply create a scale object in your theme and customize like you would any other utility.

theme: {
  scale: {
    30: '.3',
    60: '.6',
    100: '1',
    120: '1.2'
  }
},
variants: {
  scale: ['hover']
}

Grab the package on Github today!

© 2019 Kirschbaum Development Group, LLC