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/Ytailwindcss-border-xy on npm
This plugin adds
.border-y classes for all the border widths in your config.
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
.px-2 to combine them, for example.
The need for this same compound class type for borders becomes more prounounced when using
.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 Widthstailwindcss-fraction-widths on npm
This plugin takes a single number – or array of numbers – and creates fraction widths for each.
fractionWidths(7) in your Tailwind config will create classes for
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 Gradientstailwindcss-coolhue on npm
Every design needs rad gradients. Every. Single. One.
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!