7 ms·

> The more features that get added to Tailwind, the more you have to know about CSS before you can use those features. Right? So why not just bite the bullet an

by johnfn 4y ago

> The more features that get added to Tailwind, the more you have to know about CSS before you can use those features. Right? So why not just bite the bullet and learn to use CSS without the additional tooling (and weird, often lengthy additions to your HTML) that Tailwind and other utility-first styling frameworks require? This misses the point of Tailwind entirely. The point of Tailwind is to give everyone a common vernacular of CSS phrases so that I can bust out something like "p-2 m-2 border-red" super fast and still be writing code which is immediately comprehensible to everyone else on my team. There's also the benefit that I no longer have to think about class names, which is shockingly large. Using CSS does not give you that. I don't even address the "learn to use CSS" phrase because anyone who uses Tailwind obviously knows CSS! We do the translation back and forth in our head as necessary. It's also why I'm not concerned about Tailwind getting more features: * Tailwind needs to have all the features of CSS, otherwise it's incomplete. * The notion of Tailwind being "bloated" makes no sense: * The Tailwind compiler eliminates any styles you don't need. * Tailwind stylesheets are always going to be much smaller than normal CSS for any decently-sized app.

blowski 4y ago
> Tailwind needs to have all the features of CSS, otherwise it's incomplete. This is how I see it too. If Tailwind doesn't bother adopting some CSS features, I have to jump between Tailwind and CSS files and syntax.
- inopinatus 4y ago
  The occurrences have become fewer and farther between, but in such cases I'll configure my own utilities until the project catches up. The syntax for adding utilities is lightweight and embeds directly in config, ref. https://tailwindcss.com/docs/plugins#adding-utilities https://tailwindcss.com/docs/plugins#adding-utilities
shubhamjain 4y ago
> Using CSS does not give you that. I don't even address the "learn to use CSS" phrase because anyone who uses Tailwind obviously knows CSS! We do the translation back and forth in our head as necessary. While I agree, sometimes I feel Tailwind users forget that writing regular CSS is also an option. I have seen examples where developers repeat Tailwind classes for every paragraph, every link. They repeat same typography styles over and over again instead of creating some base CSS. A great example is this checkbox[1] where developers used 71 Tailwind classes to style the input. [1]: https://twitter.com/hovhaDovah/status/1461672155108806658 https://twitter.com/hovhaDovah/status/1461672155108806658
- Raymonf 4y ago
  By "base CSS" are you referring to using @apply? That's generally not recommended from what I understand, with componentization and reuse being preferred over most usages of @apply for this purpose.
  - brycewray 4y ago
    Re `@apply`, that's correct, per Adam Wathan himself[0]: > Confession: The `apply` feature in Tailwind basically only exists to trick people who are put off by long lists of classes into trying the framework > You should almost never use it > Reuse your utility-littered HTML instead. [0]: https://twitter.com/adamwathan/status/1226511611592085504 https://twitter.com/adamwathan/status/1226511611592085504
  - shubhamjain 4y ago
    I feel us programmers should be open to breaking rules in favor of convenience. I don't see an issue to why you can't use `p:not(:first-child) { margin-top: 12px; }` just because you're using Tailwind (that particular rule gives a margin to every paragraph except the first one which is usually needed in articles). The most productive programmers I have seen frequently disregarded best practices if it suited the situation.
    - silvenon 4y ago
      You mean like this supported utility class `[&_p:not(:first-child)]:mt-[12px]`?
  - yawnxyz 4y ago
    I tried to avoid using @apply but that makes creating variations (e.g. of button styles) REALLY hard — as your code is just littered with class names. Plus if you're adding :active :hover and :focus styles, you have to do it on ALL the variations on all of the pages. It's frustrating and takes a really long time. I've moved to using @apply in a few generalized classes and I love it, since my class names like "btn" "btn-success" "btn-success-outline" describes what I want, and I can easily go in and change them. I'm not creating a new component for every tiny thing, like a button or a link, just so I can avoid using @apply...
