4 ms·

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

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

xigoi 3y ago
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?
- conradfr 3y ago
  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.
  - deprecative 3y ago
    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.
    - ajanuary 3y ago
      Not really. Tailwind lets you configure your own spacing and breakpoints. You get to pick what those numbers mean.
      - deprecative 3y ago
        That's just a CSS variable. You don't need Tailwind for that.
        ajanuary 3y ago
        Never said you did. I was just explaining that you aren't "using someone else's padding and margin classes".
        cantSpellSober 3y ago
        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)
- dalmo3 3y ago
  You don't need 5 question marks to tell us you don't know what breakpoints are.
  - xigoi 3y ago
    I know what breakpoints are. As far as I'm aware, there are no standard values for them.
    - arrowsmith 3y ago
      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 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`.
- deleted 3y ago
  [deleted]
deliriumchn 3y ago
> 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.
- zztop44 3y ago
  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.
  - xigoi 3y ago
    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?
cantSpellSober 3y ago
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.

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

xigoi 3y ago

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?

conradfr 3y ago
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.
- deprecative 3y ago
  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.
  - ajanuary 3y ago
    Not really. Tailwind lets you configure your own spacing and breakpoints. You get to pick what those numbers mean.
    - deprecative 3y ago
      That's just a CSS variable. You don't need Tailwind for that.
      - ajanuary 3y ago
        Never said you did. I was just explaining that you aren't "using someone else's padding and margin classes".
      - cantSpellSober 3y ago
        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)
dalmo3 3y ago
You don't need 5 question marks to tell us you don't know what breakpoints are.
- xigoi 3y ago
  I know what breakpoints are. As far as I'm aware, there are no standard values for them.
  - arrowsmith 3y ago
    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 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`.
deleted 3y ago
[deleted]

deliriumchn 3y ago

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

zztop44 3y ago
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.
- xigoi 3y ago
  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?

cantSpellSober 3y ago

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.