3 ms·
I wanted to like Tailwind and, I tried to tolerate it for a few months. To me, it always felt like a less opinionated Bootstrap, but arguably a lot more to lear
by DigitalSea 6y ago
I wanted to like Tailwind and, I tried to tolerate it for a few months. To me, it always felt like a less opinionated Bootstrap, but arguably a lot more to learn. The same approach of having to remember class names and syntax is no different than Bootstrap. The differentiator of course, is Tailwind has better tooling support and feels less static, but it's still quite a convoluted beast to wrap your head around.
There does come a time when Tailwind starts to click, you've memorised some of the class names and you get a feel for it. But, I still found myself consulting the documentation to do things "the right way" ultimately spending hours reading documentation, when I could have written plain old CSS. The maintainability aspect in the long-run is the selling point of a solution like Tailwind. CSS without some semblance of order can wreak havoc on a codebase.
These days I am using plain old CSS on a component level inside of Aurelia 2. My components are Web Components utilising Shadow DOM features which scope my styles to the component, but also using Constructable Stylesheets to reuse styles throughout my app. In combination with CSS Variables and Shadow Parts, it's an incredibly powerful workflow that takes a lot of the pain of CSS out of development, it's closer to the metal and feels way nicer.
- burlesona 6y agoHello! I've been trying to adopt Web Components and have had limited success specifically because (since these are internal components) I want to use my application styles, but can't share them across the shadow dom. Do you have a good writeup or example on the way you're working? I'm googling Constructable Stylesheets, but would love any other pointers, because what you're doing sounds like exactly what I've been wanting to do. Edit: I see Constructable Stylesheets are Chrome-only. Unfortunately that's a deal-breaker for me :/
- scorxn 6y agoNot the parent commenter, but I have an app whose web components inherit from a class with this constructor: constructor(html) { super(); const link = document.createElement("link"); link.rel = "stylesheet"; link.href = "/theme.css"; const template = document.createElement("template"); template.innerHTML = html; this.attachShadow({ mode: "open" }).append(link, template.content); } Global things like vars, default typography, and input style resets go in theme.css.