目前我导入一个静态的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?
1条答案
按热度按时间avkwfej41#
我为自己找到了一个解决办法。通过基于highlight.js生成样式,并与tailwindcss及其黑暗主题兼容。
在这里写https://octocat.dev/posts/conditionally-styling-code-sections