5 ms·

Adopting any system of coding design whether it be Bootstarp, Tailwind, Rails, Express, etc. is overall meant to reduce the cognitive complexity of the group wo

Adopting any system of coding design whether it be Bootstarp, Tailwind, Rails, Express, etc. is overall meant to reduce the cognitive complexity of the group working on your solution. If most people have exposure/understanding to the Boostrap way of doing things, or the Rails way of doing things, then we as a system/company/team/organization benefit when new people join the team. There's already a well established way of getting stuff done. If we forgo the use of a system, we will end up building one anyways. But this time, it will be known ONLY to your existing team members. It could/will buck convention and established best practices, it will grow to develop the bloat and technical debt for which the existing systems were rejected. Software engineering is about trade-offs. This is just another trade-off.

jakelazaroff 3y ago
That's true, but I don't the author is saying that Tailwind isn't a trade-off — just that it's a bad trade-off.
slashdev 3y ago
How do you guys feel about tailwind? I’ve been using it on some side projects. It feels ok, but I’m constantly looking up stuff in the tailwind docs. CSS I already am pretty confortable with. I think it’s an improvement, but not by as much as I thought.
- jakelazaroff 3y ago
  I've been using it at work for just over a year. I don't like it. I still need to constantly reference the Tailwind docs for most non-trivial properties. It flat-out doesn't support some things I need. It produces giant blocks of difficult-to-scan HTML. Chunks of common styles end up repeated. The problems it purports to solve are better solved in other ways, such as CSS modules. Ultimately, I don't begrudge people for using whatever tool they find best. But I try to avoid Tailwind when given the choice.
  - leetrout 3y ago
    > It flat-out doesn't support some things I need Can you share some of those? I don't do much raw CSS so have no idea where it has gaps.
    - jakelazaroff 3y ago
      One example is rotation along axes other than Z, which is required for 3D transforms. Here's a two year old issue on it: https://github.com/tailwindlabs/tailwindcss/discussions/3521 https://github.com/tailwindlabs/tailwindcss/discussions/3521 Another is attribute selector support. They have many common ones, but to do anything more complex you need to add support to your configuration. https://tailwindcss.com/docs/hover-focus-and-other-states#attribute-selectors https://tailwindcss.com/docs/hover-focus-and-other-states#at... I don't want to oversell this; I think Tailwind does a pretty good job covering the "happy path", and if you haven't run into any gaps I wouldn't worry about it too much. But you'll encounter its limits well before you encounter the limits of CSS.
- lawn 3y ago
  Nah, it's not an improvement for me. It's an abstraction, but a poor one. It's too low-level to be truly useful, and it's also confusing as some properties doesn't mean the same as in CSS. You end up with huge unreadable blobs, reminding me of the "write-only" label that Perl once used to have. And the answer to avoid that unreadable blob is to include CSS, defeating the point. I prefer CSS/SASS with variables for customization (so you don't have to repeat the blobs) and well-chosen class names (so you can actually read and modify existing code).
- hnrodey 3y ago
  I was quite hesitant to jump into Tailwind. I've tried it in the past few months and quite like using it. I do have to refer to the docs a lot but that is okay because I think they're docs are quite usable. I miss some of the already established components from Bootstrap, but whatever. Bootstrap is always kind of a pain in the butt to integrate into a project.
paradox460 3y ago
But one of the major pitfalls of tailwind is that it gives the illusion of a system, but isn't actually a consistent system. `m-2` can mean entirely different things, depending on how your configuration is set. With a really good design team, this isn't a problem, as the numbers are just pointing to something in a design document, but I've yet to see something that well done in the wild. And its not really that hard to make such a design system using css or preprocessor variables
- deleted 3y ago
  [deleted]
- chronofar 3y ago
  Just because a 2 can represent different values doesn’t mean there’s not a system, it just means the system is configurable. This is a good thing, you just have to know how the tool works. Even if I don’t know what specific values m-2 may hold for a given project, I certainly know a lot more about it right off the bat than whatever .class-name you may have come up with from scratch, and can reference the config to know the rest.