BryanBeshore 4y ago
Upvoted. OP seems to miss the point that most everyone - or at least everyone I know - that uses Tailwind already knows CSS to a large degree. In addition, everyone I work with would rather spend time writing code than messing around with CSS and trying to name classes (great point you make, and I fully agree)
- runarberg 4y ago
  As a frontend developer I don’t understand this sentiment. I’ve learned to style websites using CSS, so has every other frontend developer, learning CSS is part of the craft, and if you skip it, you don’t know frontend development. Writing CSS is a big part of the job of a frontend developer. Now if you are a hacker and are hacking together a website, that is fine. You don’t need to be a frontend developer to write a website, and if that is the case, use tailwind by all means. However in a team that maintains a webapp, you should expect there to be a frontend developer, and you should expect them to know and write CSS, if they are the only person on the team that knows CSS, then probably they will take some authority on that, and I would expect them to assert some authority on every code that contains some styling. If a contributor doesn’t know CSS, and writes a poor CSS code, that should be fixed during peer review. A team that is happy-go-lucky with their styles is surely not going to by writing a well crafted web-app.
  - subarctic 4y ago
    What I understand about Tailwind is that it is _meant_ for those frontend developers who understand CSS, and you're essentially writing CSS when you use Tailwind - as opposed to a component library like bootstrap or material ui. This sentence: >Now if you are a hacker and are hacking together a website, that is fine. You don’t need to be a frontend developer to write a website, and if that is the case, use tailwind by all means. Would make more sense IMO if you replaced the word "tailwind" with "a component library"
colordrops 4y ago
Tailwind feels like the coffeescript of CSS.
- johnfn 4y ago
  The difference between Tailwind and CoffeeScript to me seems to be more in the underlying language. JS (and programming in general) is actually quite complex, and you can't hide that complexity under a shiny veneer and hope it goes away. CSS on the other hand is not complex at all. For that reason, it's a lot more plausible that you can make big strides by simplifying the language down to its core essence.
- lenkite 4y ago
  And controversial opinion - it will have just as as short a shelf-life as coffee-script. Once the CSS spec advances, there will a lot of posts with titles like: "Why you don't need tailwind" or "Learn how to get rid of the tailwind bloat", "Migrating back to Core CSS", "Back to clean, semantic HTML", etc.
- m00x 4y ago
  That was SASS. Tailwind is much different than just syntax sugar.
zelphirkalt 4y ago
One of the signs of something being bloated is, when you need some compiler or "tree shaker" or <insert other fancy term here> to throw out the stuff, that you included in the first place, but are not using. Something like "p-2 m-2 border-red" making sense relies on some imaginary grid or table layout being used. Web design should catch up at some point and get rid of that way of thinking. Websites are not bound to be aligned according to some grid. On a website things float and take as much space as needed and as available. There is no inherent need for inventing an imaginary grid. Yet so many "design systems" cling to that outdated notion. A website is not a sheet of paper in a magazine! It is like we still haven't left bootstrap behind us, or even table layout behind us, because web designers not actually knowing CSS. Actually look at https://web.dev/state-of-css-2022/ https://web.dev/state-of-css-2022/ (linked here on HN a few days/a day ago). CSS is easier to use than ever before! Now we can even specify our own specificity groups! Once tailwind covers all needs for features of CSS, what will we have gained? We merely built another wrapper layer around the thing, that we should actually understand and learn. In my experience this will only lead to people thinking, that they should build something on top of tailwind, because they want something simpler, stacking yet another layer of abstraction, instead of actually learning CSS. At some point some sanity will return and do away with the whole stack of abstractions, because it indeed has become too bloated. (Note also, that no one will want to maintain your website based on tailwind, once the hype is gone and tailwind looks outdated.) This kind of mentality of adding layer upon layer without watching out for the associated costs or realizing the power of already existing primitives is responsible for the tons of bloated websites we have today. For shipping megabytes of JS unnecessarily, instead of letting us enjoy the advantages of faster connections, like we should be able to. About naming CSS classes: Surely not always a simple thing. Ideally the web design people would work together with the web development people and talk about their metaphors or abstractions on the website. Then find names for that and style accordingly. "How will we call this kind of thing here, with a picture and a label underneath and a rating? – Lets call it a product box." Or whatever else. They would build a common vocabulary and that would inform naming of CSS classes of the website. Additionally of course one would use a prefix, to avoid any name clashes with any other stylesheets.
- unculture 4y ago
  There’s no imaginary grid here, m-2 and p-2 are just setting margins and padding. The 2 is a point in a table of sensible defaults for those values. You are free to set your own scale or just use your units of choice if you like. The defaults are well thought out though, and usually work well. The whole point of Tailwind is that the worry about naming CSS classes goes away for most part. It turns out you can safely skip the vast majority of those granular naming decisions and conversations - that’s a massive amount of saved time and brain cycles for everyone. If you’re using eg. BEM you have to come up with all these granular names for subcomponents that really no one cares about apart from you (the frontender I mean). If you’re not using BEM or similar and going for longer selectors in the main, then you have a coupling issue between the structure of your CSS selectors and the structure of the HTML that may make maintenance in the future harder.
