diff --git a/src/theme/input.ts b/src/theme/input.ts
index 9e50426c1..3afa3071d 100644
--- a/src/theme/input.ts
+++ b/src/theme/input.ts
@@ -17,40 +17,40 @@ export default (options: Required<ModuleOptions>) => ({
     size: {
       xs: {
         base: 'px-2 py-1 text-xs gap-1',
-        leading: 'pl-2',
-        trailing: 'pr-2',
+        leading: '!ps-2',
+        trailing: '!pe-2',
         leadingIcon: 'size-4',
         leadingAvatarSize: '3xs',
         trailingIcon: 'size-4'
       },
       sm: {
         base: 'px-2.5 py-1.5 text-xs gap-1.5',
-        leading: 'pl-2.5',
-        trailing: 'pr-2.5',
+        leading: '!ps-2.5',
+        trailing: '!pe-2.5',
         leadingIcon: 'size-4',
         leadingAvatarSize: '3xs',
         trailingIcon: 'size-4'
       },
       md: {
         base: 'px-2.5 py-1.5 text-sm gap-1.5',
-        leading: 'pl-2.5',
-        trailing: 'pr-2.5',
+        leading: '!ps-2.5',
+        trailing: '!pe-2.5',
         leadingIcon: 'size-5',
         leadingAvatarSize: '2xs',
         trailingIcon: 'size-5'
       },
       lg: {
         base: 'px-3 py-2 text-sm gap-2',
-        leading: 'pl-3',
-        trailing: 'pr-3',
+        leading: '!ps-3',
+        trailing: '!pe-3',
         leadingIcon: 'size-5',
         leadingAvatarSize: '2xs',
         trailingIcon: 'size-5'
       },
       xl: {
         base: 'px-3 py-2 text-base gap-2',
-        leading: 'pl-3',
-        trailing: 'pr-3',
+        leading: '!ps-3',
+        trailing: '!pe-3',
         leadingIcon: 'size-6',
         leadingAvatarSize: 'xs',
         trailingIcon: 'size-6'
@@ -80,7 +80,7 @@ export default (options: Required<ModuleOptions>) => ({
       true: ''
     },
     type: {
-      file: 'file:mr-1.5 file:font-medium file:text-[var(--ui-text-muted)] file:outline-none'
+      file: 'file:me-1.5 file:font-medium file:text-[var(--ui-text-muted)] file:outline-none'
     }
   },
   compoundVariants: [...(options.theme.colors || []).map((color: string) => ({
@@ -102,43 +102,43 @@ export default (options: Required<ModuleOptions>) => ({
   }, {
     leading: true,
     size: 'xs',
-    class: 'pl-7'
+    class: '!ps-7'
   }, {
     leading: true,
     size: 'sm',
-    class: 'pl-8'
+    class: '!ps-8'
   }, {
     leading: true,
     size: 'md',
-    class: 'pl-9'
+    class: '!ps-9'
   }, {
     leading: true,
     size: 'lg',
-    class: 'pl-10'
+    class: '!ps-10'
   }, {
     leading: true,
     size: 'xl',
-    class: 'pl-11'
+    class: '!ps-11'
   }, {
     trailing: true,
     size: 'xs',
-    class: 'pr-7'
+    class: '!pe-7'
   }, {
     trailing: true,
     size: 'sm',
-    class: 'pr-8'
+    class: '!pe-8'
   }, {
     trailing: true,
     size: 'md',
-    class: 'pr-9'
+    class: '!pe-9'
   }, {
     trailing: true,
     size: 'lg',
-    class: 'pr-10'
+    class: '!pe-10'
   }, {
     trailing: true,
     size: 'xl',
-    class: 'pr-11'
+    class: '!pe-11'
   }, {
     loading: true,
     leading: true,
diff --git a/src/theme/switch.ts b/src/theme/switch.ts
index 5bf7e4fcb..cc40c98e8 100644
--- a/src/theme/switch.ts
+++ b/src/theme/switch.ts
@@ -5,7 +5,7 @@ export default (options: Required<ModuleOptions>) => ({
     root: 'relative flex items-start',
     base: ['inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--ui-bg)] data-[state=unchecked]:bg-[var(--ui-bg-accented)]', options.theme.transitions && 'transition-colors duration-200'],
     container: 'flex items-center',
-    thumb: 'group pointer-events-none block rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center',
+    thumb: 'group pointer-events-none block rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center',
     icon: ['absolute shrink-0 group-data-[state=unchecked]:text-[var(--ui-text-dimmed)] opacity-0 size-10/12', options.theme.transitions && 'transition-[color,opacity] duration-200'],
     wrapper: 'ms-2',
     label: 'block font-medium text-[var(--ui-text)]',
@@ -26,31 +26,31 @@ export default (options: Required<ModuleOptions>) => ({
       xs: {
         base: 'w-7',
         container: 'h-4',
-        thumb: 'size-3 data-[state=checked]:translate-x-3',
+        thumb: 'size-3 data-[state=checked]:translate-x-3 data-[state=checked]:rtl:-translate-x-3',
         wrapper: 'text-xs'
       },
       sm: {
         base: 'w-8',
         container: 'h-4',
-        thumb: 'size-3.5 data-[state=checked]:translate-x-3.5',
+        thumb: 'size-3.5 data-[state=checked]:translate-x-3.5 data-[state=checked]:rtl:-translate-x-3.5',
         wrapper: 'text-xs'
       },
       md: {
         base: 'w-9',
         container: 'h-5',
-        thumb: 'size-4 data-[state=checked]:translate-x-4',
+        thumb: 'size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4',
         wrapper: 'text-sm'
       },
       lg: {
         base: 'w-10',
         container: 'h-5',
-        thumb: 'size-4.5 data-[state=checked]:translate-x-4.5',
+        thumb: 'size-4.5 data-[state=checked]:translate-x-4.5 data-[state=checked]:rtl:-translate-x-4.5',
         wrapper: 'text-sm'
       },
       xl: {
         base: 'w-11',
         container: 'h-6',
-        thumb: 'size-5 data-[state=checked]:translate-x-5',
+        thumb: 'size-5 data-[state=checked]:translate-x-5 data-[state=checked]:rtl:-translate-x-5',
         wrapper: 'text-base'
       }
     },