4 ms·

Having a prebuilt consistent design system that you don’t have to build out for each project, arguing over defaults among the team is a lifesaver.

emmacharp 3y ago
But you don't need Tailwind for that. A "designsystem.css" file with custom properties would do the trick. Without any added third party tech.
- ethanbond 3y ago
  Why should anyone care about adding third party tech? This argument boils down to: “But you don’t need Tailwind for that. You can do more work for a (almost certainly) worse result with a designsystem.css!” Sure you can! Why?
  - emmacharp 3y ago
    (Almost certainly) worse? Haha. Why would it be? If you really want to, you can even use Tailwind's naming for you language file. The thing is, you add complexity to do a job that could be done in the same way without adding complexity and dependencies. Shouldn't we try to justify added complexity through added value?
    - ethanbond 3y ago
      > why would it be? Because most frontend engineers cannot make something as visually appealing as Tailwind’s defaults and most designers cannot make frontend abstractions as ergonomic as Tailwind’s. Now it seems like you’re suggesting just reimplementing Tailwind? Or yes you can have one of your FE engineers and one designer try to dream up your own Tailwind but again: why? Now you’re consuming two people for something that can be achieved by literally zero people and “yarn add tailwind.” It is not at all my objective to “reduce complexity” that sits behind good abstractions. My goal is to ship product and to put as much complexity as possible behind good abstractions and ideally out of my team’s maintenance burden and Tailwind helps achieve all of those. Sure, if Tailwind provided literally zero value I would say you shouldn’t add it to the codebase. But it provides a huge amount of time-value (the best kind!) in my experience, so “there’s a package from the internet” is hardly a consideration whatsoever.
      - emmacharp 3y ago
        If the Tailind defaults are used in a design language file, wouldn't it be simpler? If it's only a problem of "aesthetics", 20 minutes is enough to use Tailwind's defaults in pure CSS. No need for calling a designer here either. Side benefits include that there is then no need to update any dependencies or library, no need to run a JIT server, no need for a new syntax, no need to wait for implementation of new CSS features, better performance possibilities, etc.
        ethanbond 3y ago
        Just checking that I understand your suggestion: it’s that you copy/paste Tailwind into a file called “designsystem.css” and then say that you are not using Tailwind? Or are you saying take their design system and use your own syntax for it (so it’s less complete than TW, less well-documented, and less transferable to/from the vast resources of the internet centered around TW)?
        emmacharp 3y ago
        I'm talking about the design aesthetics included in Tailwind as default. Keep the values and the names if you want. Like this, for example: "blue-500" becomes --blue-500. That's it. This is a far cry from using Tailwind as a whole while keeping the good-looking aesthetics.
        troupo 3y ago
        > "blue-500" becomes --blue-500. That's it. Of course it's not "it". Now in every class that needs it, you also need to add { ... other styles... background-color: var(--blue-500); } And then you need to apply that class
        emmacharp 3y ago
        How is that different than writing "bg-color-blue-500" in every component that needs it? As for the class, it's the name of the component, the same name you give to the component file. Does it really add that much work? Correct me if I'm wrong but as I see it, that's literally a couple of seconds of "work".
- troupo 3y ago
  I tried to do that once. I decided to skip Tailwind and "just" bring in a few CSS variable that cover what I use. By the 30th variable I stopped. The fact that I had to write significantly more boilerplate in CSS classes on top of that, helped me stop, too

emmacharp 3y ago

But you don't need Tailwind for that. A "designsystem.css" file with custom properties would do the trick. Without any added third party tech.

ethanbond 3y ago
Why should anyone care about adding third party tech? This argument boils down to: “But you don’t need Tailwind for that. You can do more work for a (almost certainly) worse result with a designsystem.css!” Sure you can! Why?
- emmacharp 3y ago
  (Almost certainly) worse? Haha. Why would it be? If you really want to, you can even use Tailwind's naming for you language file. The thing is, you add complexity to do a job that could be done in the same way without adding complexity and dependencies. Shouldn't we try to justify added complexity through added value?
  - ethanbond 3y ago
    > why would it be? Because most frontend engineers cannot make something as visually appealing as Tailwind’s defaults and most designers cannot make frontend abstractions as ergonomic as Tailwind’s. Now it seems like you’re suggesting just reimplementing Tailwind? Or yes you can have one of your FE engineers and one designer try to dream up your own Tailwind but again: why? Now you’re consuming two people for something that can be achieved by literally zero people and “yarn add tailwind.” It is not at all my objective to “reduce complexity” that sits behind good abstractions. My goal is to ship product and to put as much complexity as possible behind good abstractions and ideally out of my team’s maintenance burden and Tailwind helps achieve all of those. Sure, if Tailwind provided literally zero value I would say you shouldn’t add it to the codebase. But it provides a huge amount of time-value (the best kind!) in my experience, so “there’s a package from the internet” is hardly a consideration whatsoever.
    - emmacharp 3y ago
      If the Tailind defaults are used in a design language file, wouldn't it be simpler? If it's only a problem of "aesthetics", 20 minutes is enough to use Tailwind's defaults in pure CSS. No need for calling a designer here either. Side benefits include that there is then no need to update any dependencies or library, no need to run a JIT server, no need for a new syntax, no need to wait for implementation of new CSS features, better performance possibilities, etc.
      - ethanbond 3y ago
        Just checking that I understand your suggestion: it’s that you copy/paste Tailwind into a file called “designsystem.css” and then say that you are not using Tailwind? Or are you saying take their design system and use your own syntax for it (so it’s less complete than TW, less well-documented, and less transferable to/from the vast resources of the internet centered around TW)?
        emmacharp 3y ago
        I'm talking about the design aesthetics included in Tailwind as default. Keep the values and the names if you want. Like this, for example: "blue-500" becomes --blue-500. That's it. This is a far cry from using Tailwind as a whole while keeping the good-looking aesthetics.
        troupo 3y ago
        > "blue-500" becomes --blue-500. That's it. Of course it's not "it". Now in every class that needs it, you also need to add { ... other styles... background-color: var(--blue-500); } And then you need to apply that class
        emmacharp 3y ago
        How is that different than writing "bg-color-blue-500" in every component that needs it? As for the class, it's the name of the component, the same name you give to the component file. Does it really add that much work? Correct me if I'm wrong but as I see it, that's literally a couple of seconds of "work".
troupo 3y ago
I tried to do that once. I decided to skip Tailwind and "just" bring in a few CSS variable that cover what I use. By the 30th variable I stopped. The fact that I had to write significantly more boilerplate in CSS classes on top of that, helped me stop, too