91–100 of 559 posts
According to NPM download stats, it has 6 million weekly downloads, the exact same amount as Styled Components. Emotion also has around 6 million. So that's 12 million for CSS-in-JS, as opposed to 6 million for Tailwind, so how did it win?
Earlier quoted context omitted.
I agree with you. As a developer I like the separation of style and content. We also gain better readability when the code says " 199 " than a long list of tailwind classes. CSS styles are also more reusable across different web sites. I can to some degree see that you can increase re-usability when using shared React components, but then you just create technical debt for those who want to test other frameworks It s…
As soon as you have recurring product prices, you’re encouraged to use @apply to group those classes. In practice, however, you’re using components of some sort anyway, whether in Frontend or backend code, so this isn’t really an issue.
It won in composability, readability and simplicity, it's resulting code and power usage is larger.
Wrong, it ships the lowest amount of CSS it can
For getting designs up and running quickly, it really is great. Being able to think "Hmmm, I want a rounded button, with a border and a blue background" and just typing class="rounded border border-blue-600 bg-blue-500" and it's done. With lots of UI being components now, it doesn't really matter that it is verbose - I actually find that helpful. And even if you want to have a class that you use all over the place, j…
> Being able to think "Hmmm, I want a rounded button, with a border and a blue background" I rarely think this. It's usually “I want a button that looks like all other buttons on my site”. Vanilla CSS is great for that.
Earlier quoted context omitted.
If you work with components, you don't have this problem. If you don't work with components, good ol' search and replace and it's done.
If you work with components then why not just use CSS?
This is not true in svelte, where a component file can have both a root tag for the component, and a tag that the framework/compiler automatically scopes to this component (and a tag for the code, since you don't have the JSX inversion-of-control principle).
Earlier quoted context omitted.
I can sum up what I like about Tailwind in the following code: ``` (in CSS) a.link { border: red; } a.link:hover { border: blue; } ``` ``` (in Tailwind) ``` It's much easier in Tailwind for me to see locally what's going on with that styling. If I lived in this code all the time, or I was good at structuring CSS, then maybe the first would be more appealing. But I'm a shit at CSS, it always turns into an unmaintainab…
It's too bad that SASS has fallen out of favor. With SASS, that would have been: ``` a.link border: red &:hover border: blue ```
Earlier quoted context omitted.
As soon as you have recurring product prices, you’re encouraged to use @apply to group those classes. In practice, however, you’re using components of some sort anyway, whether in Frontend or backend code, so this isn’t really an issue.
Where have you seen such an encouragement? Even Adam states that @apply was a mistake https://twitter.com/adamwathan/status/1559250403547652097?la... .
Earlier quoted context omitted.
I can sum up what I like about Tailwind in the following code: ``` (in CSS) a.link { border: red; } a.link:hover { border: blue; } ``` ``` (in Tailwind) ``` It's much easier in Tailwind for me to see locally what's going on with that styling. If I lived in this code all the time, or I was good at structuring CSS, then maybe the first would be more appealing. But I'm a shit at CSS, it always turns into an unmaintainab…
Now imagine that you want to change the border color to yellow. Would you rather change a single line of CSS, or every single link on all your pages?
Earlier quoted context omitted.
I can sum up what I like about Tailwind in the following code: ``` (in CSS) a.link { border: red; } a.link:hover { border: blue; } ``` ``` (in Tailwind) ``` It's much easier in Tailwind for me to see locally what's going on with that styling. If I lived in this code all the time, or I was good at structuring CSS, then maybe the first would be more appealing. But I'm a shit at CSS, it always turns into an unmaintainab…
It's too bad that SASS has fallen out of favor. With SASS, that would have been: ``` a.link border: red &:hover border: blue ```
https://webkit.org/blog/13813/try-css-nesting-today-in-safar...
Earlier quoted context omitted.
Hopefully your link will be a component, so you only need replace one line anyway. Then again if your styles are abstracted to a component, your CSS framework is irrelevant!
Why would you use a component for something that's already a built-in HTML element?