在Tailwind CSS中按暗黑模式条件导入Highlight.js CSS文件

为什么你的Tailwind插件方法无效 #

Tailwind的插件API用于生成CSS规则，而@import是CSS的静态导入语法，编译阶段就会被解析，无法通过Tailwind的dark变体实现运行时的条件加载。你写的代码只是无条件添加了github-dark.css的导入，完全没有关联暗黑模式的触发逻辑，所以达不到预期效果。

可行的解决方案 #

方案1：基于Next.js客户端组件动态加载（支持手动切换暗黑模式） #

如果你的项目用next-themes或类似库管理暗黑模式状态，可以在客户端组件中根据当前主题动态创建样式标签加载对应主题：

'use client';

import { useEffect } from 'react';
import { useTheme } from 'next-themes';

export default function HighlightThemeLoader() {
  const { resolvedTheme } = useTheme();

  useEffect(() => {
    // 清理已加载的主题样式
    const existingStyle = document.querySelector('link[data-highlight-theme]');
    if (existingStyle) existingStyle.remove();

    // 加载对应主题
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = resolvedTheme === 'dark' 
      ? 'highlight.js/styles/github-dark.css' 
      : 'highlight.js/styles/github.css';
    link.setAttribute('data-highlight-theme', '');
    document.head.appendChild(link);

    return () => link.remove();
  }, [resolvedTheme]);

  return null;
}

在根布局中引入这个组件即可。

方案2：基于CSS媒体查询（仅支持系统级暗黑模式） #

如果你的暗黑模式跟随系统设置（Tailwind默认的media策略），可以在全局CSS文件中通过媒体查询实现条件导入：

/* 全局CSS文件（比如globals.css） */
@import 'highlight.js/styles/github.css';

@media (prefers-color-scheme: dark) {
  @import 'highlight.js/styles/github-dark.css';
}

这种方式会同时加载两个主题CSS，系统暗黑模式激活时，github-dark.css的样式会覆盖github.css的对应规则。

方案3：嵌套样式包裹（支持类切换的暗黑模式） #

如果你的项目用Tailwind的class策略（通过给html标签添加dark类切换模式），可以将暗黑主题的样式嵌套在.dark选择器下：

1. 先在全局CSS中导入默认主题：

@import 'highlight.js/styles/github.css';

2. 将github-dark.css的内容复制到全局CSS中，并包裹在.dark选择器内：

.dark {
  .hljs {
    background: #0d1117;
    color: #c9d1d9;
    /* ...其他样式 */
  }
  /* ...剩余主题样式 */
}

这种方式需要手动处理主题文件，但能确保类切换时样式正确生效。

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