如何使用自定义类与顺风CSS黑暗模式

Question

.zz3d {
background-color: #ffffff;
opacity: 0.8;
background: linear-gradient(135deg, #4acab355 25%, transparent 25%) -12px 0/
24px 24px,
linear-gradient(225deg, #4acab3 25%, transparent 25%) -12px 0/ 24px 24px,
linear-gradient(315deg, #4acab355 25%, transparent 25%) 0px 0/ 24px 24px,
linear-gradient(45deg, #4acab3 25%, #ffffff 25%) 0px 0/ 24px 24px;
}

<div className="dark:zz3d w-screen gap-8 h-screen bg-white flex flex-col justify-center items-center">

为什么这个代码不工作，我如何修复它?

我希望在使用黑暗模式时将背景从白色切换到我的自定义背景。

Answer 1

如果将类包含在顺风utilities层中，则应该能够为类使用dark:修饰符。

例如:

@tailwind base;
@tailwind components;
@tailwind utilities;
@layer utilities {
.zz3d {
background-color: #ffffff;
opacity: 0.8;
background: linear-gradient(135deg, #4acab355 25%, transparent 25%) -12px 0/
24px 24px,
linear-gradient(225deg, #4acab3 25%, transparent 25%) -12px 0/ 24px 24px,
linear-gradient(315deg, #4acab355 25%, transparent 25%) 0px 0/ 24px 24px,
linear-gradient(45deg, #4acab3 25%, #ffffff 25%) 0px 0/ 24px 24px;
}
}

见:https://tailwindcss.com/docs/adding-custom-styles using-modifiers-with-custom-css