Notes On Work - by Caleb Porzio The edge of Tailwind
Nov 30, 2025
Caleb dives into the intricacies of using Tailwind vs. vanilla CSS, exploring the reasons behind Flux's separate CSS file. He highlights Tailwind's limitations with advanced styling and specific grid complexities, sharing insights on class conflicts and the benefits of using CSS :where() for easier overrides. The discussion reveals how complex selectors can enhance maintainability and efficiency. Ultimately, Caleb reflects on successfully integrating vanilla CSS into his projects while still appreciating Tailwind's flexibility.
AI Snips
Chapters
Transcript
Tailwind Isn't A Complete Replacement
- Tailwind covers most styling needs but you still need raw CSS for advanced features like keyframes, grid-template-areas, and complex pseudo/selector targeting.
- Caleb finds that some things are simply more expressive and maintainable in a dedicated CSS file than as inline Tailwind classes.
Iterating Between Tailwind And Vanilla CSS
- Caleb iterated multiple times between Tailwind and vanilla CSS while building the timeline component and kept trashing and rebuilding approaches.
- He ultimately decided to move heavy grid logic into vanilla CSS for clarity and control.
Move Complex Layouts To A CSS File
- Put complex grid and layout rules into a dedicated CSS file rather than forcing them into Tailwind classes.
- This reduces complexity, improves maintainability, and lets Tailwind handle spacing and colors instead.