tailwind customizations

Styling

Tailwind is great and ust a few customizations can make it even better. Most of these are embedded in this preset.

Pixel widths

Tailwind uses an index based scale which can be cumbersome to memorize, hover over in a code editor, or print out for reference. Our team has used px scale and it's easier to remember and for new devs to onboard faster. Compare p-36px vs p-9, it's slightly more effort to nudge something but autocomplete works well and mostly it's adding 4-8px at a time.

Not just me

These two tweets convinced me, one from the creator of tailwindcss and one from vanilla extract and css modules. Note that the creator of tailwind didn't remember the scale value off the top of his head -- because he is human like most of us.