Question

我正在尝试使用顺风来基于系统默认值启用暗模式。

为此，我正在使用插件：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>

该插件会检查我的黑暗模式，但文本不会变成黄色，而是保持黑色。

有人知道为什么它不起作用吗？

Answer 1

首先，现在 TailWINdCSS 通过在任何类之前添加 <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <link type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"> 前缀来支持暗模式 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'] } ... 元素时使用。你如何做到这一点取决于你。 prefers-dark.js 作为一个选项提供，它是一个简单的脚本，可以根据用户的系统主题启用暗模式。

因此，要通过插件启用暗模式，请使用：

<html>

将额外的 < 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

有了上述内容，主题将随着用户在系统设置中更改他/她的偏好而改变。

附言如果您想使用暗模式，请使用 TailWindCSS v2 中内置的一种。像这样启用它：

< 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>

< tailwind.config.js > module.exports = { darkMode: 'media', ... } 可以更改为 media。

<块引用>

媒体：现在只要在用户的操作系统上启用暗模式，dark:{class} 类将优先于无前缀的类。媒体策略在幕后使用了首选颜色方案媒体功能。

<块引用>

类：如果您想支持手动切换暗模式而不是依赖于操作系统偏好，请使用类策略而不是媒体策略。

希望这对你有帮助:)

Answer 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暗模式未启用

2 个答案: