3 ms·

This is ridiculous. Tailwind css is a utility "framework", which generates configured css classes to set 1-2 css attributes each. The only reason it adds a buil

by ffsm8 3y ago

This is ridiculous. Tailwind css is a utility "framework", which generates configured css classes to set 1-2 css attributes each. The only reason it adds a build step is that it wants to tree-shake all unused classes to keep your bundle size as small as possible and let you configure which classes are available for generation. Even the documentation makes it extremely clear which properties are set by which class (the default ones anyway). As an actual example: how completely braindead do you have to be to not know which properties are set from looking at the official documentation? https://tailwindcss.com/docs/overscroll-behavior https://tailwindcss.com/docs/overscroll-behavior Your comparison to an ORM would work for things like Bulma, bootstrap and pretty much all component libraries, including TailwindUI. It's completely nonsensical for tailwindcss You've either never actually looked into tailwind css and are purely talking out of your ass or are just repeating this opinion from someone that did such. Disliking tailwind css is fine, and there are perfectly fine reasons to not use it. But your argument is just plain dumb.

Capricorn2481 3y ago
You're completely right, and it's annoying to see this downvoted. Having read a lot of frontend discussions on HN, I would wager that half the people talking about how "complex" frontend is don't work in it. Tailwind and regular CSS are hardly distinct, it's just slightly different names. It's very odd to see HN, supposedly a "self-thinker" crowd, continuously spout incorrect things because they heard someone else say it on here. Here are other things I've heard on HN repeatedly that aren't true (often in very upvoted comments). - You can't make a static site with React - React is only for SPAs. - You can't use React without NextJS anymore. - PHP is too slow for web development (maybe it is for your use case, but people seem to think it's bad for all use cases). - PHP doesn't have strict type checking. - NPM is somehow worse than every other packaging system (ignoring PIP, Maven, etc. NPM is surprisingly good at things that the rest of packaging systems don't get right).
- _akhe 3y ago
  > Tailwind and regular CSS are hardly distinct, it's just slightly different names Tailwind: <div className="shadow-lg" /> CSS: div { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); } Not to mention the Tailwind classNames are compiled to CSS in a build step, where CSS is not compiled, it's written in its native form. They're clearly very different syntaxes and approaches, even though one compiles to the other. The above example shows how convenient Tailwind can be... well if you happen to want that 10px 15px -3px, 4px 6px -4px shadow, but the moment you break out of their palette or default style setup you end up doing stuff like this: <div className="bg-[#243c5a]" /> Either storing that color value in JavaScript, or creating a Tailwind theme for it in tailwind.config.js: module.exports = { theme: { extend: { colors: { 'regal-blue': '#243c5a' } } } } Something that could have been easily accomplished in native CSS: :root { --regal-blue: #243c5a; } div { background-color: var(--regal-blue); } For most React websites, I use Tailwind by default almost always, and Tailwind UI is a great starting point for building a component library. But it still helps to support CSS for more advance styling use cases - even within Tailwind. Knowing CSS very well will make you better at Tailwind too even for common things like <div className="w-[calc(100% - 1rem)]" /> It's kinda important to know both as separate technologies.
  - Capricorn2481 3y ago
    That's a very extreme example, and yes, I would just use the bracket syntax in Tailwind because I can see clearly that's not what I want for box-shadow. If I didn't know how box shadow worked, Tailwind made it easier for me to decide by having defaults in the docs that map to the actual CSS.
    - _akhe 3y ago
      > a very extreme example It's not very extreme, it's literally any time you deviate from their prefab - so any truly custom UI. The size of shadow (corner radius, font-size, etc.) at different steps are hard-coded in Tailwind, if you want something else that's up to you. In terms of colors (text, background, etc.) they have a default palette, colors like "slate", etc. but anything else is up to you. So - most brands. > Tailwind makes box shadow easier Easier sure: What it does is give you the abstractions "shadow-sm", "shadow-lg", "shadow-none", etc. in fact a total of SEVEN options for shadows. That teaches you something - how to apply up to seven types of shadows! But you would be a lot more powerful of a developer if you knew how to do more than that. This doesn't teach you a foundation for understanding box-shadow or learning anything more - I think your point about learning is not valid. I learned CSS in 2003 from Myspace profiles and Dreamweaver - visual IDEs are great for education, so don't get me wrong here, I'm a believer in what I think you're getting at, but Tailwind aint it (for that).
      - ffsm8 3y ago
        We've been using visual generators since the introduction of the box-shadow css attribute. Did you ever actually write them fully by hand? I for one got better with css after using tailwindcss for a while. So Capricorn2481's statement is true at least for me. Before I used it for a while I've always gone with component libraries, after that I very rarely did... Aside from work projects that mandate specific libraries, anyway
        _akhe 3y ago
        Of course I know CSS shorthand by memory (and most of Tailwind too), and yeah definitely googled "tailwind box shadow" more often (which one is which). Back in my day we used Bootstrap classes but those guys put -15px margins everywhere so nobody uses their library anymore LOL

