RTLCSS And Element Plus With Vue Js Project

Question

As element plus doesn't support RTL I had to use other third party libraries like rtlcss plugin and actually this is solved the problem, but not in my application case where i use both rtl and ltr directions so the rtlcss plugin is always converts the styles into rtl regardless of the html dir value, any solution for this issue?

here's my vite.config.js file:

import { fileURLToPath, URL } from 'node:url';
import rtlcss from 'rtlcss';
import { defineConfig } from 'vite';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
import vue from '@vitejs/plugin-vue';
import tailwindcss from 'tailwindcss';


export default defineConfig({
  css: {
    postcss: {
      plugins: [
        rtlcss,
        tailwindcss,
      ],
    },
  },
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
});