Use TailwindCSS for component styles construction

[dcwither]

Problem

Using consistent practices throughout a css project is difficult, and becomes hard to maintain.

Solution

TailwindCSS is a utility first css framework that can be used to construct design systems.

Benefits

Customizable

Tailwind can take advantage of the tokens defined in our tokens package through the tailwind.config.js.

Consistent

Because tailwind generates its styles automatically we can ensure that the styles generated will be self consistent

Intellisense

Tailwind has a VSCode plugin that provides autocomplete for its classes when used in html

Addresses a wide range of concerns by default

Tailwind supports fonts, colors, responsiveness, pseudoclasses, and several layout options (float, flex, grid, ...)

Challenges and Mitigations

Bundle Sizes

Because tailwind has support for several types of utility classes that can be combined, there is an explosive growth in size needed to support them. As a result, tailwind has a massive 783.5KB bundle by default.

Fortunately this can be mitigated by removing a few configurations (i.e. fewer colors, fewer responsive breakpoints, and fewer layout options), significantly reducing bundle size.

Too Much Freedom and Too much surface area

Because tailwind offers so many options for how to manage styles with the utility classes, it can result in many different development practices in how its used.

Limiting this from the beginning by only offering component classes and slowly rolling out the most useful/needed utility styles as we progress can help mitigate misuse.

We could also completely forgo the utility classes, and do this in a separate package, or in an application as needed.

This should also help with bundle size.

[ahuth]

Closing as this is accepted