Aeolun 4y ago
> I can bust out something like "p-2 m-2 border-red" super fast and still be writing code which is immediately comprehensible to everyone else on my team Is this somehow not possible if you say “padding: 2px, margin: 2px, border: 1px red solid”?
- markdown 4y ago
  Possible, yes. But takes twice the typing.
  - doodlesdev 4y ago
    Only if you are coding in notepad. With any coding text editor that would be completed, with any ML model (Copilot and co.) this could take less than 5 keystrokes. By the way, not entirely related, but when testing Copilot when it was free I noticed it was amazing at generating styles for something based on a class name. To the point I felt more productive and more in control than when using Tailwind, Bootstrap, MUI, or any other CSS "framework".
- kevlened 4y ago
  Not quite. You would have to adjust for the default units in Tailwind for the padding and margin: "padding: 0.5rem, margin: 0.5rem" In practice, GP wouldn't use "border-red", they'd use a shade of red (border-red-100, border-red-200, etc). The higher the number, the darker the shade. These defaults are an underrated feature. The defaults for spacing ensure things look cohesive, and the defaults for color are supposed to harmonize well. They're informed by the book Refactoring UI [https://www.refactoringui.com https://www.refactoringui.com] to ensure your design has structure. They're designed to make it easy to adjust parts of your design, without guessing, when things look "off".
- joshxyz 4y ago
  thing is this is way too easy for developers only focused on frontend development. for us backend developers also doing database, caching, networking, storage, etc. being able to write "m-2 p-2 border border-red-600" is way easier to remember and doesnt take that much brain cpu cycles that we reserve for more important stuff.
cuu508 4y ago
> Tailwind stylesheets are always going to be much smaller than normal CSS for any decently-sized app. Instead the HTML content grows larger because of the long class= attributes. It is a bad tradeoff, because CSS gets loaded once and cached, but HTML gets loaded on every page load.
- smrq 4y ago
  I don't understand why Tailwind proponents can't seem to see this, and tout "smaller CSS files!" as a benefit. You're still declaring the styles for every element somewhere. The client has to get those bytes somehow. That doesn't get to go away. (And if it's just about "m-2" being shorter than "margin: 0.5rem" or whatever... I can't believe that after gzip that matters one whit.)
sgt 4y ago
Exactly. Anyone using Tailwind should be proficient in CSS. Or become proficient by looking at class definitions.

by johnfn 4y ago

blowski 4y ago

> Tailwind needs to have all the features of CSS, otherwise it's incomplete. This is how I see it too. If Tailwind doesn't bother adopting some CSS features, I have to jump between Tailwind and CSS files and syntax.

inopinatus 4y ago
The occurrences have become fewer and farther between, but in such cases I'll configure my own utilities until the project catches up. The syntax for adding utilities is lightweight and embeds directly in config, ref. https://tailwindcss.com/docs/plugins#adding-utilities https://tailwindcss.com/docs/plugins#adding-utilities

shubhamjain 4y ago

> Using CSS does not give you that. I don't even address the "learn to use CSS" phrase because anyone who uses Tailwind obviously knows CSS! We do the translation back and forth in our head as necessary. While I agree, sometimes I feel Tailwind users forget that writing regular CSS is also an option. I have seen examples where developers repeat Tailwind classes for every paragraph, every link. They repeat same typography styles over and over again instead of creating some base CSS. A great example is this checkbox[1] where developers used 71 Tailwind classes to style the input. [1]: https://twitter.com/hovhaDovah/status/1461672155108806658 https://twitter.com/hovhaDovah/status/1461672155108806658

Raymonf 4y ago
By "base CSS" are you referring to using @apply? That's generally not recommended from what I understand, with componentization and reuse being preferred over most usages of @apply for this purpose.
- brycewray 4y ago
  Re `@apply`, that's correct, per Adam Wathan himself[0]: > Confession: The `apply` feature in Tailwind basically only exists to trick people who are put off by long lists of classes into trying the framework > You should almost never use it > Reuse your utility-littered HTML instead. [0]: https://twitter.com/adamwathan/status/1226511611592085504 https://twitter.com/adamwathan/status/1226511611592085504
