TailwindCSS 为暗模式类抛出错误

Posted 2023-03-07

【中文标题】TailwindCSS 为暗模式类抛出错误

【英文标题】：TailwindCSS throws error for dark mode classes

【发布时间】：2021-12-06 20:39:56

【问题描述】：

我第一次在顺风 css 项目上工作，它给我带来了这个我无法理解的错误，我正在使用 React：

Syntax error: The `dark:bg-gray-800` class does not exist. If `dark:bg-gray-800` is a custom class, make sure it is defined within a `@layer` directive. (8:5)

index.css：

@import-normalize;
@tailwind base;
@tailwind components;


@layer components 
  .sidebar-icon 
    @apply relative flex items-center justify-center 
    h-12 w-12 mt-2 mb-2 mx-auto  
    bg-gray-400 hover:bg-green-600 dark:bg-gray-800 
    text-green-500 hover:text-white
    hover:rounded-xl rounded-3xl
    transition-all duration-300 ease-linear
    cursor-pointer shadow-lg ;
  

【参考方案1】：

要解决这种情况，只需删除您的图层即可。

将暗模式调用到tailwind.config.js 后，例如：

module.exports = 
  mode: 'jit',
  purge: [],
  darkMode: 'class',

您无需在 CSS 文件中重新定义图层组件。有关该问题的更多信息，请参阅此link

简而言之，您只需要像这样定义 CSS：

index.css:

.sidebar-icon 
@apply relative flex items-center justify-center 
   h-12 w-12 mt-2 mb-2 mx-auto  
   bg-gray-400 hover:bg-green-600 dark:bg-gray-800 
   text-green-500 hover:text-white
   hover:rounded-xl rounded-3xl
   transition-all duration-300 ease-linear
   cursor-pointer shadow-lg ;

我正在使用包版本：

"tailwindcss": "2.2.9"
"webpack": "5.52.0"

【讨论】：

@Lux Logica，我只是把文件名弄错了，但是暗模式的配置在tailwind.config.js中，配置的语法证实了这一点...... :)

【参考方案2】：

您发布的错误警告与 dark:-prefixed 类的使用有关——该类仅适用于“暗模式”。请注意，当前的 TailwindCSS 稳定版本 - v2.2.15 atm - 默认情况下带有“暗模式”类禁用。您必须在 tailwind.config.js 文件中明确启用它，如 explained in their docs。