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.
Setup (CDN)
1<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
2<style type="text/tailwindcss">
3 @theme {
4 --color-brand: #8B1A1A;
5 --color-sage: #7C9070;
6 --color-cream: #FFF8F0;
7 --font-display: 'Playfair Display', serif;
8 --font-body: 'Inter', sans-serif;
9 }
10</style>
Critical: The <style> tag MUST have type="text/tailwindcss" for @theme and @apply to work with the CDN.
Namespace System
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.
Custom Colors
Defining a Palette
1@theme {
2 --color-brand: #8B1A1A;
3 --color-brand-light: #A52A2A;
4 --color-brand-dark: #6B1010;
5 --color-sage: #7C9070;
6 --color-sage-light: #A3B898;
7 --color-cream: #FFF8F0;
8 --color-cream-dark: #F5EDE0;
9 --color-charcoal: #2C2C2C;
10 --color-warm-gray: #6B6360;
11}
Using Custom Colors
1
2<body class="bg-cream text-charcoal">
3<h1 class="text-brand">Heading</h1>
4<button class="bg-brand text-cream border-sage">Button</button>
5<div class="ring-2 ring-brand">Focused element</div>
:root (Lecture 5) vs @theme (Lecture 7)
`@theme` is `:root` on steroids — it speaks Tailwind's language.
Custom Fonts
Google Fonts Integration
1
2<link rel="preconnect" href="https://fonts.googleapis.com">
3<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
4<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">
1
2@theme {
3 --font-display: 'Playfair Display', serif;
4 --font-body: 'Inter', sans-serif;
5}
1
2<body class="font-body">
3<h1 class="font-display text-4xl">Title</h1>
Pro Tip: Two fonts is the sweet spot — one display (headings), one body (text). Three fonts is messy. One font is boring.
@apply — Component Extraction
Syntax
1.nav-link {
2 @apply text-warm-gray text-sm uppercase tracking-widest hover:text-brand transition duration-200;
3}
1
2<a class="text-warm-gray text-sm uppercase tracking-widest hover:text-brand transition duration-200">
3
4
5<a class="nav-link">
When to Use @apply
Rule of 3+: If a utility pattern repeats 3 or more times, extract with @apply.
All Modifiers Work Inside @apply
1.menu-card {
2 @apply bg-white rounded-xl shadow-md overflow-hidden
3 hover:-translate-y-1 hover:shadow-xl
4 transition duration-300;
5}
hover:, focus:, md:, lg:, dark:, active: — all work inside @apply.
Base + Variant Pattern
1
2.badge {
3 @apply text-xs font-semibold px-3 py-1 rounded-full uppercase tracking-wide;
4}
5
6
7.badge-spicy {
8 @apply bg-red-100 text-red-700;
9}
10.badge-veg {
11 @apply bg-green-100 text-green-700;
12}
13.badge-popular {
14 @apply bg-amber-100 text-amber-700;
15}
Overriding @apply with Inline Utilities
1
2
3<button class="btn-primary bg-cream text-brand">Inverted Button</button>
Inline utilities always win over @apply defaults.
Gradients
Syntax
1<div class="bg-gradient-to-br from-brand via-brand-dark to-charcoal">
Gradient Directions
Gradient Color Stops
Pro Tip: Always include a via-* color for smoother, more professional gradients. Without via-*, the transition can look harsh.
Dark Mode Basics
The dark: Variant
1<body class="bg-cream text-charcoal dark:bg-charcoal dark:text-cream">
2<h1 class="text-brand dark:text-brand-light">Title</h1>
How to Activate
Add class="dark" to the <html> element:
1<html lang="en" class="dark">
Note: Toggling dark mode dynamically requires JavaScript (covered in Module 2). For now, know the dark: prefix exists and plan your inverse palette.
Button Components
1.btn-primary {
2 @apply bg-brand text-cream font-semibold py-3 px-8 rounded-lg
3 hover:bg-brand-light transition duration-300;
4}
5
6.btn-outline {
7 @apply border-2 border-brand text-brand font-semibold py-3 px-8 rounded-lg
8 hover:bg-brand hover:text-cream transition duration-300;
9}
1<button class="btn-primary">Book a Table</button>
2<button class="btn-outline">View Menu</button>
3
4
5<button class="btn-primary bg-cream text-brand hover:bg-cream-dark">Light Button</button>
Badge Pattern
1.badge {
2 @apply text-xs font-semibold px-3 py-1 rounded-full uppercase tracking-wide;
3}
4.badge-spicy { @apply bg-red-100 text-red-700; }
5.badge-veg { @apply bg-green-100 text-green-700; }
6.badge-popular { @apply bg-amber-100 text-amber-700; }
1<span class="badge badge-spicy">Spicy</span>
2<span class="badge badge-veg">Vegetarian</span>
3<span class="badge badge-popular">Popular</span>
Common Mistakes to Avoid
1. Missing type="text/tailwindcss"
1
2<style>
3 @theme { --color-brand: #8B1A1A; }
4</style>
5
6
7<style type="text/tailwindcss">
8 @theme { --color-brand: #8B1A1A; }
9</style>
2. Wrong Namespace
1
2@theme {
3 --brand: #8B1A1A;
4}
5
6
7@theme {
8 --color-brand: #8B1A1A;
9}
3. Over-Extracting with @apply
1
2.red-text { @apply text-red-500; }
3.big-padding { @apply p-8; }
4
5
6.menu-card { @apply bg-white rounded-xl shadow-md overflow-hidden hover:-translate-y-1 transition duration-300; }
4. Missing -- Prefix
1
2@theme {
3 color-brand: #8B1A1A;
4}
5
6
7@theme {
8 --color-brand: #8B1A1A;
9}
VS Code Shortcuts
Quick Reference Table
Restaurant Menu Component Library
1
2.nav-link { @apply text-warm-gray text-sm uppercase tracking-widest hover:text-brand transition duration-200; }
3.section-title { @apply font-display text-3xl md:text-4xl font-bold text-charcoal text-center mb-2; }
4.section-subtitle{ @apply text-warm-gray text-center text-lg mb-12 max-w-2xl mx-auto; }
5.menu-card { @apply bg-white rounded-xl shadow-md overflow-hidden hover:-translate-y-1 hover:shadow-xl transition duration-300; }
6.menu-card-image { @apply w-full h-48 object-cover; }
7.price-tag { @apply font-display text-xl font-bold text-brand; }
8.badge { @apply text-xs font-semibold px-3 py-1 rounded-full uppercase tracking-wide; }
9.badge-spicy { @apply bg-red-100 text-red-700; }
10.badge-veg { @apply bg-green-100 text-green-700; }
11.badge-popular { @apply bg-amber-100 text-amber-700; }
12.btn-primary { @apply bg-brand text-cream font-semibold py-3 px-8 rounded-lg hover:bg-brand-light transition duration-300; }
13.btn-outline { @apply border-2 border-brand text-brand font-semibold py-3 px-8 rounded-lg hover:bg-brand hover:text-cream transition duration-300; }
What's Next?
Module Assignment: Fashion E-commerce Homepage
Combines EVERYTHING from Lectures 1-7:
- Semantic HTML structure (Lectures 1-2)
- Responsive design (Lecture 5)
- Tailwind customization with
@theme and @apply (Lectures 6-7) - Custom brand colors, fonts, gradients, and component extraction
Module 2: Programming Logic with JavaScript
Your pages are beautiful — but they don't DO anything yet:
- Can't add items to a cart
- Can't filter the menu
- Can't toggle dark mode
- Can't validate a reservation form
- JavaScript brings your pages to life
> "Module 1 complete. 7 lectures. Zero to production-quality websites you can sell. Module 2 adds the logic that makes them interactive."
Keep this cheatsheet handy while working on your assignment!
