🎭 Tailwind CSS State Variants: Media Queries
The Magic Remote Control for Your Website
Imagine you have a magic remote control for your website. This remote can sense things about the person watching—like if they prefer a dark room, if they’re holding their phone sideways, or if they want things to move slower. Tailwind’s media query variants are exactly like that magic remote!
🌙 Dark Mode: Two Ways to Rule the Night
The Story of Two Kingdoms
Once upon a time, there were two kingdoms that both wanted to turn off the lights at night. But they had different ways of deciding when to do it.
🏰 Kingdom 1: The Class Strategy (Manual Switch)
In this kingdom, the king decides when it’s dark. He walks to a big switch and flips it himself.
How it works:
<!-- The king adds "dark" class -->
<html class="dark">
<!-- Now dark: works! -->
<div class="bg-white dark:bg-gray-900">
I change when king says so!
</div>
The Magic Words:
/* In tailwind.config.js */
darkMode: 'class'
When to use this:
- You want a toggle button on your website
- Users can choose light or dark themselves
- You’re the king of your own website!
🌍 Kingdom 2: The Media Strategy (Automatic Switch)
In this kingdom, the lights change automatically based on the sun! When the sun sets, everything gets dark. No king needed.
How it works:
<!-- No class needed on html! -->
<div class="bg-white dark:bg-slate-800">
I follow the user's system!
</div>
The Magic Words:
/* In tailwind.config.js */
darkMode: 'media'
When to use this:
- You want to respect what the user already chose
- Less work for you—the system handles it
- The user’s phone/computer decides!
🎨 Color Scheme: Tell the Browser What You Like
Think of this as leaving a note for the browser saying “Hey, I like dark colors!” or “Hey, I like light colors!”
<!-- Tell browser: "Make scrollbars dark!" -->
<html class="scheme-dark">
<!-- Tell browser: "Keep it light!" -->
<html class="scheme-light">
<!-- Let the system decide -->
<html class="scheme-normal">
What it does:
- Changes scrollbar colors
- Changes form element colors
- Makes built-in browser things match your theme
🐢 Prefers Reduced Motion: The Gentle Mode
The Story of the Dizzy Dragon
Once there was a dragon who got dizzy when things moved too fast. He asked the wizard to make a special spell: “When I’m watching, please make things gentle!”
The Problem:
<!-- This spins forever! Dizzy dragon! 😵 -->
<div class="animate-spin">
Loading...
</div>
The Solution:
<!-- Spins normally, BUT stops for dizzy dragon -->
<div class="animate-spin
motion-reduce:animate-none">
Loading...
</div>
Other Examples:
<!-- Gentle transitions -->
<button class="transition-all duration-300
motion-reduce:transition-none">
Click me
</button>
<!-- Safe animations -->
<div class="motion-safe:animate-bounce">
Only bounces if user is OK with motion!
</div>
Two helpers:
motion-reduce:→ Apply when user wants less motionmotion-safe:→ Apply only when user is OK with motion
👁️ Prefers Contrast: Making Things Pop!
The Story of the Eagle and the Mouse
The eagle has super sharp eyes. The mouse needs things bigger and bolder to see clearly. Tailwind lets you help both!
The Code:
<!-- Normal border, but BOLD for mouse friends -->
<div class="border border-gray-300
contrast-more:border-gray-900
contrast-more:border-2">
I adapt to your eyes!
</div>
Text Example:
<p class="text-gray-600
contrast-more:text-gray-900
contrast-more:font-bold">
Easier to read when you need it!
</p>
Two helpers:
contrast-more:→ Apply when user wants MORE contrastcontrast-less:→ Apply when user wants LESS contrast
📱 Orientation: Portrait vs Landscape
The Phone Flip Story
When you hold your phone up like a portrait painting = Portrait When you turn it sideways like a movie screen = Landscape
<!-- Show different layouts -->
<div class="portrait:flex-col
landscape:flex-row">
<div class="portrait:w-full
landscape:w-1/2">
I stack vertically in portrait!
</div>
<div class="portrait:w-full
landscape:w-1/2">
I sit beside my friend in landscape!
</div>
</div>
Real Example - A Photo Gallery:
<div class="grid
portrait:grid-cols-2
landscape:grid-cols-4">
<!-- Photos show 2 columns when vertical -->
<!-- Photos show 4 columns when horizontal -->
</div>
🖨️ Print Media: Paper-Friendly Styles
The Printer’s Secret
When someone clicks “Print”, your website transforms! Like a chameleon changing colors for paper.
Hide things that don’t make sense on paper:
<!-- Navigation disappears on paper -->
<nav class="print:hidden">
Home | About | Contact
</nav>
<!-- Video player hides too -->
<video class="print:hidden">
...
</video>
Make text better for paper:
<article class="text-gray-700
print:text-black">
<h1 class="text-blue-600
print:text-black
print:underline">
My Article Title
</h1>
</article>
Show things ONLY when printing:
<!-- Hidden on screen, visible on paper -->
<div class="hidden print:block">
📞 Contact: 555-1234
🌐 www.mysite.com
</div>
🗺️ The Complete Map
graph LR A["Media Queries"] --> B["Dark Mode"] A --> C["Accessibility"] A --> D["Device"] A --> E["Print"] B --> B1["class strategy"] B --> B2["media strategy"] B --> B3["color scheme"] C --> C1["motion-reduce"] C --> C2["motion-safe"] C --> C3["contrast-more"] C --> C4["contrast-less"] D --> D1["portrait"] D --> D2["landscape"] E --> E1["print:hidden"] E --> E2["print:block"]
🎯 Quick Reference Table
| What You Want | The Variant | Example |
|---|---|---|
| Dark mode colors | dark: |
dark:bg-black |
| Force dark scheme | scheme-dark |
On <html> |
| No animations | motion-reduce: |
motion-reduce:animate-none |
| Safe animations | motion-safe: |
motion-safe:animate-bounce |
| High contrast | contrast-more: |
contrast-more:border-2 |
| Phone vertical | portrait: |
portrait:flex-col |
| Phone sideways | landscape: |
landscape:flex-row |
| On paper only | print: |
print:hidden |
🌟 Putting It All Together
Here’s a super-smart component that adapts to EVERYTHING:
<div class="
bg-white dark:bg-gray-900
text-gray-800 dark:text-gray-100
contrast-more:border-2
contrast-more:border-black
transition-colors
motion-reduce:transition-none
portrait:p-4 landscape:p-8
print:bg-white print:text-black
">
I adapt to EVERYTHING! 🦎
</div>
🎉 You Did It!
Now you know how to make websites that:
- 🌙 Switch between light and dark
- 🐢 Are gentle for people who need it
- 👁️ Are bold for people who need it
- 📱 Adapt to how you hold your phone
- 🖨️ Look perfect on paper
Your website is now like a friendly chameleon, changing to make everyone comfortable!
💡 Remember
Media queries are like asking questions:
- “Is it dark outside?” →
dark:- “Do you get dizzy easily?” →
motion-reduce:- “Do you need things bolder?” →
contrast-more:- “Are you holding your phone sideways?” →
landscape:- “Are you printing me?” →
print:
Each question gets a different style answer! 🎭