Fun with Tailwind CSS Plugins

Publishing extensions is so much easier than copy/pasting project-to-project.

View in Sanity Studio


Tailwind's config is so extensive. But still, I have a handful of common CSS rules I copy from project to project. I'd used some plugins before but never written any.

It's such a powerful feature though, after writing one, I couldn't stop!

Also shout out to Tailwind Play for just being an amazing place to quickly demo even brand new plugins.

Border X/Y

tailwindcss-border-xy on npm

This plugin adds .border-x and .border-y classes for all the border widths in your config.

Demo on Tailwind Play

Tailwind comes with border width utilities for individual edges, but not a single class for widths on the X Axis (left and right) or Y Axis (top and bottom) together.

Other classes have these. There is .pl-2, .pr-2 and .px-2 to combine them, for example.

The need for this same compound class type for borders becomes more prounounced when using .divide-x and .divide-y which will apply borders between items, but not on the outsides.

And really, this plugin might be better creating a single .divide-edges class for that specific purpose... maybe I'll revisit this plugin.

Fraction Widths

tailwindcss-fraction-widths on npm

This plugin takes a single number – or array of numbers – and creates fraction widths for each.

For example fractionWidths(7) in your Tailwind config will create classes for .w-1/7, .w-2/7, etc.

Demo on Tailwind Play

Tailwind comes with fraction width sizes for common grid sizes. 1/2's, 1/3's, 1/4's, 1/6's, 1/12's. But when you need an uncommon grid, it can be a pain to write the classes for yourself.

With this plugin you only need to feed the plugin parameters to fuel your eccentric 47-column-grid designs.

Coolhue Gradients

tailwindcss-coolhue on npm

Every design needs rad gradients. Every. Single. One.

Demo on Tailwind Play

The Coolhue gradient colours are numbered 1-60 so just pick a number between those values and enjoy .bg-coolhue-35 and power on.

Other rad plugins

Other awesome plugins out there include tailwindcss-plugin-width-height which gives you classes like .wh-12 to combine width and height into one class. Every design has squares and circles so it's a no brainer.

Written or found some other plugins? Let me know!