Hacker News Reader

Comment by xigoi | Hacker News Reader

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?

View on HN

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`.

Reply on news.ycombinator.com