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:

https://tailwindcss.com/docs/responsive-design

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.