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
Nikita15mo ago
Fixed in new tailwind IntelliSence update
Want results from more Discord servers?
Add your server