Tailwind CSS
/Advanced
Class Strategy
Definition
Implementing dark mode manually by toggling a CSS class via JavaScript, allowing the user to override their OS preferences.
Explain Like I'm New
A user's iPhone is in Light Mode, but they are reading your blog at 2 AM and their eyes hurt. They click your 'Dark Mode' button. Your React state updates, slapping `<html class="dark">` onto the page. Suddenly, all `dark:bg-black` classes instantly activate, saving their eyes.
Real World Example
Creating a Theme Context in React that manages a `theme` state (`light` or `dark`), saves that preference to `localStorage`, and injects it into the DOM on page load.
Common Use Cases
- •Manual theme switchers
- •Persistent user preferences
Interactive Example
Loading...
Console output will appear here...
Interview Questions
basic
- In the class strategy, what exact class name must be present on a parent element to trigger dark mode?
intermediate
- Why do you need to save the user's theme choice to `localStorage`?