TailwindCSS 在黑暗模式下抛出错误类

Question

我第一次在顺风 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 ;
  }

Answer 1

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

Answer 2

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

将深色模式调入 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"

TailwindCSS 在黑暗模式下抛出错误类

TailwindCSS throws error for dark mode classes

css

frontend

tailwind-css

TailwindCSS 在黑暗模式下抛出错误 类

TailwindCSS throws error for dark mode classes

css

frontend

tailwind-css

TailwindCSS 在黑暗模式下抛出错误类