Tailwind CSS
/Beginner
System Preference Strategy
Definition
Relying entirely on the browser and OS to determine the theme, providing a seamless experience with zero JavaScript required.
Explain Like I'm New
The lazy (and often best) way. You do absolutely nothing in JS. You just write `<div class="bg-white dark:bg-black">`. If the user's Mac is set to Dark Mode, the browser automatically tells the website, and Tailwind switches the colors instantly.
Real World Example
A simple landing page or portfolio site where you want to support dark mode, but don't want the technical overhead of building a toggle button and managing `localStorage`.
Common Use Cases
- •Static sites
- •Simple landing pages
- •Zero-JS apps
Interactive Example
Interview Questions
basic
- Do you need to write any JavaScript to make the System Preference Strategy work?
intermediate
- If a user is using the System strategy and wants your website to be Dark, but their Windows OS is set to Light, can they change your website?