Stop using someone else's design system. In this lecture, you make Tailwind truly yours — custom colors, custom fonts, and reusable components built from scratch.
What You'll Learn
This lecture takes you from Tailwind user to Tailwind power user:
🎯 @theme Directive — define your own brand colors and fonts that automatically generate Tailwind utility classes like bg-brand and font-display
🖋️ Custom Fonts — integrate Google Fonts and register them in your design system in three simple steps
🧩 @apply Component Extraction — stop repeating 7-class combinations everywhere; turn them into clean, reusable class names like .menu-card and .btn-primary
🌈 Gradients — build smooth diagonal and multi-stop gradients using from-*, via-*, and to-*
🌑 Dark Mode Basics — plan a light/dark palette using the dark: variant prefix
🏷️ Badge & Button Systems — build a base + variant component pattern that scales cleanly across your project
Why This Matters
Raw Tailwind defaults look generic. Every professional project has a brand — specific colors, typography, and repeating UI components. @theme and @apply are how you encode that brand into your workflow so every element you build looks cohesive, consistent, and yours. This is how real agency and product work gets done.
Before You Watch
This lecture is the direct continuation of Lecture 6: Tailwind CSS Basics. You should already be comfortable with:
Tailwind's utility class syntax and spacing scale
Responsive prefixes like md: and lg:
Hover and transition modifiers
💡 You'll be building a complete Restaurant Digital Menu in this lecture — so you'll see every concept applied in a real, polished project, not just isolated examples.
📎 The cheatsheet is attached below the video. The full Restaurant Menu Component Library at the bottom is ready to copy directly into your own projects!
Advanced Tailwind & Customization Cheatsheet
Quick reference for all Tailwind CSS customization techniques covered in Lecture 7.
@theme Directive — Custom Design Tokens
The @theme directive lets you define custom colors, fonts, and spacing that automatically generate Tailwind utility classes.
Pattern:--color-* → all color utilities, --font-* → font-* utility, --spacing-* → spacing utilities
Pro Tip: Name tokens by PURPOSE (brand, sage, cream) not appearance (dark-red, green). If the client changes from maroon to navy, --color-brand still makes sense.