กลยุทธ์โหมดมืด
เปรียบเทียบกลยุทธ์ตามสื่อ (prefers-color-scheme) กับกลยุทธ์ตามคลาส (สลับคลาส dark บน html) และเรียนรู้ว่าแต่ละแบบเหมาะใช้เมื่อใด
กลยุทธ์โหมดมืด เป็นบทเรียน Tailwind CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Tailwind CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Tailwind CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ
Why Dark Mode Matters
Dark mode has become a first-class feature expectation in modern web apps. Users prefer it for reducing eye strain in low-light environments, and it can extend battery life on OLED screens. Tailwind CSS makes implementing dark mode straightforward with a built-in dark variant. Before writing a single class, you need to choose between two strategies: the media strategy and the class strategy.
The Media Strategy Explained
The media strategy relies on the browser's prefers-color-scheme CSS media query. When the user sets their operating system to dark mode, Tailwind automatically activates all dark: prefixed utilities. This requires zero JavaScript — the browser handles everything. It is the simplest approach but offers no user toggle within your app itself.
/* Tailwind uses this media query under the hood */
@media (prefers-color-scheme: dark) {
/* dark: utilities are applied here */
}Enabling Media Strategy in Config
In Tailwind v3, the media strategy is not the default. You must explicitly configure it in tailwind.config.js by setting darkMode to 'media'. Once enabled, every utility prefixed with dark: will activate automatically when the OS reports dark mode preference. This is ideal for simple sites that do not need a manual toggle.
// tailwind.config.js
module.exports = {
darkMode: 'media',
content: ['./src/**/*.{html,js}'],
theme: {
extend: {},
},
plugins: [],
};The Class Strategy Explained
The class strategy gives you programmatic control over dark mode. Instead of relying on the OS preference, Tailwind activates dark styles whenever a dark class is present on a parent element — usually the <html> tag. This lets users toggle dark mode manually inside your app, regardless of their system setting. Most modern apps prefer this strategy.
<!-- Light mode: no dark class -->
<html>
<body class="bg-white text-gray-900">...</body>
</html>
<!-- Dark mode: dark class applied -->
<html class="dark">
<body class="bg-white dark:bg-gray-900 dark:text-white">...</body>
</html>Enabling Class Strategy in Config
Set darkMode to 'class' in your config file to enable the class strategy. Tailwind v3 uses 'class' as a common default for apps that need user-controlled theming. With this setting active, dark: variants only apply when the ancestor element carries the dark class — giving you full control over when dark styles activate.
// tailwind.config.js
module.exports = {
darkMode: 'class',
content: ['./src/**/*.{html,js}'],
theme: {
extend: {},
},
plugins: [],
};Media vs Class: Key Differences
Choosing between the two strategies depends on your use case. The media strategy is automatic and requires no JavaScript — perfect for static sites and documentation. The class strategy requires JavaScript to toggle the class but allows user preference within the app that can override the OS setting. It also enables you to persist the preference in localStorage.
media— OS-driven, zero JSclass— app-driven, JS toggle required
Selector Strategy in Tailwind v3.3+
Tailwind v3.3 introduced a third option: selector strategy, where you pass a custom CSS selector string instead of 'class'. This is useful when your dark mode is driven by a data-theme attribute or a specific wrapper class other than dark. For example, setting darkMode: ['class', '[data-theme="dark"]'] activates dark utilities when that attribute is present on any ancestor.
// tailwind.config.js (v3.3+)
module.exports = {
darkMode: ['class', '[data-theme="dark"]'],
// ...
};Writing Dark Variant Classes
Once a dark mode strategy is configured, applying dark styles is just a matter of prefixing any utility with dark:. You can apply dark: to colors, backgrounds, borders, shadows, and even hover states. Tailwind will generate the correct CSS selectors or media queries automatically. Always define both light and dark versions side-by-side on the same element.
<div class="bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-100 p-6 rounded-lg shadow dark:shadow-gray-700">
<h2 class="text-xl font-bold">Card Title</h2>
<p class="text-gray-600 dark:text-gray-300 mt-2">Card content here.</p>
</div>Dark Mode Scoping
With the class strategy, the dark class can be placed on any ancestor element, not just <html>. This allows partial dark mode — you can make a single section of your page dark while leaving the rest light. This is useful for themed panels, sidebars, or preview components that need a different visual treatment than the main page.
<div class="bg-gray-100 p-8">
<p>This section is always light.</p>
<div class="dark bg-gray-900 text-white p-4 mt-4 rounded">
<p>This inner section is always dark.</p>
</div>
</div>Combining Dark with Other Variants
Tailwind's variant system is composable. You can stack dark: with other variants like hover:, focus:, and responsive breakpoints. The order of prefixes matters: write responsive prefixes first, then state variants, then dark — for example md:hover:dark:bg-gray-700. This makes it possible to build highly specific, context-aware styles without any custom CSS.
<button class="
bg-blue-600 text-white
hover:bg-blue-700
dark:bg-blue-500
dark:hover:bg-blue-400
focus:ring-2 focus:ring-blue-300
dark:focus:ring-blue-700
px-4 py-2 rounded
">
Click Me
</button>When to Use Each Strategy
Use the media strategy when your audience is technical (developer tools, docs sites) and automatically respecting OS preference is enough. Use the class strategy when building consumer apps where users expect an in-app toggle. Use the selector strategy when your theming system uses a design-token-driven data-theme attribute or you are integrating with an existing theming library that manages its own class names.
Quick Check
Test your understanding of Tailwind CSS dark mode strategies from this lesson.
Lesson Recap
In this lesson you learned: the media strategy uses the OS prefers-color-scheme preference automatically, the class strategy requires a dark class on an ancestor element and enables JavaScript toggling, and the selector strategy allows custom attribute-based dark mode triggers. Next up we explore how to apply the dark: variant across colors, backgrounds, and components.
เรียนรู้ HTML ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 30
- บทเรียน
- 120
คำถามที่พบบ่อย
บทเรียน “กลยุทธ์โหมดมืด” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “กลยุทธ์โหมดมืด” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Tailwind CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Tailwind CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “กลยุทธ์โหมดมืด”
เปรียบเทียบกลยุทธ์ตามสื่อ (prefers-color-scheme) กับกลยุทธ์ตามคลาส (สลับคลาส dark บน html) และเรียนรู้ว่าแต่ละแบบเหมาะใช้เมื่อใด คุณปฏิบัติ Tailwind CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Tailwind CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Tailwind CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “กลยุทธ์โหมดมืด” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Tailwind CSS Academy นี้ได้ไหม
ได้ บทเรียน Tailwind CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