如何在Tailwind CSS中添加深色、浅色之外的自定义主题（如阅读模式）

1. 配置Tailwind CSS自定义变体 #

首先需要在tailwind.config.js中注册reader变体，让Tailwind识别这个自定义模式前缀：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
  variants: {
    extend: {
      // 给textColor属性添加reader变体支持
      textColor: ['reader'],
      // 按需添加其他需要支持的样式属性，比如backgroundColor、borderColor等
      backgroundColor: ['reader'],
    },
  },
}

2. 实现阅读模式切换逻辑 #

通过JavaScript给根元素（html）添加/移除reader类来触发样式切换，搭配一个切换按钮即可：

<button id="reader-mode-toggle">切换阅读模式</button>

const toggleBtn = document.getElementById('reader-mode-toggle');
toggleBtn.addEventListener('click', () => {
  document.documentElement.classList.toggle('reader');
});

3. 使用reader模式样式 #

现在就可以像你提供的示例一样，给元素添加reader:前缀的类来定义阅读模式下的样式：

<div class="text-white dark:text-black reader:text-yellow-100">
  这是支持浅、深、阅读三种模式的文本内容
</div>

4. 全局阅读模式样式（可选） #

如果需要给整个页面设置阅读模式的全局样式（比如背景色），可以在全局CSS文件中添加：

.reader {
  background-color: #f8f5e6; /* 自定义阅读模式背景色 */
}

内容的提问来源于stack exchange，提问作者Revan99