A “default first” approach with Tailwind
Tailwind CSS is a mobile first, utility CSS framework which will vastly increase productivity while implementing designs in your web app or website.
A small DX improvement I make in my Tailwind projects, which I’m describing as a “default first” approach (this is a semi-joke derived from mobile first).
It revolves around targeting styles for mobile. The Tailwind docs specify:
If you’d like to apply a utility at one breakpoint only, the solution is to undo that utility at larger sizes by adding another utility that counteracts it.
This is a small DX annoyance for me, why should I have to apply something only to reset it later?
So, I’ve created a convention for some extra Tailwind breakpoints which will allow me to target breakpoints at smaller sizes and at exact sizes. The Tailwind config looks like:
Play around with this at Tailwind Play. This is what some HTML could look like:
This small improvement lets me think a little more device specific when adding styles. Let me know what you think in the comments.