- shubhamjain 4y ago
  I feel us programmers should be open to breaking rules in favor of convenience. I don't see an issue to why you can't use `p:not(:first-child) { margin-top: 12px; }` just because you're using Tailwind (that particular rule gives a margin to every paragraph except the first one which is usually needed in articles). The most productive programmers I have seen frequently disregarded best practices if it suited the situation.
  - silvenon 4y ago
    You mean like this supported utility class `[&_p:not(:first-child)]:mt-[12px]`?
- yawnxyz 4y ago
  I tried to avoid using @apply but that makes creating variations (e.g. of button styles) REALLY hard — as your code is just littered with class names. Plus if you're adding :active :hover and :focus styles, you have to do it on ALL the variations on all of the pages. It's frustrating and takes a really long time. I've moved to using @apply in a few generalized classes and I love it, since my class names like "btn" "btn-success" "btn-success-outline" describes what I want, and I can easily go in and change them. I'm not creating a new component for every tiny thing, like a button or a link, just so I can avoid using @apply...

BryanBeshore 4y ago

Upvoted. OP seems to miss the point that most everyone - or at least everyone I know - that uses Tailwind already knows CSS to a large degree. In addition, everyone I work with would rather spend time writing code than messing around with CSS and trying to name classes (great point you make, and I fully agree)

runarberg 4y ago
As a frontend developer I don’t understand this sentiment. I’ve learned to style websites using CSS, so has every other frontend developer, learning CSS is part of the craft, and if you skip it, you don’t know frontend development. Writing CSS is a big part of the job of a frontend developer. Now if you are a hacker and are hacking together a website, that is fine. You don’t need to be a frontend developer to write a website, and if that is the case, use tailwind by all means. However in a team that maintains a webapp, you should expect there to be a frontend developer, and you should expect them to know and write CSS, if they are the only person on the team that knows CSS, then probably they will take some authority on that, and I would expect them to assert some authority on every code that contains some styling. If a contributor doesn’t know CSS, and writes a poor CSS code, that should be fixed during peer review. A team that is happy-go-lucky with their styles is surely not going to by writing a well crafted web-app.
- subarctic 4y ago
  What I understand about Tailwind is that it is _meant_ for those frontend developers who understand CSS, and you're essentially writing CSS when you use Tailwind - as opposed to a component library like bootstrap or material ui. This sentence: >Now if you are a hacker and are hacking together a website, that is fine. You don’t need to be a frontend developer to write a website, and if that is the case, use tailwind by all means. Would make more sense IMO if you replaced the word "tailwind" with "a component library"

colordrops 4y ago

Tailwind feels like the coffeescript of CSS.

johnfn 4y ago
The difference between Tailwind and CoffeeScript to me seems to be more in the underlying language. JS (and programming in general) is actually quite complex, and you can't hide that complexity under a shiny veneer and hope it goes away. CSS on the other hand is not complex at all. For that reason, it's a lot more plausible that you can make big strides by simplifying the language down to its core essence.
lenkite 4y ago
And controversial opinion - it will have just as as short a shelf-life as coffee-script. Once the CSS spec advances, there will a lot of posts with titles like: "Why you don't need tailwind" or "Learn how to get rid of the tailwind bloat", "Migrating back to Core CSS", "Back to clean, semantic HTML", etc.
m00x 4y ago
That was SASS. Tailwind is much different than just syntax sugar.

zelphirkalt 4y ago

