Question

我正在尝试制作一个简单的暗模式按钮，点击它就会滑动。

出于某种原因，在使用 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>

当更改此 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'`}>

Answer 1

假设您已经相应地设置了 tailwind.config.js，要允许手动切换暗模式，您还需要为 dark 实用程序启用 translate-* 变体。

// 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 以获取示例。

TailwindCSS 动画不适用于深色变体

1 个答案: