TailwindCSS 动画不适用于深色变体答案

【问题标题】：TailwindCSS animation not working with dark variantTailwindCSS 动画不适用于深色变体
【发布时间】：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'`}>

【问题讨论】：

标签： reactjs tailwind-css

【解决方案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']。有没有办法在所有变体上启用黑暗？