3 ms·

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

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".
  - ethanbond 3y ago
    Sure now do the same for: whitespace (margins and padding), border radiuses, shadows, opacities, font sizes, font weights, and continue playing whack-a-mole as you run into new cases. Or just use the extremely complete, well-considered, well-defaulted, well-documented, well-supported, always-improving set of classes that took you zero hours of initial setup and will cost you zero hours of maintenance outside of your own use/application until the end of time. And it has a name so when a new engineer joins your team, you can say "we use Tailwind, go to tailwindcss.com" and they are fully read into your setup in about 15 seconds.
    - emmacharp 3y ago
      mt-100 vs. margin-top: var(--100); And the IDE will help you autocomplete it all. The same is true for all the other properties you enumerated. If it's a Tailwind design token, it can be a pure CSS design token. No "whack-a-mole" needed here. Still, you're right about having documentation. And there has been a loooot of these kinds of doc (BEM, SMACSS, ITCSS, etc.) in the last 15 years. Nonetheless, a more modern-oriented one is indeed needed. And that's why I'm working on something like this. As for the "15 seconds", I mean, really? If so, I beg to disagree. There is a lot to take in. And that is why numerous colleagues still have to open the Tailwind docs to know how to write a class that's not 1:1 CSS. And lucky you if you haven't had any update and dependency issues in the medium to long term. But I know we had. > Or just use the extremely complete, well-considered, well-defaulted, well-documented, well-supported, always-improving set "of CSS features". The sentence above is every bit as true as yours. Add a beautiful design language and you are in business.
troupo 3y ago
> 20 minutes is enough to use Tailwind's defaults in pure CSS not 20 minutes, more. Plus all the boilerplate around @media rules > no need to wait for implementation of new CSS features What CSS features are you waiting for with Tailwind? > better performance possibilities It's very hard to beat Tailwind's performance since it's a fixed set of css classes (and a very small set in production, since it only includes classes you actually use".
- emmacharp 3y ago
  Boilerplate? What do you mean? Any IDE can autocomplete 90% of any media query. And, on a sidenote, I was only talking about using Tailwind's default aesthetics in pure CSS, here. That's what the 20 minutes refers to. And I think it was a conservative estimate. As for features, it took months before grid was included in Tailwind. New powerful and useful selectors aren't there. It took years for Tailwind to support "group hovers". And I can give even more examples if you're still not convinced. Or you can have a look at the changelog. As for performance, can Tailwind split its compiled CSS so that only rules used in the displayed components are loaded? And that's not even considering the weight difference between the "tailwinded" HTML and the one needed to support pure CSS. These things matter if performance is a goal (as it should be). If I'm missing something, go ahead and tell me, I'll be reading with great interest!
  - ethanbond 3y ago
    What are you building where CSS and the "weight" of HTML is a real performance consideration?
    - emmacharp 3y ago
      Well, I'm building websites and apps. And, as I'm sure you know, milliseconds are important in our craft. You can easily shave or add hundreds of milliseconds with HTML or CSS. And to be honest, I find your general line of inquiry here to be quite agressive and dismissive. I think, respectfully, a little more good faith could further our understanding of each other.

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".
- ethanbond 3y ago
  Sure now do the same for: whitespace (margins and padding), border radiuses, shadows, opacities, font sizes, font weights, and continue playing whack-a-mole as you run into new cases. Or just use the extremely complete, well-considered, well-defaulted, well-documented, well-supported, always-improving set of classes that took you zero hours of initial setup and will cost you zero hours of maintenance outside of your own use/application until the end of time. And it has a name so when a new engineer joins your team, you can say "we use Tailwind, go to tailwindcss.com" and they are fully read into your setup in about 15 seconds.
  - emmacharp 3y ago
    mt-100 vs. margin-top: var(--100); And the IDE will help you autocomplete it all. The same is true for all the other properties you enumerated. If it's a Tailwind design token, it can be a pure CSS design token. No "whack-a-mole" needed here. Still, you're right about having documentation. And there has been a loooot of these kinds of doc (BEM, SMACSS, ITCSS, etc.) in the last 15 years. Nonetheless, a more modern-oriented one is indeed needed. And that's why I'm working on something like this. As for the "15 seconds", I mean, really? If so, I beg to disagree. There is a lot to take in. And that is why numerous colleagues still have to open the Tailwind docs to know how to write a class that's not 1:1 CSS. And lucky you if you haven't had any update and dependency issues in the medium to long term. But I know we had. > Or just use the extremely complete, well-considered, well-defaulted, well-documented, well-supported, always-improving set "of CSS features". The sentence above is every bit as true as yours. Add a beautiful design language and you are in business.

troupo 3y ago

> 20 minutes is enough to use Tailwind's defaults in pure CSS not 20 minutes, more. Plus all the boilerplate around @media rules > no need to wait for implementation of new CSS features What CSS features are you waiting for with Tailwind? > better performance possibilities It's very hard to beat Tailwind's performance since it's a fixed set of css classes (and a very small set in production, since it only includes classes you actually use".

emmacharp 3y ago
Boilerplate? What do you mean? Any IDE can autocomplete 90% of any media query. And, on a sidenote, I was only talking about using Tailwind's default aesthetics in pure CSS, here. That's what the 20 minutes refers to. And I think it was a conservative estimate. As for features, it took months before grid was included in Tailwind. New powerful and useful selectors aren't there. It took years for Tailwind to support "group hovers". And I can give even more examples if you're still not convinced. Or you can have a look at the changelog. As for performance, can Tailwind split its compiled CSS so that only rules used in the displayed components are loaded? And that's not even considering the weight difference between the "tailwinded" HTML and the one needed to support pure CSS. These things matter if performance is a goal (as it should be). If I'm missing something, go ahead and tell me, I'll be reading with great interest!
- ethanbond 3y ago
  What are you building where CSS and the "weight" of HTML is a real performance consideration?
  - emmacharp 3y ago
    Well, I'm building websites and apps. And, as I'm sure you know, milliseconds are important in our craft. You can easily shave or add hundreds of milliseconds with HTML or CSS. And to be honest, I find your general line of inquiry here to be quite agressive and dismissive. I think, respectfully, a little more good faith could further our understanding of each other.