9 ms·

These are fairly complex use-cases that aren't needed for 99.9% of CSS people write. In most cases I'm throwing together a handful of components in a flex conta

by hbn 4y ago

These are fairly complex use-cases that aren't needed for 99.9% of CSS people write. In most cases I'm throwing together a handful of components in a flex container or right-aligning some buttons or something. And for that typical CSS usecase, I find Tailwind way better both for quickly iterating and for hopping into code someone else wrote. I love not having to bounce between and cross-reference 2 (or more!) files (HTML + CSS) for a description of a single layout. I started using Tailwind at my job I started 2.5 years ago and after the learning curve of memorizing the commonly used class names I have yet to run into a situation where I wished we weren't using it. I also started adopting it in all my personal projects because it makes me so much faster at getting work done and the code is easier to maintain. I really feel like people start with their conclusion that they don't like it because it's weird and foreign and then look for excuses to justify why they think it's bad.

nailer 4y ago
> I love not having to bounce between and cross-reference 2 (or more!) files (HTML + CSS) for a description of a single layout. Oh wow. Literally this is the exact argument I use for not using tailwind - not having my styling logic split between classes in my HTML and tailwind’s own files implementing the styles (which appears in DevTools and most other places). Not saying either of us is right or wrong it’s just odd how different people perceive things. Does your framework do CSS in it’s component files? If not, maybe that’s the problem?
- 411111111111111 4y ago
  So just to be clear: your argument is that you like to cross reference multiple files before you know what is applied, when? And for the record, tailwind was never meant to be used exclusively. Most arguments against it are centered around edge cases which are tiresome with tailwind... But they're usually pretty silly as you were never meant to abstain from using css if it makes sense. And yes, that means you'll still have to check multiple files if something behaves differently then you'd expect, it's just less frequent then without a utility css framework
- pindab0ter 4y ago
  How does Tailwind require bouncing between multiple files? Everything is in the HTML in the form of class names. Yes, you will have to know what the classes do, but where that isn't already intuitive it's just a one-off lookup, and then you know. HTML + CSS can simply not be parsed without hoping between multiple files. Unless you inline all of your CSS, of course.
  - eajakobsen 4y ago
    I think the point in the comment you are replying to is that they _prefer_ having markup and styles in separate files.
    - solumunus 4y ago
      You can still do that though. I swear half the Tailwind haters haven't used it for more than 30 minutes, or at all.
      - xigoi 4y ago
        Then what's the advantage of Tailwind?
        solumunus 4y ago
        Standardised and clean CSS syntax. The benefits in that context are debatable, a component based frontend architecture is where it absolutely shines. If you end up using it in that context you won't need to ask this question, it quickly becomes clear that it's the optimal path.
        emmacharp 4y ago
        What can't pure CSS do here and that Tailwind does ? The CSS syntax is already clean and standardized if you use it properly and don't name every little piece of interface. It is a genuine question, by the way...
        4y ago
theturtletalks 4y ago
Tailwind is honestly great for beginners since it "simplifies" CSS into short-hand classes. The people that know CSS don't want to learn new classnames when they can use CSS and that is a standard. I'm personally scared of forgetting CSS if I use Tailwind extensively. I also don't like the aesthetic of all the classnames being bunched together, but Tailwind does have value.
- bboylen 4y ago
  I think its possible to forget some of the exact names, but most of the Tailwind classes are just shorthands for the CSS styles. Furthermore, even if you develop in Tailwind, you still see the normal CSS style names when using browser tools. If you decided to do a project in vanilla CSS, I'm sure the style names would come back very quickly.
- hbn 4y ago
  I should clarify, I wasn't a beginner when I started using Tailwind. I already had frontend experience, it's just my current job already had started using Tailwind in all their webapps before I started. I don't think Tailwind is the place to start learning CSS. Tailwind is just a more efficient way to write CSS, and you should be aware of what's going on under the hood. It doesn't mean if you're writing your CSS in Tailwind you're never gonna look at normal CSS. There's plenty of times when I'm iterating on a design and I'll hop into the "Styles" section of my console and directly edit the element.style{} section, writing normal CSS to mock something out before translating it back into Tailwind in my editor. So I certainly haven't forgotten normal CSS names. Not to mention the Tailwind names generally match up pretty closely with the underlying CSS names. It's only minor translations to go between the two, and maybe a special case here or there. The documentation[1] is very good with a quick search can type CSS or Tailwind names into to find what you want, and it'll show both the Tailwind name and the CSS attributes/values it outputs so I tend to keep that open in a tab while I work. [1] https://tailwindcss.com/docs/ https://tailwindcss.com/docs/
  - greenhatman 4y ago
    For me Tailwind is sort of a shortcut to learning best practices. If I had to research and figure out best practices on my own it would take ages. Instead I can just see what Tailwind does. E.g. when to use em vs px. That kind of stuff.
