主页关于链接归档灯泡

解决 Tailwind CSS + CSS modules 中 @apply dark: 不起作用的问题

代码

草,好长的标题。


前言

给博客添加一个背景图片玩玩。
加上去了,发现原来的 toc 栏有点怪,不如加个模糊滤镜和透明背景色美化一下,然后就遇到了问题。

现象

个人是在 typo.module.css 中使用了 @apply

.typo nav>ol{
  @apply backdrop-blur bg-white/60 dark:bg-[#121212]/60;
}

生成之后,漏了一个 dark: 没有生成。

猜测是和 Tailwind CSS 的 darkMode 的 class 机制有关。

解决

修改 tailwind.config.js

module.exports = {
  //...
  //darkMode: 'class' //修改前
  darkMode: ['class', "[class~='dark']"] // 修改后
  //...
}

参考

我的博客即将同步至腾讯云开发者社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=1u3nukmc2httw

the end.