如何在Tailwind CSS中配置多主题并适配next-themes

核心结论 #

原生Tailwind默认只支持dark:前缀，但通过自定义变体和主题选择器配置，完全可以实现pink:、blue:这类自定义主题前缀，结合next-themes的主题切换功能就能正常工作。

具体操作步骤 #

1. 配置Tailwind自定义变体 #

打开tailwind.config.js，通过addVariant方法给每个自定义主题添加对应变体，关联next-themes自动生成的data-theme属性（next-themes切换主题时会给html标签加上data-theme="xxx"属性）：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  darkMode: 'class', // 保持此配置，next-themes会自动处理类或data属性
  theme: {
    extend: {
      // 提前定义自定义主题的颜色变量，方便统一调用
      colors: {
        'pink-theme': '#ff6b9d',
        'blue-theme': '#4dabf7',
        'orange-theme': '#ff922b',
      },
    },
  },
  plugins: [
    ({ addVariant }) => {
      // 为每个自定义主题添加变体规则
      addVariant('pink', '[data-theme="pink"] &');
      addVariant('blue', '[data-theme="blue"] &');
      addVariant('orange', '[data-theme="orange"] &');
      addVariant('red', '[data-theme="red"] &');
      // 处理带连字符的主题名称
      addVariant('light-contrast', '[data-theme="light-contrast"] &');
      addVariant('dark-contrast', '[data-theme="dark-contrast"] &');
      addVariant('dark-dimmed', '[data-theme="dark-dimmed"] &');
    },
  ],
};

2. 使用自定义主题前缀 #

配置完成后，即可像使用dark:一样使用自定义主题前缀：

<p className="text-black dark:text-white pink:text-pink-theme blue:text-blue-theme orange:text-orange-theme">Color</p>

3. 确认next-themes配置 #

保证ThemeProvider的主题列表包含所有自定义主题：

import { ThemeProvider } from 'next-themes';

export default function App({ Component, pageProps }) {
  return (
    <ThemeProvider themes={['pink', 'red', 'blue', 'light', 'dark', 'light-contrast', 'dark-contrast', 'dark-dimmed']}>
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

4. 主题切换逻辑无需改动 #

你之前编写的主题切换代码可直接使用，无需修改：

import { useTheme } from 'next-themes';

export default function ThemeSelector() {
  const { theme, setTheme } = useTheme();

  return (
    <select
      value={theme}
      onChange={(e) => setTheme(e.target.value)}
      className="light-contrast:bg-orange-300"
    >
      <option value="system">System</option>
      <option value="dark">Dark</option>
      <option value="light">Light</option>
      <option value="light-contrast">light-contrast</option>
      <option value="dark-contrast">dark-contrast</option>
      <option value="dark-dimmed">dark-dimmed</option>
      <option value="pink">Pink</option>
      <option value="blue">Blue</option>
      <option value="orange">Orange</option>
    </select>
  );
}

原理说明 #

Tailwind的变体功能允许自定义样式的触发条件，我们通过addVariant将自定义主题前缀与data-theme属性绑定，当html标签的data-theme值匹配时，对应的前缀样式就会生效，和默认的dark:前缀逻辑完全一致。

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