dark class to enable dark styles for the entire page?In Tailwind's class-based dark mode, adding the dark class to the <html> element allows all child elements to respond to dark mode styles using the dark: prefix.
module.exports = {
darkMode: ???,
theme: {
extend: {},
},
plugins: [],
}Setting darkMode: "class" in the Tailwind config tells Tailwind to apply dark styles only when the dark class is present on an ancestor element.
<html class="dark">
<body>
<div class="bg-white dark:bg-gray-800 text-black dark:text-white p-4">
Hello, dark mode!
</div>
</body>
</html>
What background and text colors will the <div> have when the dark class is present on <html>?dark: prefix applies styles only when the dark class is present.When the dark class is on <html>, the dark:bg-gray-800 and dark:text-white styles override the default white background and black text, resulting in a dark background with white text.
Tailwind uses the selector .dark <selector> to apply dark mode styles only when an ancestor has the dark class.
Adding the dark class on <html> controls styles globally. Updating aria-pressed on the toggle button informs screen readers about the toggle state, improving accessibility.