I've seen Perl code that was more readable than this.

I guess m = margin, y = y axis, b = bottom, sm/lg = screen size, 4/5/6 = size

Personally I think that's way better than putting padding & margin in your own css classes.

It actually cuts down a lot on the custom css you need to write and also helps having a uniform design.

    import type { Config } from 'tailwindcss'
    
    export default {
      content: [],
      theme: {
        extend: {},
      },
      plugins: [],
    } satisfies Config

      'sm': '640px',
      // => @media (min-width: 640px) { ... }

      'md': '768px',
      // => @media (min-width: 768px) { ... }

      'lg': '1024px',
      // => @media (min-width: 1024px) { ... }

      'xl': '1280px',
      // => @media (min-width: 1280px) { ... }

      '2xl': '1536px',
      // => @media (min-width: 1536px) { ... }

If you don't want those specific breakpoints in your project, you can override the defaults in `tailwind.config.js`.

This is exactly the problem. Humans write code for humans, not for tailwind specialists and bots. It should be clear and easy to read unless there is a valid reason for weird code (optimisations, hacks that don't work otherwise etc). Tailwind introduces yet another convention where it is absolutely pointless to do so.

  .foo {
    padding: 1rem 0;
    @media (min-width: 500px) { padding-bottom: 1.5rem; }
    @media (min-width: 800px) { padding-bottom: 2rem; }
  }

There are some properties of CSS that are more static across screen sizes. Colors, borders, backgrounds, font-size (debatable!), animations, and maybe even some high level layouts (12 column grid, etc).

The rest of CSS is minute positioning via padding, margins, and widths. Often you need to customize those details to use slightly different values dependent on context within the application itself. This is where utility classes shine.

As for the media queries being hard/tiresome to write, don't we have IDE auto-completion for this exact purpose?