If css had a strong opinion and better syntax for responsiveness by screen width, css frameworks were way less popular. Tailwind, bootstrap and co. aren't used to avoid writing css. It's used because writing `class="my-4 mb-sm-5 mb-lg-6"` is so much faster and easier then doing this with a bunch of media queries and a class name, that has to be unique, because css is a global scope nightmare.

I mean, just look at it. You have to write all this crap in css just to achieve `class="my-4 mb-sm-5 mb-lg-6"`:

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