TailwindCSS为暗模式类抛出错误

57hvy0tb 于 2023-10-21 发布在其他

关注(0)|答案(3)|浏览(105)

我第一次在一个顺风css项目上工作，它给了我一个我无法理解的错误，我正在使用React：
Syntax error: Thedark:bg-gray-800class does not exist. Ifdark:bg-gray-800is a custom class, make sure it is defined within a@layerdirective. (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 ;
  }

css

来源：https://stackoverflow.com/questions/69638978/tailwindcss-throws-error-for-dark-mode-classes

3条答案

按热度按时间

gtlvzcf81#

要解决这种情况，只需删除您的层。
一旦你在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"

赞(0）回复(0）举报 2023-10-21

ipakzgxi2#

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

赞(0）回复(0）举报 2023-10-21

m1m5dgzv3#

我也有同样的错误。
border-gray-50，但是我把它写成了border-gray-50，发现了同样的错误。
检查单词拼写错误也会出现同样的错误。

赞(0）回复(0）举报 2023-10-21