有条件地导入tailwindcss中的css文件

Question

目前我正在导入一个静态css主题用于语法高亮显示，如:

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

因为我使用的是tailwindcss和nextjs，而不是静态导入，我想根据黑暗模式有条件地导入highlight.js css文件。

基本上我需要一个tailwindcss版本的以下代码:

if(darkmode)
import 'highlight.js/styles/github-dark.css'
else
import 'highlight.js/styles/github.css'

我尝试了下面的插件代码，没有效果

plugins: [
plugin(function ({  matchVariant, addBase }) {
matchVariant('dark', (v) => {
addBase(
[
`@import 'highlight.js/styles/github-dark.css';`
]);
})
}),
]

似乎我错过了一些基本的东西，因为我认为有条件地导入CSS文件将是tailwindcss中的一个选项?

Answer 1

我为自己找到了一个解决方法。通过生成基于highlight.js的样式，并与tailwindcss及其dark主题兼容。

在这里写博客https://octocat.dev/posts/conditionally-styling-code-sections