TailwindCSS Demo Application
This is a purposely small and ugly, but functional, application that we can practice and demonstrate various patterns of using TailwindCSS's design language to improve the speed and consistency of our application development process.
The intent is to walk through the styling of the application during a live demonstration, but if you would prefer to just skip to the good bits - each of these branches builds on the one above it
- main: basic unstyled working application
- tw-default: following Tailwind's suggested usage guidelines
- tw-vanish: proposed pattern to minimize the "class-itis" of vanilla TailwindCSS
- bonus: using Class Variance Authority to create a reusable component, touch on custom theming
- Tailwind CSS Color Generator: generates a custom color scale from a given color
- Class Variance Authority: cva aims to take away the pain points of creating CSS-in-TS variant styling, allowing you to focus on the more fun aspects of UI development.
- shadcn/ui: A free library of ready-to-use React components using cva + Tailwind combination