View : 216
12/05/2026 01:14am
EP 3: Master Colors and Typography - Tailwind CSS Design System Techniques
#Color Palette
#Dark Mode CSS
#design system
#Typography System
#Tailwind CSS
Have you ever wondered why some websites look amazing with perfect color combinations, readable fonts, and a professional appearance, while others are hard to use, difficult to read, and have clashing colors?
The secret lies in using colors and fonts systematically! It's not just about choosing colors you like or using pretty fonts, but creating a balanced, consistent Design System that's suitable for users.
Today we'll learn how to use colors and fonts in Tailwind CSS like a pro, from color selection techniques, creating beautiful Color Palettes, readable Typography systems, to implementing functional Dark Mode, plus building a comprehensive Design System!
Why Colors and Fonts Matter for User Experience
The Impact of Colors on Perception
Colors aren't just about aesthetics—they affect user psychology and behavior:
Red - Urgency, danger, excitement
<!-- Delete or cancel buttons -->
<button class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600">
Delete Data
</button>
Green - Success, safety, action
<!-- Save or confirm buttons -->
<button class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600">
Save
</button>
Blue - Trust, professionalism
<!-- Primary website buttons -->
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
Get Started
</button>
Common Problems and Their Impact
1. Insufficient Contrast - Makes content hard to read, especially for users with visual impairments
<!-- ❌ Wrong: Insufficient contrast -->
<p class="text-gray-400 bg-gray-300">This text is hard to read</p>
<!-- ✅ Correct: Sufficient contrast -->
<p class="text-gray-800 bg-gray-100">This text is easy to read</p>
2. Using Too Many Colors - Makes design look cluttered without focus
<!-- ❌ Wrong: Too many colors -->
<div class="bg-red-500">
<h1 class="text-blue-600">Heading</h1>
<p class="text-green-500">Description</p>
<button class="bg-yellow-400 text-purple-600">Button</button>
</div>
<!-- ✅ Correct: Systematic color usage -->
<div class="bg-gray-50">
<h1 class="text-gray-900">Heading</h1>
<p class="text-gray-600">Description</p>
<button class="bg-blue-500 text-white">Button</button>
</div>
Comprehensive Color System in Tailwind CSS
Well-Designed Color Palette
Tailwind CSS has a comprehensive color system with each color having 10-11 intensity levels:
<!-- Gray scale with 11 levels (50-950) -->
<div class="bg-gray-50">Lightest gray</div>
<div class="bg-gray-100">Very light gray</div>
<div class="bg-gray-200">Light gray</div>
<div class="bg-gray-300">Medium gray</div>
<div class="bg-gray-400">Medium-dark gray</div>
<div class="bg-gray-500">Standard gray</div>
<div class="bg-gray-600">Dark gray</div>
<div class="bg-gray-700">Very dark gray</div>
<div class="bg-gray-800">Extra dark gray</div>
<div class="bg-gray-900">Darkest gray</div>
<div class="bg-gray-950">Black gray (v3.3+)</div>
Professional Color Selection Techniques
1. Color Harmony
Monochromatic - Using multiple tones of the same color
<div class="space-y-4">
<div class="bg-blue-100 p-4 rounded">Light background</div>
<div class="bg-blue-300 p-4 rounded">Medium background</div>
<div class="bg-blue-500 p-4 rounded text-white">Dark background</div>
<div class="bg-blue-700 p-4 rounded text-white">Very dark background</div>
</div>
Complementary - Using opposite colors
<div class="bg-blue-500 text-orange-500 p-4 rounded">
Blue with orange (complementary)
</div>
Analogous - Using adjacent colors
<div class="flex space-x-2">
<div class="bg-blue-500 p-4 rounded text-white">Blue</div>
<div class="bg-indigo-500 p-4 rounded text-white">Indigo</div>
<div class="bg-purple-500 p-4 rounded text-white">Purple</div>
</div>
2. Semantic Colors
<!-- Meaningful color system -->
<div class="space-y-4">
<!-- Success -->
<div class="bg-green-100 border border-green-300 text-green-800 p-4 rounded">
<h3 class="font-semibold">Success</h3>
<p>Operation completed successfully</p>
</div>
<!-- Warning -->
<div class="bg-yellow-100 border border-yellow-300 text-yellow-800 p-4 rounded">
<h3 class="font-semibold">Warning</h3>
<p>Please check or be careful</p>
</div>
<!-- Error -->
<div class="bg-red-100 border border-red-300 text-red-800 p-4 rounded">
<h3 class="font-semibold">Error</h3>
<p>An error occurred</p>
</div>
<!-- Info -->
<div class="bg-blue-100 border border-blue-300 text-blue-800 p-4 rounded">
<h3 class="font-semibold">Information</h3>
<p>Additional information</p>
</div>
</div>
Customizing Colors in Tailwind Config
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'brand': {
50: '#eff6ff',
100: '#dbeafe',
500: '#3b82f6',
600: '#2563eb',
700: '#1d4ed8',
900: '#1e3a8a',
},
'secondary': {
500: '#6b7280',
600: '#4b5563',
700: '#374151',
}
}
}
}
}
<!-- Using custom colors -->
<div class="bg-brand-500 text-white p-6">
<h1 class="text-brand-100">Brand Colors</h1>
<p class="text-secondary-300">Custom color system</p>
</div>
Gradients and Effects
<!-- Gradient Backgrounds -->
<div class="bg-gradient-to-r from-purple-500 to-pink-500 p-8 text-white rounded-lg">
<h2 class="text-2xl font-bold">Gradient Background</h2>
</div>
<div class="bg-gradient-to-br from-blue-400 via-purple-500 to-pink-500 p-8 text-white rounded-lg">
<h2 class="text-2xl font-bold">Multi-color Gradient</h2>
</div>
<!-- Gradient Text (requires additional CSS) -->
<style>
.gradient-text {
background: linear-gradient(to right, #3b82f6, #8b5cf6, #ec4899);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
</style>
<h1 class="text-6xl font-bold gradient-text">
Gradient Text
</h1>
Typography System for Professional Websites
Font Family Management
Tailwind includes basic font family utilities:
<!-- Basic Font Families -->
<p class="font-sans">
Sans-serif: General-purpose font, suitable for content and UI
</p>
<p class="font-serif">
Serif: Traditional font, suitable for headings and long content
</p>
<p class="font-mono">
Monospace: Fixed-width font, suitable for code and numbers
</p>
Adding Custom Fonts
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'heading': ['Inter', 'system-ui', 'sans-serif'],
'body': ['Inter', 'system-ui', 'sans-serif'],
'mono': ['JetBrains Mono', 'Courier New', 'monospace'],
}
}
}
}
<!-- Using Custom Fonts -->
<h1 class="font-heading text-4xl font-bold">Heading with Inter Font</h1>
<p class="font-body text-lg">Body text with Inter Font</p>
<code class="font-mono text-sm">console.log('Hello World');</code>
Appropriate Font Size and Line Height
<!-- Balanced font size system -->
<div class="space-y-4">
<h1 class="text-5xl leading-tight font-bold text-gray-900">
Main Heading (5xl + leading-tight)
</h1>
<h2 class="text-3xl leading-relaxed font-semibold text-gray-800">
Secondary Heading (3xl + leading-relaxed)
</h2>
<h3 class="text-xl leading-normal font-medium text-gray-700">
Sub Heading (xl + leading-normal)
</h3>
<p class="text-base leading-relaxed text-gray-600">
Body text (base + leading-relaxed) - comfortable size for reading
</p>
<p class="text-sm leading-normal text-gray-500">
Secondary text (sm + leading-normal)
</p>
</div>
Recommended Typography Scale
<!-- Scale for real-world usage -->
<div class="space-y-6">
<!-- Display Text -->
<h1 class="text-6xl leading-none font-bold">Display Text</h1>
<!-- Page Title -->
<h1 class="text-4xl leading-tight font-bold">Page Title</h1>
<!-- Section Title -->
<h2 class="text-2xl leading-snug font-semibold">Section Title</h2>
<!-- Card Title -->
<h3 class="text-lg leading-normal font-medium">Card Title</h3>
<!-- Body Text -->
<p class="text-base leading-relaxed">Body text for comfortable reading</p>
<!-- Caption -->
<p class="text-sm leading-normal">Caption or metadata</p>
<!-- Fine Print -->
<p class="text-xs leading-normal">Fine print or labels</p>
</div>
Font Weight and Visual Hierarchy
<!-- Creating Visual Hierarchy -->
<article class="max-w-4xl mx-auto p-8">
<!-- Primary Heading -->
<h1 class="text-4xl font-black text-gray-900 mb-2">
The Ultimate Guide to Typography
</h1>
<!-- Subtitle -->
<p class="text-xl font-light text-gray-600 mb-8">
Everything you need to know about choosing and using fonts
</p>
<!-- Section Heading -->
<h2 class="text-2xl font-bold text-gray-800 mt-12 mb-4">
Why Typography Matters
</h2>
<!-- Body Text -->
<p class="text-base font-normal text-gray-700 mb-4 leading-relaxed">
Typography is not just about making text look pretty. It's about creating a hierarchy
that guides your readers through your content in a logical and comfortable way.
</p>
<!-- Emphasized Text -->
<p class="text-base font-medium text-gray-800 mb-4">
Good typography improves readability and user experience.
</p>
<!-- Quote -->
<blockquote class="text-lg font-medium italic text-gray-900 border-l-4 border-blue-500 pl-6 my-8">
"Typography is the craft of endowing human language with a durable visual form."
</blockquote>
</article>
Building Design Systems with Tailwind
Defining Design Tokens
// tailwind.config.js - Comprehensive Design Tokens system
module.exports = {
theme: {
extend: {
colors: {
// Primary Colors
primary: {
50: '#eff6ff',
100: '#dbeafe',
500: '#3b82f6',
600: '#2563eb',
700: '#1d4ed8',
},
// Secondary Colors
secondary: {
50: '#f5f3ff',
500: '#8b5cf6',
600: '#7c3aed',
},
// Neutral Colors
neutral: {
50: '#f9fafb',
100: '#f3f4f6',
500: '#6b7280',
800: '#1f2937',
900: '#111827',
}
},
fontFamily: {
'heading': ['Inter', 'system-ui', 'sans-serif'],
'body': ['Inter', 'system-ui', 'sans-serif'],
'mono': ['JetBrains Mono', 'Courier New', 'monospace'],
},
spacing: {
'xs': '0.5rem',
'sm': '1rem',
'md': '1.5rem',
'lg': '2rem',
'xl': '3rem',
},
borderRadius: {
'sm': '0.25rem',
'md': '0.375rem',
'lg': '0.5rem',
'xl': '0.75rem',
}
}
}
}
Basic Component Library
Button System:
<!-- Button Variants -->
<div class="space-x-4 space-y-4">
<!-- Primary Button -->
<button class="bg-primary-500 hover:bg-primary-600 text-white font-medium px-6 py-3 rounded-lg transition-colors">
Primary Action
</button>
<!-- Secondary Button -->
<button class="bg-secondary-500 hover:bg-secondary-600 text-white font-medium px-6 py-3 rounded-lg transition-colors">
Secondary Action
</button>
<!-- Outline Button -->
<button class="border-2 border-primary-500 text-primary-500 hover:bg-primary-500 hover:text-white font-medium px-6 py-3 rounded-lg transition-all">
Outline Button
</button>
<!-- Ghost Button -->
<button class="text-primary-500 hover:bg-primary-50 font-medium px-6 py-3 rounded-lg transition-colors">
Ghost Button
</button>
<!-- Disabled Button -->
<button class="bg-neutral-300 text-neutral-500 font-medium px-6 py-3 rounded-lg cursor-not-allowed" disabled>
Disabled Button
</button>
</div>
<!-- Button Sizes -->
<div class="space-x-4">
<button class="bg-primary-500 text-white font-medium px-3 py-1.5 text-sm rounded">Small</button>
<button class="bg-primary-500 text-white font-medium px-4 py-2 rounded-md">Medium</button>
<button class="bg-primary-500 text-white font-medium px-6 py-3 rounded-lg">Large</button>
<button class="bg-primary-500 text-white font-medium px-8 py-4 text-lg rounded-xl">Extra Large</button>
</div>
Card System:
<!-- Card Variants -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Basic Card -->
<div class="bg-white rounded-xl shadow-sm border border-neutral-200 p-6">
<h3 class="text-lg font-semibold text-neutral-900 mb-2">Basic Card</h3>
<p class="text-neutral-600">Simple card with basic styling</p>
</div>
<!-- Featured Card -->
<div class="bg-gradient-to-br from-primary-500 to-secondary-500 rounded-xl shadow-lg p-6 text-white">
<h3 class="text-lg font-semibold mb-2">Featured Card</h3>
<p class="opacity-90">Special card with gradient background</p>
</div>
<!-- Interactive Card -->
<div class="bg-white rounded-xl shadow-sm border border-neutral-200 p-6 hover:shadow-lg hover:border-primary-300 transition-all cursor-pointer">
<h3 class="text-lg font-semibold text-neutral-900 mb-2">Interactive Card</h3>
<p class="text-neutral-600">Card with hover effects</p>
</div>
</div>
Form Elements:
<!-- Form System -->
<form class="space-y-6 max-w-md">
<!-- Input Field -->
<div>
<label class="block text-sm font-medium text-neutral-700 mb-2">
Email Address
</label>
<input
type="email"
class="w-full px-4 py-3 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors"
placeholder="your@email.com"
>
</div>
<!-- Textarea -->
<div>
<label class="block text-sm font-medium text-neutral-700 mb-2">
Message
</label>
<textarea
rows="4"
class="w-full px-4 py-3 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors resize-none"
placeholder="Your message here..."
></textarea>
</div>
<!-- Select -->
<div>
<label class="block text-sm font-medium text-neutral-700 mb-2">
Category
</label>
<select class="w-full px-4 py-3 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors">
<option>Choose a category</option>
<option>General</option>
<option>Technical</option>
<option>Billing</option>
</select>
</div>
<!-- Checkbox -->
<div class="flex items-center">
<input
type="checkbox"
id="newsletter"
class="w-4 h-4 text-primary-500 border-neutral-300 rounded focus:ring-primary-500"
>
<label for="newsletter" class="ml-2 text-sm text-neutral-700">
Subscribe to newsletter
</label>
</div>
</form>
Functional Dark Mode Implementation
Setting Up Dark Mode in Tailwind
// tailwind.config.js
module.exports = {
darkMode: 'class', // Enable dark mode
theme: {
extend: {
// colors configuration
}
}
}
Color Strategy for Dark Mode
<!-- Components that support Dark Mode -->
<div class="bg-white dark:bg-gray-900 min-h-screen transition-colors">
<!-- Header -->
<header class="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
<div class="max-w-7xl mx-auto px-4 py-4">
<h1 class="text-2xl font-bold text-gray-900 dark:text-white">
My Website
</h1>
</div>
</header>
<!-- Main Content -->
<main class="max-w-4xl mx-auto p-8">
<article class="bg-white dark:bg-gray-800 rounded-xl shadow-lg dark:shadow-gray-900/20 p-8">
<h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-4">
Dark Mode Article
</h2>
<p class="text-gray-700 dark:text-gray-300 mb-6 leading-relaxed">
This article demonstrates how to create a proper dark mode implementation
with good contrast ratios and comfortable reading experience.
</p>
<!-- Code Block -->
<div class="bg-gray-100 dark:bg-gray-900 rounded-lg p-4 mb-6">
<code class="text-sm text-gray-800 dark:text-gray-200 font-mono">
const darkMode = document.querySelector('.dark');
</code>
</div>
<!-- Buttons -->
<div class="flex space-x-4">
<button class="bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-500 text-white px-6 py-3 rounded-lg transition-colors">
Primary Action
</button>
<button class="bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-200 px-6 py-3 rounded-lg transition-colors">
Secondary Action
</button>
</div>
</article>
</main>
</div>
Dark Mode Toggle Implementation
<!-- Dark Mode Toggle Button -->
<button
id="theme-toggle"
class="relative p-2 rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
>
<!-- Sun Icon (Light Mode) -->
<svg id="sun-icon" class="w-5 h-5 hidden dark:block" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd"></path>
</svg>
<!-- Moon Icon (Dark Mode) -->
<svg id="moon-icon" class="w-5 h-5 block dark:hidden" fill="currentColor" viewBox="0 0 20 20">
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
</svg>
</button>
<script>
// Dark Mode Toggle JavaScript
function initTheme() {
// Check saved preference
const savedTheme = localStorage.getItem('theme');
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
}
// Initialize on page load
initTheme();
// Toggle function
document.getElementById('theme-toggle').addEventListener('click', function() {
const isDark = document.documentElement.classList.contains('dark');
if (isDark) {
document.documentElement.classList.remove('dark');
localStorage.setItem('theme', 'light');
} else {
document.documentElement.classList.add('dark');
localStorage.setItem('theme', 'dark');
}
});
</script>
Typography in Dark Mode
<!-- Typography suitable for Dark Mode -->
<div class="bg-white dark:bg-gray-900 p-8 rounded-xl">
<!-- Main Heading -->
<h1 class="text-4xl font-bold text-gray-900 dark:text-white mb-4">
Typography in Dark Mode
</h1>
<!-- Sub Heading -->
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-6">
Proper Contrast and Readability
</h2>
<!-- Main Content -->
<p class="text-base text-gray-700 dark:text-gray-300 mb-4 leading-relaxed">
When designing Typography for Dark Mode, it's essential to consider appropriate
contrast ratios to ensure readability and prevent eye strain.
</p>
<!-- Emphasized Text -->
<p class="text-lg font-medium text-gray-800 dark:text-gray-200 mb-4">
Important text should have higher contrast
</p>
<!-- Secondary Text -->
<p class="text-sm text-gray-600 dark:text-gray-400">
Secondary text can have lower contrast but should still be clearly readable
</p>
<!-- Links -->
<p class="mt-4">
<a href="#" class="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 underline">
Links with appropriate contrast in both modes
</a>
</p>
</div>
Advanced Techniques: Animation and Visual Effects
Color Transitions
<!-- Smooth Color Transitions -->
<div class="space-y-6">
<!-- Color Shift on Hover -->
<div class="group bg-white hover:bg-blue-50 dark:bg-gray-800 dark:hover:bg-blue-900/20 p-6 rounded-xl border border-gray-200 dark:border-gray-700 transition-all duration-300">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
Interactive Card
</h3>
<p class="text-gray-600 dark:text-gray-300 group-hover:text-blue-700 dark:group-hover:text-blue-300 transition-colors">
Colors change smoothly on hover
</p>
</div>
<!-- Background Animation -->
<div class="relative overflow-hidden bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 p-8 rounded-xl text-white">
<div class="absolute inset-0 bg-gradient-to-r from-pink-500 via-purple-500 to-blue-500 opacity-0 hover:opacity-100 transition-opacity duration-700"></div>
<div class="relative z-10">
<h3 class="text-2xl font-bold">Gradient Overlay</h3>
<p>Hover to see the gradient shift</p>
</div>
</div>
</div>
Typography Animations
<!-- Text Effects using CSS Animation -->
<div class="space-y-8">
<!-- Fade In Text -->
<div class="opacity-0 animate-pulse">
<h2 class="text-3xl font-bold text-gray-900 dark:text-white">
Animated Text
</h2>
</div>
<!-- Hover Text Effect -->
<div class="group cursor-pointer">
<p class="text-lg text-gray-700 dark:text-gray-300 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-300">
Text with smooth color transition on hover
</p>
</div>
</div>
<!-- Custom CSS for more advanced animations -->
<style>
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in-up {
animation: fadeInUp 0.8s ease-out;
}
</style>
<!-- Using custom animation -->
<div class="animate-fade-in-up">
<h3 class="text-2xl font-semibold">Text slides up and fades in</h3>
</div>
Hands-On Project: Building a Complete Design System
Let's create a comprehensive Style Guide and Component Library:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System - Style Guide</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
brand: {
50: '#eff6ff',
100: '#dbeafe',
500: '#3b82f6',
600: '#2563eb',
700: '#1d4ed8',
}
}
}
}
}
</script>
</head>
<body class="bg-gray-50 dark:bg-gray-900 transition-colors">
<!-- Header with Theme Toggle -->
<header class="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700">
<div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
<h1 class="text-2xl font-bold text-gray-900 dark:text-white">Design System</h1>
<button id="theme-toggle" class="p-2 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors">
<svg class="w-5 h-5 hidden dark:block" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd"></path>
</svg>
<svg class="w-5 h-5 block dark:hidden" fill="currentColor" viewBox="0 0 20 20">
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
</svg>
</button>
</div>
</header>
<main class="max-w-7xl mx-auto p-8">
<!-- Color Palette Section -->
<section class="mb-16">
<h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-8">Color Palette</h2>
<!-- Primary Colors -->
<div class="mb-8">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Primary Colors</h3>
<div class="grid grid-cols-2 md:grid-cols-5 gap-4">
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg text-center border border-gray-200 dark:border-gray-700">
<div class="w-full h-16 bg-brand-50 rounded mb-2"></div>
<p class="text-sm font-medium text-gray-700 dark:text-gray-300">brand-50</p>
</div>
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg text-center border border-gray-200 dark:border-gray-700">
<div class="w-full h-16 bg-brand-100 rounded mb-2"></div>
<p class="text-sm font-medium text-gray-700 dark:text-gray-300">brand-100</p>
</div>
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg text-center border border-gray-200 dark:border-gray-700">
<div class="w-full h-16 bg-brand-500 rounded mb-2"></div>
<p class="text-sm font-medium text-gray-700 dark:text-gray-300">brand-500</p>
</div>
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg text-center border border-gray-200 dark:border-gray-700">
<div class="w-full h-16 bg-brand-600 rounded mb-2"></div>
<p class="text-sm font-medium text-gray-700 dark:text-gray-300">brand-600</p>
</div>
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg text-center border border-gray-200 dark:border-gray-700">
<div class="w-full h-16 bg-brand-700 rounded mb-2"></div>
<p class="text-sm font-medium text-gray-700 dark:text-gray-300">brand-700</p>
</div>
</div>
</div>
<!-- Semantic Colors -->
<div class="mb-8">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Semantic Colors</h3>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<div class="bg-green-100 dark:bg-green-900/30 p-4 rounded-lg text-center border border-green-200 dark:border-green-700">
<div class="w-full h-16 bg-green-500 rounded mb-2"></div>
<p class="text-sm font-medium text-green-800 dark:text-green-200">Success</p>
</div>
<div class="bg-yellow-100 dark:bg-yellow-900/30 p-4 rounded-lg text-center border border-yellow-200 dark:border-yellow-700">
<div class="w-full h-16 bg-yellow-500 rounded mb-2"></div>
<p class="text-sm font-medium text-yellow-800 dark:text-yellow-200">Warning</p>
</div>
<div class="bg-red-100 dark:bg-red-900/30 p-4 rounded-lg text-center border border-red-200 dark:border-red-700">
<div class="w-full h-16 bg-red-500 rounded mb-2"></div>
<p class="text-sm font-medium text-red-800 dark:text-red-200">Error</p>
</div>
<div class="bg-blue-100 dark:bg-blue-900/30 p-4 rounded-lg text-center border border-blue-200 dark:border-blue-700">
<div class="w-full h-16 bg-blue-500 rounded mb-2"></div>
<p class="text-sm font-medium text-blue-800 dark:text-blue-200">Info</p>
</div>
</div>
</div>
</section>
<!-- Typography Section -->
<section class="mb-16">
<h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-8">Typography</h2>
<div class="bg-white dark:bg-gray-800 rounded-xl p-8 shadow-sm border border-gray-200 dark:border-gray-700">
<div class="space-y-6">
<div>
<h1 class="text-6xl font-bold text-gray-900 dark:text-white">Display Text</h1>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">text-6xl font-bold</p>
</div>
<div>
<h1 class="text-4xl font-bold text-gray-900 dark:text-white">Heading 1</h1>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">text-4xl font-bold</p>
</div>
<div>
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100">Heading 2</h2>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">text-2xl font-semibold</p>
</div>
<div>
<h3 class="text-lg font-medium text-gray-700 dark:text-gray-200">Heading 3</h3>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">text-lg font-medium</p>
</div>
<div>
<p class="text-base text-gray-700 dark:text-gray-300">Body text for general content, comfortable size for reading</p>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">text-base</p>
</div>
<div>
<p class="text-sm text-gray-600 dark:text-gray-400">Small text for captions or additional information</p>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">text-sm</p>
</div>
</div>
</div>
</section>
<!-- Components Section -->
<section class="mb-16">
<h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-8">Components</h2>
<!-- Buttons -->
<div class="mb-12">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-6">Buttons</h3>
<div class="flex flex-wrap gap-4">
<button class="bg-brand-500 hover:bg-brand-600 text-white font-medium px-6 py-3 rounded-lg transition-colors">
Primary
</button>
<button class="border-2 border-brand-500 text-brand-500 hover:bg-brand-500 hover:text-white font-medium px-6 py-3 rounded-lg transition-all">
Secondary
</button>
<button class="text-brand-500 hover:bg-brand-50 dark:hover:bg-brand-900/20 font-medium px-6 py-3 rounded-lg transition-colors">
Ghost
</button>
<button class="bg-gray-300 dark:bg-gray-600 text-gray-500 dark:text-gray-400 font-medium px-6 py-3 rounded-lg cursor-not-allowed">
Disabled
</button>
</div>
</div>
<!-- Cards -->
<div class="mb-12">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-6">Cards</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
<h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Basic Card</h4>
<p class="text-gray-600 dark:text-gray-300">Simple card with border and shadow</p>
</div>
<div class="bg-gradient-to-br from-brand-500 to-purple-600 rounded-xl shadow-lg p-6 text-white">
<h4 class="text-lg font-semibold mb-2">Featured Card</h4>
<p class="opacity-90">Card with gradient background</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6 hover:shadow-lg hover:border-brand-300 dark:hover:border-brand-600 transition-all cursor-pointer">
<h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Interactive Card</h4>
<p class="text-gray-600 dark:text-gray-300">Hover to see the effect</p>
</div>
</div>
</div>
<!-- Forms -->
<div class="mb-12">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-6">Form Elements</h3>
<div class="bg-white dark:bg-gray-800 rounded-xl p-8 shadow-sm border border-gray-200 dark:border-gray-700 max-w-md">
<form class="space-y-6">
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Email
</label>
<input
type="email"
class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white rounded-lg focus:ring-2 focus:ring-brand-500 focus:border-brand-500 transition-colors"
placeholder="your@email.com"
>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Message
</label>
<textarea
rows="4"
class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white rounded-lg focus:ring-2 focus:ring-brand-500 focus:border-brand-500 transition-colors resize-none"
placeholder="Your message..."
></textarea>
</div>
<button type="submit" class="w-full bg-brand-500 hover:bg-brand-600 text-white font-medium py-3 rounded-lg transition-colors">
Send Message
</button>
</form>
</div>
</div>
</section>
</main>
<script>
// Dark Mode Toggle
function initTheme() {
const savedTheme = localStorage.getItem('theme');
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
document.documentElement.classList.add('dark');
}
}
initTheme();
document.getElementById('theme-toggle').addEventListener('click', function() {
const isDark = document.documentElement.classList.contains('dark');
if (isDark) {
document.documentElement.classList.remove('dark');
localStorage.setItem('theme', 'light');
} else {
document.documentElement.classList.add('dark');
localStorage.setItem('theme', 'dark');
}
});
</script>
</body>
</html>
Performance and Best Practices
1. Optimizing Colors and Typography
// tailwind.config.js - Optimizing colors and fonts
module.exports = {
content: [
"./src/**/*.{html,js,ts,jsx,tsx}",
],
theme: {
extend: {
// Use only colors that are actually needed
colors: {
primary: '#3b82f6',
secondary: '#6b7280',
success: '#10b981',
warning: '#f59e0b',
error: '#ef4444',
},
// Use system fonts for better performance
fontFamily: {
sans: ['system-ui', '-apple-system', 'sans-serif'],
serif: ['Georgia', 'serif'],
mono: ['Menlo', 'Monaco', 'monospace'],
}
}
}
}
2. Accessibility Guidelines
<!-- Examples of accessibility-friendly color usage -->
<div class="space-y-4">
<!-- Appropriate contrast ratio (4.5:1 for normal text) -->
<div class="bg-white text-gray-900 p-4 rounded">
<p>This text has an appropriate contrast ratio</p>
</div>
<!-- Important text (3:1 for large text) -->
<div class="bg-red-50 border border-red-200 text-red-800 p-4 rounded">
<p class="font-medium">Error: Please check your data</p>
</div>
<!-- Accessible links -->
<p>
Read more in the
<a href="#" class="text-blue-600 underline hover:text-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded">
documentation
</a>
</p>
<!-- Don't rely on color alone for communication -->
<div class="flex items-center space-x-2">
<span class="w-3 h-3 bg-green-500 rounded-full"></span>
<span class="text-green-700">✓ Success</span>
</div>
</div>
3. Techniques for Reducing CSS Bundle Size
// tailwind.config.js
module.exports = {
content: [
"./src/**/*.{html,js}",
],
theme: {
// Use only necessary colors
colors: {
transparent: 'transparent',
current: 'currentColor',
white: '#ffffff',
black: '#000000',
gray: {
100: '#f3f4f6',
500: '#6b7280',
900: '#111827',
},
blue: {
500: '#3b82f6',
600: '#2563eb',
}
},
// Remove unused utility classes
extend: {}
},
// Disable unnecessary plugins
corePlugins: {
float: false,
clear: false,
skew: false,
}
}
Summary
In EP 3, we've learned comprehensive color and font usage in Tailwind CSS:
Key Learnings:
- Tailwind CSS Color System with 22 color groups, each having 11 intensity levels
- Professional Color Selection Techniques using Color Harmony and Semantic Colors
- Typography System that creates good Visual Hierarchy
- Building Design Systems that are consistent and easy to use
- Dark Mode Implementation that works seamlessly without flicker
- Performance and Accessibility considerations
Important Techniques to Remember:
- Use appropriate contrast ratios - at least 4.5:1 for normal text
- Create semantic color systems - success, warning, error, info
- Use Typography scale consistently - from text-xs to text-6xl
- Design Dark Mode from the start - not as an afterthought
- Always test accessibility - use contrast checking tools
Understanding and using colors and fonts correctly will make your website look professional, create a great user experience, and stand out from competitors.
EP 4 "Flexbox and Grid in Tailwind: Create Professional Layouts in 10 Minutes" will teach us how to use Flexbox and CSS Grid like a pro, create complex layouts, advanced Responsive Design, and layout techniques that make websites beautiful and user-friendly.
Ready to become a Layout master with Tailwind CSS? Follow Superdev School to not miss the pro techniques that will help you create layouts professionally!
Good design starts with appropriate colors and fonts. Let's create beautiful and user-friendly websites with Tailwind CSS! 🎨
Read more
🔵 Facebook: Superdev School (Superdev)
📸 Instagram: superdevschool
🎬 TikTok: superdevschool
🌐 Website: www.superdev.school