Migrate to TailwindCSS from Stylefy

[tangjeff0]

I've heard @shanberg and @neotyk are scheming on this 👀

Curious what that migration would look like, and how custom CSS/theming would play a role if at all in the approach.

[shanberg]

I'm not settled yet on this being the right decision. Tailwind is pretty polarizing, and while there are some clear advantages, I think this needs to be a conversation and not just an issue/refactor.

[tangjeff0]

(Converted to Discussion)

[juniusfree]

https://github.com/green-coder/girouette

CSS libraries like Tailwind and Tachyons provide quantities of predefined class names, hoping to cover most of the needs of their users. But because of combinatory explosion, they cannot provide all the class names users will ever need, in which case the users will have to hack their way with config files and/or handwritten CSS. When releasing for production, the unused CSS classes are removed from the CSS files using tools like PurgeCSS.

https://www.youtube.com/watch?v=Tnv6SvZM6tg

[shanberg]

I advocated for Stylefy early on because:

• It’s CSS-in-JS, for which the most convincing arguments to me are (lifted from here)...
  • Confidence: Add, change and delete CSS without any unexpected consequences and avoid dead code.
  • Painless Maintenance: Never go on a hunt for CSS affecting your components ever again.
• It keeps the style close to the markup (contrast to vanilla CSS, SCSS, etc.)
• It’s writing CSS (albeit in EDN), and not an abstraction of CSS (contrast to Tailwind)
• The markup you write against remains just markup, and not markup coupled with explicit styling (contrast to Tailwind)
• It avoids the cascade, which is the bane of large CSS/SCSS projects

More broadly, I think the styling method Athens uses should primarily be...

• Easy to inspect (why are these styles this way? why does this inherit from that? where are the styles for this thing?)
  • Vanilla CSS is the best at this superficially, but the cascade creates huge problems without some additional structure
  • SCSS is makes the plain CSS easier to work with, but the cascade will still bite
  • Stylefy keeps component styles compartmentalized, so no more confusing cascade
  • Tailwind's utility classes abstract the CSS away from the component and into the markup, with some benefits and some drawbacks.
• Easy to modify as CSS, and not as an abstraction of CSS
  • Vanilla CSS is ostensibly the simplest, but the cascade is unintuitive
  • SCSS adds tools to CSS but requires its own organizational structure outside of component files
  • Stylefy is just SCSS, written with the same syntax we're already using for components, plus our clojure functions, and better proximity-to-code
  • Tailwind is an API/mapping on top of CSS, which is one more thing to learn, and moves the CSS away from the components
• Easy to migrate away from, if the new hotness appears and trumps all other options
  • Tailwind creates an abstraction over styling that moves the CSS away from your components, that has to be rewritten or recompiled somehow to eject from
  • Stylefy keeps styles contained and close to the components.
• Easy to keep internally consistent
  • CSS creates consistency with inheritance, and more recently also with CSS variables
  • Tailwind creates consistency with utility classes, e.g. p-10 for padding some predefined level "10"
  • Stylefy creates consistency with CSS variables or clojure functions, like the rest of the Athens project

As to Stylefy being written as EDN and not CSS, anyone editing the components must already know EDN, and since styling is necessarily coupled with markup and logic, they should already be familiar with it. I'd rather write styles in SCSS-flavored CSS, but that doesn't appear to be an option right now.

I do see the benefit of Tailwind for new folks prototyping stuff and looking for a quick grab-bag of classes to make their new widgets look nice, but there are other ways to prototype UI elements and prototyping with production-ready styling isn't necessary or especially helpful.

I could be convinced that Tailwind is right for Athens if a large number of potential and actual contributors simply want Tailwind. The liveliness of the project probably outweighs more academic dev-ex concerns, at least for a while.

Edit Thursday, May 27, 2021
A helpful resource for understanding the CSS-in-JS landscape https://css-tricks.com/a-thorough-analysis-of-css-in-js

[avidrucker]

I think it boils down to what kind of CSS trade-offs are we hoping to accomplish for Athens. I have used plain old CSS, Tachyons, Styled System, and Styled Components as a React JS dev. What are our current needs for CSS? What are our long term CSS goals? Do we have any pain points for the devs currently working on CSS? I'd like to be actively involved in the CSS issues, because I have a decent amount of CSS experience, but haven't yet seen any CSS styling or refactoring issues up for grabs.