EugeneOZ 4y ago
Disagree, an example with margins (the second example in the article) is not complicated or rare.
- bgkim 4y ago
  Tailwind acknowledges the limitation [1] and also provides gap utilities [2]: <div class="flex gap-x-2"> which translates to display: flex; column-gap: 0.5rem; [1]: https://tailwindcss.com/docs/space#limitations https://tailwindcss.com/docs/space#limitations [2]: https://tailwindcss.com/docs/gap https://tailwindcss.com/docs/gap Edit: formatting
yellow_lead 4y ago
> I really feel like people start with their conclusion that they don't like it because it's weird and foreign and then look for excuses to justify why they think it's bad. At least from this article, I get the impression the author used tailwind for a bit and kept running into these issues where he had to go in and fix it manually in CSS. After enough of these, you get annoyed.
- onion2k 4y ago
  After enough of these, you get annoyed. If they're typical things that you'd expect a library to solve, sure. If they're "I want my element to rotate in 3D" then most developers would think they're just working outside of the scope of the library.
  - sfvisser 4y ago
    Libraries that have a scope defined implicitly by what accidentally works or doesn’t work can still be very annoying.
    - tonerow 4y ago
      _this_
    - Aeolun 4y ago
      It's not like the `style` object is far away. Nothing about Tailwind prohibits you from using normal classes.
      - admax88qqq 4y ago
        Yes tailwind let's you reach through and apply some CSS directly. Almost like its an abstraction that exposes, or leaks, that which it attemps to abstract. A "leaky abstraction" if you will.
        horsawlarway 4y ago
