Shruti Balasa :: Explore the Art of Customising Tailwindcss
summary
Gives concrete rules and examples: add global body styles directly in HTML, keep element defaults and lots of keyframes in CSS rather than the config, and avoid overusing @apply or replacing the default spacing scale. Demonstrates building a working dynamic Avatar component with tailwindcss/plugin using matchComponents driven by a custom Avatar sizes theme key, which reduces class bloat, preserves override behavior, and proves the plugin approach is maintainable.
AI-written summary · about
chapters (12)
- 0:00Tailwind CSS customization intro
- 2:30Where to customize Tailwind
- 4:38Global styles in HTML
- 6:26Avoid long class names
- 8:34Prefer CSS for base styles
- 11:45Respect spacing scale
- 13:53Modify preflight defaults
- 14:36Customize breakpoints wisely
- 15:40Tailwind plugins for customization
- 18:12Dynamic components with plugins
- 22:33Summary of guidelines
- 23:36Resources & closing
related talks
31mTailwind CSS: It looks awful, and it works
37mHijacking CSS with tailwindCSS
36mNew Ways Of Responsive Design in Tailwind CSS
27mBuilding Design Components with Tailwind
19mTangled in Tailwind: A love-hate story
31mTailwind or the Future of CSS
30mTailwind 4 vs CSS 6
59mBuilding beautiful Blazor apps with Tailwind CSS