- deergomoo 3y ago
  > `m-2` can mean entirely different things, depending on how your configuration is set Does it matter? Putting aside that anecdotally it seems very rare to override the default values for spacing anyway, m-2 is twice as much as m-1, which is whatever the baseline spacing for your project is. Sure it can vary from project to project (though again, it doesn't seem awfully common for folks to do), but the config file is in your source control so m-2 is always consistent for the project you're working on.
  - omnimus 3y ago
    It is super common things to do when you actually adopt it as system. People choose either -4 or -8 to be 1x measure of space and setup the size in config. Of course there is a big group of devs who use tailwind for easy copy paste templates that never change the config. But those who use as system use config a lot.

jakelazaroff 3y ago

That's true, but I don't the author is saying that Tailwind isn't a trade-off — just that it's a bad trade-off.

slashdev 3y ago

How do you guys feel about tailwind? I’ve been using it on some side projects. It feels ok, but I’m constantly looking up stuff in the tailwind docs. CSS I already am pretty confortable with. I think it’s an improvement, but not by as much as I thought.

jakelazaroff 3y ago
I've been using it at work for just over a year. I don't like it. I still need to constantly reference the Tailwind docs for most non-trivial properties. It flat-out doesn't support some things I need. It produces giant blocks of difficult-to-scan HTML. Chunks of common styles end up repeated. The problems it purports to solve are better solved in other ways, such as CSS modules. Ultimately, I don't begrudge people for using whatever tool they find best. But I try to avoid Tailwind when given the choice.
- leetrout 3y ago
  > It flat-out doesn't support some things I need Can you share some of those? I don't do much raw CSS so have no idea where it has gaps.
  - jakelazaroff 3y ago
    One example is rotation along axes other than Z, which is required for 3D transforms. Here's a two year old issue on it: https://github.com/tailwindlabs/tailwindcss/discussions/3521 https://github.com/tailwindlabs/tailwindcss/discussions/3521 Another is attribute selector support. They have many common ones, but to do anything more complex you need to add support to your configuration. https://tailwindcss.com/docs/hover-focus-and-other-states#attribute-selectors https://tailwindcss.com/docs/hover-focus-and-other-states#at... I don't want to oversell this; I think Tailwind does a pretty good job covering the "happy path", and if you haven't run into any gaps I wouldn't worry about it too much. But you'll encounter its limits well before you encounter the limits of CSS.
lawn 3y ago
Nah, it's not an improvement for me. It's an abstraction, but a poor one. It's too low-level to be truly useful, and it's also confusing as some properties doesn't mean the same as in CSS. You end up with huge unreadable blobs, reminding me of the "write-only" label that Perl once used to have. And the answer to avoid that unreadable blob is to include CSS, defeating the point. I prefer CSS/SASS with variables for customization (so you don't have to repeat the blobs) and well-chosen class names (so you can actually read and modify existing code).
hnrodey 3y ago
I was quite hesitant to jump into Tailwind. I've tried it in the past few months and quite like using it. I do have to refer to the docs a lot but that is okay because I think they're docs are quite usable. I miss some of the already established components from Bootstrap, but whatever. Bootstrap is always kind of a pain in the butt to integrate into a project.

paradox460 3y ago

But one of the major pitfalls of tailwind is that it gives the illusion of a system, but isn't actually a consistent system. `m-2` can mean entirely different things, depending on how your configuration is set. With a really good design team, this isn't a problem, as the numbers are just pointing to something in a design document, but I've yet to see something that well done in the wild. And its not really that hard to make such a design system using css or preprocessor variables

deleted 3y ago
[deleted]
chronofar 3y ago
Just because a 2 can represent different values doesn’t mean there’s not a system, it just means the system is configurable. This is a good thing, you just have to know how the tool works. Even if I don’t know what specific values m-2 may hold for a given project, I certainly know a lot more about it right off the bat than whatever .class-name you may have come up with from scratch, and can reference the config to know the rest.
deergomoo 3y ago
> `m-2` can mean entirely different things, depending on how your configuration is set Does it matter? Putting aside that anecdotally it seems very rare to override the default values for spacing anyway, m-2 is twice as much as m-1, which is whatever the baseline spacing for your project is. Sure it can vary from project to project (though again, it doesn't seem awfully common for folks to do), but the config file is in your source control so m-2 is always consistent for the project you're working on.
- omnimus 3y ago
  It is super common things to do when you actually adopt it as system. People choose either -4 or -8 to be 1x measure of space and setup the size in config. Of course there is a big group of devs who use tailwind for easy copy paste templates that never change the config. But those who use as system use config a lot.