Why You Should Consider Tailwind CSS for Web Components

[alimd]

I've been deeply involved with web technologies for about 22 years, and after Google abandoned Lit, I'm eagerly anticipating exciting results from your team, especially after 11ty joined you.

The only issue I've noticed with your approach is the lack of Tailwind CSS. I've been developing professional applications with web components since Polymer 0.5, and after years of working with it, I've completely abandoned CSS isolation in shadow DOM. I find Tailwind's tooling far more efficient for development.

I hope you'll consider this feedback. Instead of investing significant time in making web components customizable and potentially slowing down rendering performance, I believe leveraging shared CSS, particularly something like Tailwind, would be a more streamlined approach.

[marcomuser]

Did Google abandon lit? Not aware of that. Also I'm personally a fan of shadow dom and going platform first with custom properties for theming instead of building on postcss plugins like tailwind that only work under specific assumptions like using a build tool. I love how tailwind pushed the DX of authoring css with amazing intellisense to the next level. However, I consider web awesome a next generation library that really proofs how amazing browser apis have become over the past few years.

[claviska]

No. Lit is still maintained and strong. I believe OP is referring to Material.

material-components/material-web#5642

[LeaVerou]

Hi @alimd,

The goal of Web Awesome is to make it quick and painless to build beautiful, unique Web UIs. We're not married to any particular technology, we decide what to use on a case by case basis based on what will provide the best DX for our users (and the best UX for their users, including those with disabilities). When a utility class is most suitable, we do go for a utility class, but utility classes cannot encapsulate behavior or HTML — that’s when you need a component.

Instead of investing significant time in making web components customizable and potentially slowing down rendering performance

I would love to hear more about this. Do you feel there are any specific cases where our approach has slowed down rendering performance? If so, we'd love to look into them — we consider rendering performance a top priority.

I believe leveraging shared CSS, particularly something like Tailwind, would be a more streamlined approach.

Just to clarify how Web Awesome works, as I understand it may not be immediately obvious from the outside:

• Any common CSS across components is shared
• The design tokens of the page are specified on a page-level stylesheet and trickle down to components via inheritance, no repetition required
• Even CSS utilities shared across components are generally shared (this was part of the changes we shipped this week)

While we cannot wholesale adopt another library such as Tailwind, we would love to hear what you like about any specific library, so we can make sure Web Awesome solves these problems at least as well, and ideally better. After all, I imagine Tailwind does not solve all your Web UI pain points, otherwise you wouldn't have backed Web Awesome, right? 😊