Hacker News Reader

Comment by conradfr | Hacker News Reader

If you know the convention it's quite easy.

I don't know Tailwind but with Bootstrap it would be m = margin, y = y axis, b = bottom, sm/lg = screen size, 4/5/6 = size

View on HN

> If you know the convention it's quite easy.

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.

But isn’t BEM or a custom system of CSS variables strictly worse in this regard? Instead of knowing what class=“mb-4” means in Tailwind, they now need to know what class=“news-button” means in your specific application.

class="news-button" means that it's a news button and will be styled the way that news buttons are styled. What's difficult about that?

4/5/6 what? Bananas? And what exactly is “screen size”? Does it refer to physical size, or number of pixels? Does it count width, height, or both?

These refer to customizable variables and breakpoints that everyone using the library and having done css would know and you can probably click on your IDE to get to their definition.

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.

You're just using someone else's padding and margin classes. At least when you write your own it makes sense instead of Tailwind's alphabet soup bloat.

Not really. Tailwind lets you configure your own spacing and breakpoints. You get to pick what those numbers mean.

That's just a CSS variable. You don't need Tailwind for that.

Never said you did. I was just explaining that you aren't "using someone else's padding and margin classes".

They are CJS modules or (ideally) Typescript. CSS custom properties (variables) are slightly different.

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

(not arguing for or against TW here)

You don't need 5 question marks to tell us you don't know what breakpoints are.

I know what breakpoints are. As far as I'm aware, there are no standard values for them.

Here, here are Tailwind's standard breakpoints:

      '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) { ... }

That's from the docs. https://tailwindcss.com/docs/screens

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

I already know CSS, I don't want to learn another convention. I've learned Bootstrap, Tailwind, Foundation, Tachyons, Chakra, Bourbon...at each moment in time they were to be the "last" new CSS library we'd ever use.

Reply on news.ycombinator.com