Help me fix tailwind warning about the same CSS properties

Somebody know what is this error?

'translate-x-[20%]' applies the same CSS properties as 'translate-y-[20%]'.(cssConflict)
Switch.tsx(11, 43): translate-y-[20%]
.translate-x-\[20\%\] {
  --tw-translate-x: 20%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

'translate-x-[20%]' applies the same CSS properties as 'translate-y-[20%]'.(cssConflict)
Switch.tsx(11, 43): translate-y-[20%]
.translate-x-\[20\%\] {
  --tw-translate-x: 20%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

Switch.tsx

interface SwitchProps extends React.InputHTMLAttributes<HTMLInputElement> {
  isChecked: boolean
  onChange: () => void
}

export function Switch({ isChecked = false, onChange, ...props }: SwitchProps) {
  return (
    <label className="relative w-[36px] h-[20px] border-[3px] rounded-full cursor-pointer mx-2">
      <input className="hidden peer/input" type="checkbox" id="check" checked={isChecked} onChange={onChange} {...props} />
      <span className={`absolute rounded-full
      w-[10px] h-[10px] translate-x-[20%] translate-y-[20%] bg-secondary transition-all duration-500
      before:absolute before:content-['']
      peer-checked/input:translate-x-[180%]`} />
    </label>
  )
}

interface SwitchProps extends React.InputHTMLAttributes<HTMLInputElement> {
  isChecked: boolean
  onChange: () => void
}

export function Switch({ isChecked = false, onChange, ...props }: SwitchProps) {
  return (
    <label className="relative w-[36px] h-[20px] border-[3px] rounded-full cursor-pointer mx-2">
      <input className="hidden peer/input" type="checkbox" id="check" checked={isChecked} onChange={onChange} {...props} />
      <span className={`absolute rounded-full
      w-[10px] h-[10px] translate-x-[20%] translate-y-[20%] bg-secondary transition-all duration-500
      before:absolute before:content-['']
      peer-checked/input:translate-x-[180%]`} />
    </label>
  )
}

Here I apply translate-x-[20%] translate-y-[20%] and got the error I did it before and got no errors Any ideas how fix it? Try it out here - https://codesandbox.io/p/sandbox/dark-mode-w2s4gd

1 Reply

Nikita•10mo ago

Fixed in new tailwind IntelliSence update

Gaming

Programming

Help me fix tailwind warning about the same CSS properties