如何在浏览器上强制使用TailwindCSS的暗模式？
我有一个网站，它使用TailwindCSS为暗/轻UI提供了适当的实现。
我想知道是否有一种方式，迫使网站加载在黑暗模式，直到用户具体切换到轻模式点击按钮。
为什么？因为我更喜欢这个网站在黑暗模式下的外观，但是由于轻/暗主题的正确实现，我宁愿保持它，并强迫它加载在黑暗模式下，尽管用户的浏览器设置。
回答 2
Stack Overflow用户
发布于 2022-06-21 09:31:00
尝试以下几点
在tailwind.config.css中，将darkMode设置为class
module.exports = {
darkMode: 'class',
// ...
}当您需要darkMode时，只需将ClassName of dark添加到html标记中即可
<html className="dark">
<body>
<!-- Will be black -->
<div className="bg-white dark:bg-black">
<!-- ... -->
</div>
</body>
</html>当您需要light时，只需移除ClassName of dark中的html标记
希望能帮上忙！
Stack Overflow用户
发布于 2022-11-09 05:23:28
我尝试了将darkMode设置为tailwind.config.js文件中的class的方法，就像在另一个答案中所建议的那样，但是尽管采取了所有步骤，但这对我来说并不管用。
在我的例子中，我需要在我的应用程序中强制黑暗模式，只需调整我的main.css中的媒体查询(AKA、globals.css或其他您称之为AKA的东西)。
/* main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
/* All your tailwind definitions with @apply rules are here */
/* If the user prefers dark mode,
we of course apply color-scheme: dark, as usual */
@media (prefers-color-scheme: dark) {
html {
color-scheme: dark;
}
}
/* If the user prefers light mode,
we still enforce color-scheme: dark, despite the user preference */
@media (prefers-color-scheme: light) {
html {
color-scheme: dark;
}
}就这样。我不需要在我的tailwind.config.js或其他任何地方乱搞。
https://stackoverflow.com/questions/72649576
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号