Publishing extensions is so much easier than copy/pasting project-to-project.
View in Sanity Studio2020-10-22
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.
This plugin adds .border-x and .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 .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.
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.
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.
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 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!