Here's a drawing you can use to understand how andrecasal/ui works. Right click and choose "Open image in new tab" to see it in full size.

andrecasal/ui architecture
andrecasal/ui architecture

Theme Panel

The Theme Panel is a drop in component that allows you to preview the theme configuration in real time. This is probably the last component I'll build.

Full theme control with CSS variables

The theme is completely controlled by CSS variables. These CSS variables are colocated in a single CSS file.

Custom utility-based TailwindCSS classes

These CSS variables drive custom, prefixed, utility-based TailwindCSS classes. This has a few benefits:

  • It becomes obvious which classes are original to TailwindCSS and which are controlled by CSS variables.

  • The usual utility-based benefits (small codebase, no classes you don't know whether or not you can delete, etc)

  • Theme transitions without a Flash Of Incorrect Theme

Components use the custom classes

Because the components use these custom classes, they become theme controlled. Additionally, you still have the full power of (non-CSS-variable controlled) TailwindCSS classes at your disposal for inside the components or other parts of your app.