解决 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']"] // 修改后
  //...
}

参考

• dark: not working in @apply (tailwind 2.0.1) · tailwindlabs/tailwindcss · Discussion #2917

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