use tailwindcss-rtl package

src/App.vue

@@ -2,6 +2,8 @@
   <div
     id="app"
     class="h-screen flex flex-col font-sans overflow-hidden antialiased"
+    :dir="direction"
+    :language="language"
   >
     <WindowsTitleBar
       v-if="platform === 'Windows'"
@@ -37,6 +39,7 @@
 
 <script>
 import { ConfigKeys } from 'fyo/core/types';
+import { RTL_LAGNUAGES } from 'fyo/utils/consts';
 import { ModelNameEnum } from 'models/types';
 import { computed } from 'vue';
 import WindowsTitleBar from './components/WindowsTitleBar.vue';
@@ -66,6 +69,8 @@ export default {
       companyName: '',
       searcher: null,
       shortcuts: null,
+      direction: 'ltr',
+      language: '',
     };
   },
   provide() {
@@ -82,6 +87,8 @@ export default {
     WindowsTitleBar,
   },
   async mounted() {
+    this.language = fyo.config.get("language");
+    this.direction = RTL_LAGNUAGES.includes(this.language) ? 'rtl' : 'ltr';
     this.shortcuts = new Shortcuts(this.keys);
     const lastSelectedFilePath = fyo.config.get(
       ConfigKeys.LastSelectedFilePath,

tailwind.config.js

@@ -178,7 +178,7 @@ module.exports = {
     backgroundColor: ['responsive', 'first', 'hover', 'focus', 'focus-within'],
     display: ['group-hover'],
   },
-  plugins: [],
+  plugins: [require('tailwindcss-rtl')],
 };
 
 /*