Two mocks (tailwindCSS + emotion & theme-ui) assembled to explore CSS solutions for ReRent's decoupling. They will remain unfinished prototypes. From our conversations and the Roadmap shared, it seemed that Gatsby and Typescript would make up the core technologies and a CSS solution had not yet been decided on. Although familiar with CSS-in-JS solutions, namely @emotion, I had no experience with CSS frameworks or styled systems before these mocks. The following takeaways are opinions gathered from ~ 1 1/2 days worth of developing within each of the following repositories, some are more subjective than others and they are not in any particular order.
Pros
- Utility classes provided by TailwindCSS are intuitive to use and the Documentation is a breeze to navigate.
- Sensible defaults allow a fast, hassle-free start and straightforward configuration options allow for gradual expansion/refactoring.
- Twin.macro allows for easy integration with @emotion.
- @emotion's
cssprop allows for fine grained control and/or quick overrides. - Has the largest community, some prebuilt components, and many helpful addons
Cons
- Long-interpolated strings of utility classes can be hard to read/organize and unpleasant to look at.
- Poor syntax highlighting/intellisense support for TailwindCSS within CSS-in-JS (A VSCode Extension exists, but does not seem to register when used within interpolated strings).
- Animations via TailwindCSS config requires more familiarity with configuration and are not hot-reload in development (using @emotion circumvents these problems, so not really an issue).
Pros
- Styling defined in style JS objects which have decent Typescript support
- Can create base (button, h1, input, etc..) components in configuration/theme file
- Still uses @emotion under the hood.
Cons
sxprop does not appear to be forwarded to previously defined components limiting flexibility. Major Con- Less intuitive API and documentation.
- Initial theme requires more upfront work, and possibly more ongoing maintenance.
In my opinion, TailwindCSS had an overall better developer experience than ThemeUI (largely, around documentation) which could lead to faster development. However, ChakraUI could offer a possible alternative to ThemeUI. Their documentation follows a similar format to TailwindCSS's and is easily searchable. It uses @emotion under the hood which grants acess to useful abstractions. It includes a few animated wrapper components made possible by framer motion which could also grant acess to other useful abstraction for animations (This library could also be included with the TailwindCSS + @emotion alternative). However, it does require more digging through documnentation, learning component names, their props and other idiosyncracies/workarounds to common issues. Furthermore, given that HTML and CSS are more common than any one particular component library and the term for developers is unclear, I believe the smarter choices is to use TailwindCSS as a design system since it has the lowest barrier to use and it's the least on the way when working with business logic.