add transform support

[20lives]

add transform support

[20lives]

I understand the use case,
I will consider adding this.

[AnasSafi]

I solve this problem by this way from documentation :
To use a negative translate value, prefix the class name with a dash to convert it to a negative value.
So you can use class:
-translate-y-6 to translate from right to left
And:
translate-y-6 to translate from left to right

[20lives]

Hi,
I don't think this is actually how it should work.
https://tailwindcss.com/docs/translate

the translation parameter is the axis (Y or X) so there is no left/right or start/end.

[sbc640964]

Try to imagine this switch:

function Switcher(props)
{
    const {
        checked,
        enabledLabel,
        disabledLabel,
        label,
        onChange,
        errors,
        name,
        description
    } = props;

    return(
        <>
            {label &&
                <div className="font-medium text-gray-700 text-sm">
                    {label}
                </div>
            }
            <div className="mt-1 flex rounded-md">

                <div
                    className={`relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:shadow-outline ${checked ? 'bg-primary-600' : 'bg-gray-200'}`}
                    aria-checked="false"
                    role="checkbox"
                    tabIndex={0}
                    onClick={onChange}
                >
                    <div
                        className={`inline-block h-5 w-5 rounded-full bg-white shadow transform transition ease-in-out duration-200 ${checked ? '-translate-x-5' : '-translate-x-0'}`}
                        aria-hidden="true"
                    >
                    </div>
                </div>
                <div className="ms-3 text-sm text-gray-600">
                    {checked
                        ? <small>{enabledLabel}</small>
                        : <small>{disabledLabel}</small>
                    }
                </div>
            </div>
            {errors &&
                <Error errors={errors}/>
            }
            {description &&
                <Description>{description}</Description>
            }
        </>
    )
}

export default Switcher;

The position on the X axis (left or right) varies depending on the direction.

[sbc640964]

@20lives Thank you!

[samjohnduke]

I know this issue is a little old. But i ran into the same issue, but on further inspection there is a rtl: variant in tailwind (might be new?) so you can just do the opposite transform if you need to.