381–390 of 391 posts
Earlier quoted context omitted.
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.
You can do exactly the same with pure CSS. This is not a Tailwind advantage.
Earlier quoted context omitted.
You can do exactly the same with pure CSS. This is not a Tailwind advantage.
How much effort does it take to set up, though? I thought the CSS variable system was pretty rudimentary.
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.
Earlier quoted context omitted.
Now i know why 99% produces faulty css that make problem on different devices. They rely on systems like tailwaind and think tailwind does everything for them.
Life is full of trade-offs. This is one where I would always opt for the leaky solution. Ask the people who invented CSS why they built it in a way that is really really hard to understand - even for simple things. PS: I know why. Because they built it without thinking about the users (web devs). Instead they were thinking about all the f-ing edge cases almost no one cares about.
Can you give an example or explain more about this?
CSS has done more damage to developer productivity than any other technology out there. And I'm including .csv's. CSS is over 20 years old and we as an industry have been spinning our wheels on how to do simple arrangements of rectangles the whole time. Truly, it is time to just bin the whole thing as a failure.
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 (…
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.
Earlier quoted context omitted.
Are you using a code editor plugin that surfaces the correct classes? There's no guess work involved.
My plugin supports this, but only if I happen to know the shortcut. When I start typing... border-radi ...for example, the plugin doesn't suggest... rounded ...because I didn't type anything close to matching that. It seems like the only way to benefit from Tailwind without having to switch between your file and the docs is to invest time memorizing the many, many, many shortcut classes that don't start with the same…
Earlier quoted context omitted.
> what's the benefit of Tailwind over style attributes on HTML tags For example, you can't specify hover, focus etc. style attributes. You can't specify screen sizes either. Plus there are few Tailwind classes that cover several attributes. Plus many of those styles are just unwieldy. For example, `drop-shadow` is `filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));`
This. The secret super power in Tailwind is editing the tailwind.config.js and forcing standards. Then you have have something like only having four padding options per your style guide and them defined in one specific place. In style tags you could use a CSS var for this as well but you better hope you used it everywhere. Plus, that becomes super wordy: 'padding-left: var(--padding-1)' vs 'pl-1'
I've used pretty much every styling variation you can imagine, CSS-in-jS (styled components, emotion, component libraries), vanilla CSS, and I after landing on tailwind . I can honestly say I have never had so much enjoyment and velocity building User interfaces.
Earlier quoted context omitted.
It's not like the `style` object is far away. Nothing about Tailwind prohibits you from using normal classes.
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.
You can play this "leaky abstraction" game with almost any concept, without the ability to reach down an abstraction level you lose flexibility. Its not a smell to be slightly leaky.