Tailwind css 暗模式未启用
Posted
技术标签:
【中文标题】Tailwind css 暗模式未启用【英文标题】：Tailwind css dark mode does not enable 【发布时间】：2021-01-11 17:09:28 【问题描述】：我正在尝试使用 tailwind 根据系统默认启用暗模式。
为此，我使用插件：Tailwind dark mode。
我的顺风配置失败如下：
defaultTheme = require('tailwindcss/defaultTheme');
module.exports =
experimental:
darkModeVariant: true
,
purge: [],
theme:
extend:
fontFamily:
sans: ['Nunito', ...defaultTheme.fontFamily.sans],
,
screens:
'dark': 'raw': '(prefers-color-scheme: dark)',
// => @media (prefers-color-scheme: dark) ...
,
,
,
variants:
backgroundColor: ['dark', 'dark-hover', 'dark-group-hover', 'dark-even', 'dark-odd'],
borderColor: ['dark', 'dark-disabled', 'dark-focus', 'dark-focus-within'],
textColor: ['dark', 'dark-hover', 'dark-active', 'dark-placeholder'],
opacity: ['responsive', 'hover', 'focus', 'disabled']
,
plugins: [require('tailwindcss-dark-mode')()],
defaultTheme = require('tailwindcss/defaultTheme');
在我的 html 文件中，我添加了以下内容：
<span class="dark:text-yellow-400">
1
</span>
插件检查我的黑暗模式，但文本不会变黄而是保持黑色。
有谁知道为什么它不起作用？
【问题讨论】：
对于较新的版本，暗模式应该这样实现：module.exports = darkMode: true, … ,
【参考方案1】：
首先，现在 TailWIndCSS 支持暗模式 out-of-the-box，方法是在启用后的任何类之前添加 dark: 前缀。不确定它是否与问题有关，但认为您需要知道。
您正在使用的插件声明了以下用于启用暗模式的用途：
< tailwind.config.js >
...
plugins: [
require('tailwindcss-dark-mode')()
]
// To enable dark mode for all classes:
variants: ['dark', 'dark-hover', 'dark-group-hover', 'dark-even', 'dark-odd', ...]
// To enable dark mode for only single utility class:
variants:
backgroundColor: ['dark', 'dark-hover', 'dark-group-hover', 'dark-even', 'dark-odd']
...
它还指出
此插件生成的样式仅在选择器应用于
<html>元素时使用。你如何做到这一点取决于你。 prefers-dark.js 作为一个选项提供，它是一个简单的脚本，可以根据用户的系统主题启用暗模式。
因此，要通过插件启用暗模式，请使用：
< mypage.html >
...
<body class="mode-dark">
<div class="bg-white dark:bg-black">
<p class="text-black dark:text-white">
My eyes are grateful.
<a class="text-blue-300 hover:text-blue-400">
Learn more
</a>
</p>
</div>
...
</body>
将额外的mode-dark 类添加到包装元素（在本例中为body）。
通过插件根据用户偏好更改主题：
< mypage.html >
<head>
<script src="to/prefers-dark.js"></script>
</head>
...
<body class="mode-dark">
<div class="bg-white dark:bg-black">
<p class="text-black dark:text-white">
My eyes are grateful.
<a class="text-blue-300 hover:text-blue-400">
Learn more
</a>
</p>
</div>
...
</body>
使用上述内容，主题将随着用户在系统设置中更改他/她的偏好而改变。
附：如果您想使用暗模式，请使用 TailWindCSS v2 中的内置模式。像这样启用它：
< tailwind.config.js >
module.exports =
darkMode: 'media',
...
media可以改为class。
媒体：现在，只要在用户的操作系统上启用暗模式，暗：class 类将优先于无前缀的类。媒体策略在底层使用了 prefers-color-scheme 媒体功能。
类：如果您想支持手动切换暗模式而不是依赖操作系统首选项，请使用类策略而不是媒体策略。
希望这对你有帮助:)
【讨论】：
【参考方案2】：由于忘记更新tailwind.config.js，我遇到了这个问题：
我变了：
darkMode: false,
到
darkMode: 'class',
我在 Vue 中有一个简单的观察者，可以通过以下方式切换它：
document.querySelector('html').classList.add('dark')
document.querySelector('html').classList.remove('dark')
您可以在此处阅读更多内容： https://tailwindcss.com/docs/dark-mode
【讨论】：
以上是关于Tailwind css 暗模式未启用的主要内容，如果未能解决你的问题，请参考以下文章
启用暗模式时更改 iframe 源，禁用暗模式时将其更改回来
启用浏览器的强制暗标志时如何使 Google Docs 进入暗模式？