neovive 4y ago
I agree that the use cases shown are not representative of the vast majority of projects. After using Tailwind for almost two years, I find the biggest strengths are: a common set of naming conventions (don't underestimate how hard it is to name classes well and consistently across projects); bundling of commonly used features (autoprefixing, purging unused classes); and how well it works with component libraries. Beyond that, Tailwind is just CSS — unlike pre-compilers like SaaS and LESS that actually extend CSS.
pdntspa 4y ago
I've looked at tailwind as an individual, but their pay-for-documentation model is absolutely bullshit. And it doesn't seem to be doing anything different from Bootstrap or 99% of the other CSS frameworks out there. Also, it makes me sad to see people so eager to throw away separation of concerns :( Yes everything describing it is on one screen but now your HTML is filled up with hundreds of words of awful classnames and markup that should have been put elsewhere!
- kaba0 4y ago
  > Also, it makes me sad to see people so eager to throw away separation of concerns I don’t think it has ever lived up to expectations, HTML+CSS in that way is simply broken. You can’t really write CSS without hard-coding the HTML structure, so you might as well do it in one file.
  - pdntspa 4y ago
    No, I think people just suck now. While you can't eliminate all structural concerns in CSS (think nesting selectors), sensible class naming and adhering to the structure of the medium (instead of fighting it by trying to directly translate a photoshop mockup or w/e), this is entirely possible.
    - kaba0 4y ago
      But now you just have a single-use html+stylesheet, as I wrote. No separation of concern anywhere, and both html and css can only be written by knowing the other part.
      - pdntspa 4y ago
        Why is the stylesheet single use? The classes can be used anywhere, as they should be. Make components in the CSS and call them by their classname in HTML. You are building generic components here. I don't see the issue with 'separate files', do people not use split view mode in their IDE? edit- this comment in another thread: https://news.ycombinator.com/item?id=33789859 https://news.ycombinator.com/item?id=33789859
bastardoperator 4y ago
Exactly. No matter what, this person decided before they even used tailwinds that it was going to be bad. They used their time with the tool to point out obscure cases so they could say "see, I was right, it leaks". They then try to tie together at the end with a "I'm not saying it was bad". This type of drama or negative style of writing needs to stop. Be objective, there is good and bad everywhere.
antihero 4y ago
The other cool thing is that you can code up your design system in the tailwind config and never have to worry about devs not using the correct sizes/colours/etc.
- gr__or 4y ago
  I recall there being Stylelint rules for linting against hardcoded values. I can't seem to find the link rn though.
- emmacharp 4y ago
  You can do exactly the same with pure CSS. This is not a Tailwind advantage.
  - antihero 4y ago
    How much effort does it take to set up, though? I thought the CSS variable system was pretty rudimentary.
    - emmacharp 4y ago
      > How much effort does it take to set up, though? Practically none. And any designer is prone to reuse the same spacings from project to project. So you bring the language file with you. Something like this : :root { --spacing-sm: 1rem; --spacing-md: 2rem; --size-tall: 32px; ... } And you can do some pretty nice things with these pure CSS tokens. Without any hassle or dependency.
      - antihero 4y ago
        This seems more annoying than using tailwind.
mierz00 4y ago
One thing that has been an absolute deal breaker for me is adding variants for components. Say I have a button component with different variants, these variants change styles across multiple elements in the component. Using scss and BEM this is incredibly simple, add a parent class and I can modify nested elements easily. But using tailwind I have to make an mess of things to get this working or recreate the component. I’d love to hear how anyone solves this issue.

by hbn 4y ago

nailer 4y ago

> I love not having to bounce between and cross-reference 2 (or more!) files (HTML + CSS) for a description of a single layout. Oh wow. Literally this is the exact argument I use for not using tailwind - not having my styling logic split between classes in my HTML and tailwind’s own files implementing the styles (which appears in DevTools and most other places). Not saying either of us is right or wrong it’s just odd how different people perceive things. Does your framework do CSS in it’s component files? If not, maybe that’s the problem?

411111111111111 4y ago
So just to be clear: your argument is that you like to cross reference multiple files before you know what is applied, when? And for the record, tailwind was never meant to be used exclusively. Most arguments against it are centered around edge cases which are tiresome with tailwind... But they're usually pretty silly as you were never meant to abstain from using css if it makes sense. And yes, that means you'll still have to check multiple files if something behaves differently then you'd expect, it's just less frequent then without a utility css framework
pindab0ter 4y ago
How does Tailwind require bouncing between multiple files? Everything is in the HTML in the form of class names. Yes, you will have to know what the classes do, but where that isn't already intuitive it's just a one-off lookup, and then you know. HTML + CSS can simply not be parsed without hoping between multiple files. Unless you inline all of your CSS, of course.
- eajakobsen 4y ago
  I think the point in the comment you are replying to is that they _prefer_ having markup and styles in separate files.
  - solumunus 4y ago
    You can still do that though. I swear half the Tailwind haters haven't used it for more than 30 minutes, or at all.
    - xigoi 4y ago
      Then what's the advantage of Tailwind?
      - solumunus 4y ago
        Standardised and clean CSS syntax. The benefits in that context are debatable, a component based frontend architecture is where it absolutely shines. If you end up using it in that context you won't need to ask this question, it quickly becomes clear that it's the optimal path.
        emmacharp 4y ago
        What can't pure CSS do here and that Tailwind does ? The CSS syntax is already clean and standardized if you use it properly and don't name every little piece of interface. It is a genuine question, by the way...
        4y ago

theturtletalks 4y ago

Tailwind is honestly great for beginners since it "simplifies" CSS into short-hand classes. The people that know CSS don't want to learn new classnames when they can use CSS and that is a standard. I'm personally scared of forgetting CSS if I use Tailwind extensively. I also don't like the aesthetic of all the classnames being bunched together, but Tailwind does have value.

bboylen 4y ago
I think its possible to forget some of the exact names, but most of the Tailwind classes are just shorthands for the CSS styles. Furthermore, even if you develop in Tailwind, you still see the normal CSS style names when using browser tools. If you decided to do a project in vanilla CSS, I'm sure the style names would come back very quickly.
hbn 4y ago
I should clarify, I wasn't a beginner when I started using Tailwind. I already had frontend experience, it's just my current job already had started using Tailwind in all their webapps before I started. I don't think Tailwind is the place to start learning CSS. Tailwind is just a more efficient way to write CSS, and you should be aware of what's going on under the hood. It doesn't mean if you're writing your CSS in Tailwind you're never gonna look at normal CSS. There's plenty of times when I'm iterating on a design and I'll hop into the "Styles" section of my console and directly edit the element.style{} section, writing normal CSS to mock something out before translating it back into Tailwind in my editor. So I certainly haven't forgotten normal CSS names. Not to mention the Tailwind names generally match up pretty closely with the underlying CSS names. It's only minor translations to go between the two, and maybe a special case here or there. The documentation[1] is very good with a quick search can type CSS or Tailwind names into to find what you want, and it'll show both the Tailwind name and the CSS attributes/values it outputs so I tend to keep that open in a tab while I work. [1] https://tailwindcss.com/docs/ https://tailwindcss.com/docs/
- greenhatman 4y ago
  For me Tailwind is sort of a shortcut to learning best practices. If I had to research and figure out best practices on my own it would take ages. Instead I can just see what Tailwind does. E.g. when to use em vs px. That kind of stuff.

EugeneOZ 4y ago

Disagree, an example with margins (the second example in the article) is not complicated or rare.

bgkim 4y ago
Tailwind acknowledges the limitation [1] and also provides gap utilities [2]: <div class="flex gap-x-2"> which translates to display: flex; column-gap: 0.5rem; [1]: https://tailwindcss.com/docs/space#limitations https://tailwindcss.com/docs/space#limitations [2]: https://tailwindcss.com/docs/gap https://tailwindcss.com/docs/gap Edit: formatting

yellow_lead 4y ago

> I really feel like people start with their conclusion that they don't like it because it's weird and foreign and then look for excuses to justify why they think it's bad. At least from this article, I get the impression the author used tailwind for a bit and kept running into these issues where he had to go in and fix it manually in CSS. After enough of these, you get annoyed.

onion2k 4y ago
After enough of these, you get annoyed. If they're typical things that you'd expect a library to solve, sure. If they're "I want my element to rotate in 3D" then most developers would think they're just working outside of the scope of the library.
- sfvisser 4y ago
  Libraries that have a scope defined implicitly by what accidentally works or doesn’t work can still be very annoying.
  - tonerow 4y ago
    _this_
  - Aeolun 4y ago
    It's not like the `style` object is far away. Nothing about Tailwind prohibits you from using normal classes.
    - admax88qqq 4y ago
      Yes tailwind let's you reach through and apply some CSS directly. Almost like its an abstraction that exposes, or leaks, that which it attemps to abstract. A "leaky abstraction" if you will.
      - horsawlarway 4y ago

neovive 4y ago

I agree that the use cases shown are not representative of the vast majority of projects. After using Tailwind for almost two years, I find the biggest strengths are: a common set of naming conventions (don't underestimate how hard it is to name classes well and consistently across projects); bundling of commonly used features (autoprefixing, purging unused classes); and how well it works with component libraries. Beyond that, Tailwind is just CSS — unlike pre-compilers like SaaS and LESS that actually extend CSS.

pdntspa 4y ago

I've looked at tailwind as an individual, but their pay-for-documentation model is absolutely bullshit. And it doesn't seem to be doing anything different from Bootstrap or 99% of the other CSS frameworks out there. Also, it makes me sad to see people so eager to throw away separation of concerns :( Yes everything describing it is on one screen but now your HTML is filled up with hundreds of words of awful classnames and markup that should have been put elsewhere!

kaba0 4y ago
> Also, it makes me sad to see people so eager to throw away separation of concerns I don’t think it has ever lived up to expectations, HTML+CSS in that way is simply broken. You can’t really write CSS without hard-coding the HTML structure, so you might as well do it in one file.
- pdntspa 4y ago
  No, I think people just suck now. While you can't eliminate all structural concerns in CSS (think nesting selectors), sensible class naming and adhering to the structure of the medium (instead of fighting it by trying to directly translate a photoshop mockup or w/e), this is entirely possible.
  - kaba0 4y ago
    But now you just have a single-use html+stylesheet, as I wrote. No separation of concern anywhere, and both html and css can only be written by knowing the other part.
    - pdntspa 4y ago
      Why is the stylesheet single use? The classes can be used anywhere, as they should be. Make components in the CSS and call them by their classname in HTML. You are building generic components here. I don't see the issue with 'separate files', do people not use split view mode in their IDE? edit- this comment in another thread: https://news.ycombinator.com/item?id=33789859 https://news.ycombinator.com/item?id=33789859

bastardoperator 4y ago

Exactly. No matter what, this person decided before they even used tailwinds that it was going to be bad. They used their time with the tool to point out obscure cases so they could say "see, I was right, it leaks". They then try to tie together at the end with a "I'm not saying it was bad". This type of drama or negative style of writing needs to stop. Be objective, there is good and bad everywhere.

antihero 4y ago

The other cool thing is that you can code up your design system in the tailwind config and never have to worry about devs not using the correct sizes/colours/etc.

gr__or 4y ago
I recall there being Stylelint rules for linting against hardcoded values. I can't seem to find the link rn though.
emmacharp 4y ago
You can do exactly the same with pure CSS. This is not a Tailwind advantage.
- antihero 4y ago
  How much effort does it take to set up, though? I thought the CSS variable system was pretty rudimentary.
  - emmacharp 4y ago
    > How much effort does it take to set up, though? Practically none. And any designer is prone to reuse the same spacings from project to project. So you bring the language file with you. Something like this : :root { --spacing-sm: 1rem; --spacing-md: 2rem; --size-tall: 32px; ... } And you can do some pretty nice things with these pure CSS tokens. Without any hassle or dependency.
    - antihero 4y ago
      This seems more annoying than using tailwind.

mierz00 4y ago

One thing that has been an absolute deal breaker for me is adding variants for components. Say I have a button component with different variants, these variants change styles across multiple elements in the component. Using scss and BEM this is incredibly simple, add a parent class and I can modify nested elements easily. But using tailwind I have to make an mess of things to get this working or recreate the component. I’d love to hear how anyone solves this issue.