by ffsm8 3y ago

Capricorn2481 3y ago

You're completely right, and it's annoying to see this downvoted. Having read a lot of frontend discussions on HN, I would wager that half the people talking about how "complex" frontend is don't work in it. Tailwind and regular CSS are hardly distinct, it's just slightly different names. It's very odd to see HN, supposedly a "self-thinker" crowd, continuously spout incorrect things because they heard someone else say it on here. Here are other things I've heard on HN repeatedly that aren't true (often in very upvoted comments). - You can't make a static site with React - React is only for SPAs. - You can't use React without NextJS anymore. - PHP is too slow for web development (maybe it is for your use case, but people seem to think it's bad for all use cases). - PHP doesn't have strict type checking. - NPM is somehow worse than every other packaging system (ignoring PIP, Maven, etc. NPM is surprisingly good at things that the rest of packaging systems don't get right).

_akhe 3y ago
> Tailwind and regular CSS are hardly distinct, it's just slightly different names Tailwind: <div className="shadow-lg" /> CSS: div { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); } Not to mention the Tailwind classNames are compiled to CSS in a build step, where CSS is not compiled, it's written in its native form. They're clearly very different syntaxes and approaches, even though one compiles to the other. The above example shows how convenient Tailwind can be... well if you happen to want that 10px 15px -3px, 4px 6px -4px shadow, but the moment you break out of their palette or default style setup you end up doing stuff like this: <div className="bg-[#243c5a]" /> Either storing that color value in JavaScript, or creating a Tailwind theme for it in tailwind.config.js: module.exports = { theme: { extend: { colors: { 'regal-blue': '#243c5a' } } } } Something that could have been easily accomplished in native CSS: :root { --regal-blue: #243c5a; } div { background-color: var(--regal-blue); } For most React websites, I use Tailwind by default almost always, and Tailwind UI is a great starting point for building a component library. But it still helps to support CSS for more advance styling use cases - even within Tailwind. Knowing CSS very well will make you better at Tailwind too even for common things like <div className="w-[calc(100% - 1rem)]" /> It's kinda important to know both as separate technologies.
- Capricorn2481 3y ago
  That's a very extreme example, and yes, I would just use the bracket syntax in Tailwind because I can see clearly that's not what I want for box-shadow. If I didn't know how box shadow worked, Tailwind made it easier for me to decide by having defaults in the docs that map to the actual CSS.
  - _akhe 3y ago
    > a very extreme example It's not very extreme, it's literally any time you deviate from their prefab - so any truly custom UI. The size of shadow (corner radius, font-size, etc.) at different steps are hard-coded in Tailwind, if you want something else that's up to you. In terms of colors (text, background, etc.) they have a default palette, colors like "slate", etc. but anything else is up to you. So - most brands. > Tailwind makes box shadow easier Easier sure: What it does is give you the abstractions "shadow-sm", "shadow-lg", "shadow-none", etc. in fact a total of SEVEN options for shadows. That teaches you something - how to apply up to seven types of shadows! But you would be a lot more powerful of a developer if you knew how to do more than that. This doesn't teach you a foundation for understanding box-shadow or learning anything more - I think your point about learning is not valid. I learned CSS in 2003 from Myspace profiles and Dreamweaver - visual IDEs are great for education, so don't get me wrong here, I'm a believer in what I think you're getting at, but Tailwind aint it (for that).
    - ffsm8 3y ago
      We've been using visual generators since the introduction of the box-shadow css attribute. Did you ever actually write them fully by hand? I for one got better with css after using tailwindcss for a while. So Capricorn2481's statement is true at least for me. Before I used it for a while I've always gone with component libraries, after that I very rarely did... Aside from work projects that mandate specific libraries, anyway
      - _akhe 3y ago
        Of course I know CSS shorthand by memory (and most of Tailwind too), and yeah definitely googled "tailwind box shadow" more often (which one is which). Back in my day we used Bootstrap classes but those guys put -15px margins everywhere so nobody uses their library anymore LOL