One of the signs of something being bloated is, when you need some compiler or "tree shaker" or <insert other fancy term here> to throw out the stuff, that you included in the first place, but are not using. Something like "p-2 m-2 border-red" making sense relies on some imaginary grid or table layout being used. Web design should catch up at some point and get rid of that way of thinking. Websites are not bound to be aligned according to some grid. On a website things float and take as much space as needed and as available. There is no inherent need for inventing an imaginary grid. Yet so many "design systems" cling to that outdated notion. A website is not a sheet of paper in a magazine! It is like we still haven't left bootstrap behind us, or even table layout behind us, because web designers not actually knowing CSS. Actually look at https://web.dev/state-of-css-2022/ https://web.dev/state-of-css-2022/ (linked here on HN a few days/a day ago). CSS is easier to use than ever before! Now we can even specify our own specificity groups! Once tailwind covers all needs for features of CSS, what will we have gained? We merely built another wrapper layer around the thing, that we should actually understand and learn. In my experience this will only lead to people thinking, that they should build something on top of tailwind, because they want something simpler, stacking yet another layer of abstraction, instead of actually learning CSS. At some point some sanity will return and do away with the whole stack of abstractions, because it indeed has become too bloated. (Note also, that no one will want to maintain your website based on tailwind, once the hype is gone and tailwind looks outdated.) This kind of mentality of adding layer upon layer without watching out for the associated costs or realizing the power of already existing primitives is responsible for the tons of bloated websites we have today. For shipping megabytes of JS unnecessarily, instead of letting us enjoy the advantages of faster connections, like we should be able to. About naming CSS classes: Surely not always a simple thing. Ideally the web design people would work together with the web development people and talk about their metaphors or abstractions on the website. Then find names for that and style accordingly. "How will we call this kind of thing here, with a picture and a label underneath and a rating? – Lets call it a product box." Or whatever else. They would build a common vocabulary and that would inform naming of CSS classes of the website. Additionally of course one would use a prefix, to avoid any name clashes with any other stylesheets.

unculture 4y ago
There’s no imaginary grid here, m-2 and p-2 are just setting margins and padding. The 2 is a point in a table of sensible defaults for those values. You are free to set your own scale or just use your units of choice if you like. The defaults are well thought out though, and usually work well. The whole point of Tailwind is that the worry about naming CSS classes goes away for most part. It turns out you can safely skip the vast majority of those granular naming decisions and conversations - that’s a massive amount of saved time and brain cycles for everyone. If you’re using eg. BEM you have to come up with all these granular names for subcomponents that really no one cares about apart from you (the frontender I mean). If you’re not using BEM or similar and going for longer selectors in the main, then you have a coupling issue between the structure of your CSS selectors and the structure of the HTML that may make maintenance in the future harder.

Aeolun 4y ago

> I can bust out something like "p-2 m-2 border-red" super fast and still be writing code which is immediately comprehensible to everyone else on my team Is this somehow not possible if you say “padding: 2px, margin: 2px, border: 1px red solid”?

markdown 4y ago
Possible, yes. But takes twice the typing.
- doodlesdev 4y ago
  Only if you are coding in notepad. With any coding text editor that would be completed, with any ML model (Copilot and co.) this could take less than 5 keystrokes. By the way, not entirely related, but when testing Copilot when it was free I noticed it was amazing at generating styles for something based on a class name. To the point I felt more productive and more in control than when using Tailwind, Bootstrap, MUI, or any other CSS "framework".
kevlened 4y ago
Not quite. You would have to adjust for the default units in Tailwind for the padding and margin: "padding: 0.5rem, margin: 0.5rem" In practice, GP wouldn't use "border-red", they'd use a shade of red (border-red-100, border-red-200, etc). The higher the number, the darker the shade. These defaults are an underrated feature. The defaults for spacing ensure things look cohesive, and the defaults for color are supposed to harmonize well. They're informed by the book Refactoring UI [https://www.refactoringui.com https://www.refactoringui.com] to ensure your design has structure. They're designed to make it easy to adjust parts of your design, without guessing, when things look "off".
joshxyz 4y ago
thing is this is way too easy for developers only focused on frontend development. for us backend developers also doing database, caching, networking, storage, etc. being able to write "m-2 p-2 border border-red-600" is way easier to remember and doesnt take that much brain cpu cycles that we reserve for more important stuff.

cuu508 4y ago

> Tailwind stylesheets are always going to be much smaller than normal CSS for any decently-sized app. Instead the HTML content grows larger because of the long class= attributes. It is a bad tradeoff, because CSS gets loaded once and cached, but HTML gets loaded on every page load.

smrq 4y ago
I don't understand why Tailwind proponents can't seem to see this, and tout "smaller CSS files!" as a benefit. You're still declaring the styles for every element somewhere. The client has to get those bytes somehow. That doesn't get to go away. (And if it's just about "m-2" being shorter than "margin: 0.5rem" or whatever... I can't believe that after gzip that matters one whit.)

sgt 4y ago

Exactly. Anyone using Tailwind should be proficient in CSS. Or become proficient by looking at class definitions.