TailwindCSS 动画不适用于深色变体
Posted
技术标签:
【中文标题】TailwindCSS 动画不适用于深色变体【英文标题】：TailwindCSS animation not working with dark variant 【发布时间】：2021-06-01 22:07:40 【问题描述】：我正在尝试制作一个简单的暗模式按钮，点击它会滑动。
由于某种原因，当使用 dark: 选项时它不起作用，但在我的类名中使用条件时却是。
有没有办法让它与dark: 一起工作，而无需在我的类中使用条件？
这是工作代码：
<button aria-hidden="true" className="relative focus:outline-none" onClick=() => dispatch(ChangeTheme(!isDark)) >
<div className=`w-12 h-6 transition rounded-full outline-none blackThemeColor bg-primary-100 dark:bg-white`></div>
className=`absolute top-0 left-0 inline-flex items-center justify-center w-6 h-6 transition-all duration-150 transform scale-110 rounded-full shadow-sm $!isDark ? 'translate-x-6 text-primary-100 blackThemeColor text-white' : 'translate-x-0 -translate-y-px bg-white text-primary-dark'`
!isDark ?
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor">
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/></svg>
:
<svg
className="dark:w-4 h-4"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor">
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/></svg>
</div>
</button>
当 chaging 这个 div 时，它不再起作用了：
<div className=`absolute top-0 left-0 inline-flex items-center justify-center w-6 h-6 transition-all duration-150 transform scale-110 rounded-full shadow-sm translate-x-6 text-primary-100 blackThemeColor text-white dark:translate-x-0 dark:-translate-y-px dark:bg-white dark:text-primary-dark'`>
【问题讨论】：
【参考方案1】：假设您已经相应地设置了tailwind.config.js，要允许手动切换暗模式，您还需要为translate-* 实用程序启用dark 变体。
// tailwind.config.js
module.exports =
darkMode: 'class',
// ...
variants:
extend:
// ...
translate: ['dark'],
dark: 前缀需要单独应用于所有目标类。
<div className=`absolute top-0 left-0 inline-flex items-center justify-center
w-6 h-6 transition-all duration-150 transform scale-110 rounded-full
shadow-sm translate-x-6 text-primary-100 blackThemeColor text-white
dark:translate-x-0 dark:-translate-y-px dark:bg-white dark:text-primary-dark`>
请注意，dark 类需要应用于<html> 标记，dark: 前缀才能工作。如何设置取决于您，但您可以查看 dark mode official documentation 以获取示例。
【讨论】：
你好，我也试过了，但是好像还是不行 当您切换深色主题时，dark 类是否应用于<html> 标签？这是dark: 前缀工作所必需的，请阅读文档：tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually。
是的，我在页面上确实有其他使用黑暗的东西：而且这些东西完美地工作。即使使用深色模式滑块，颜色也会像预期的那样变化，但动画似乎不起作用
对，这意味着您需要为translate 实用程序启用dark 变体。我会更新我的答案。
谢谢，确实是缺少的翻译：['dark']。有没有办法在所有变体上启用黑暗？以上是关于TailwindCSS 动画不适用于深色变体的主要内容，如果未能解决你的问题，请参考以下文章