Vite support?

[msmosavar]

As vuejs 3 uses vite as default bundler, is there any way to use this package with it?

[lord007tn]

it doesn't matter which bundler you use
because this plugin is built on top of tailwind so you just need to configure your tailwind with Vite : link here
then install the plugin as a dev dependency and call it inside the tailwind.config.js in the plugins section

[msmosavar]

@lord007tn To reproduce the problem, i've just started a new project using vuejs 3 and added tailwindcss.
Everything works correctly and tailwind classes take effect.
Then i've installed tailwindcss-rtl using npm install tailwindcss-rtl --save-dev and there is my tailwind.config.js:

module.exports = {
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [import("tailwindcss-rtl")],
};

App.vue:

<template>
  <div class="flex justify-center items-center h-screen">
    <div class="w-1/2 bg-blue-500 p-10">
      <p class="text-2xl text-white ps-10 ms-10">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, vero.
        Voluptatum, non minus! Ea ullam accusamus nobis iste eos, voluptates
        fugiat soluta architecto. Deleniti unde, maiores vel possimus quos et.
      </p>
    </div>
  </div>
</template>

But as you can see in the image below, none of tailwindcss-rtl classes (e.g. ps-10, ms-10) are taking effect.
tailwindcss-rtl-vite.png

Also in devtools these classes are not shown:
devtools.png

[itsikhar]

@lord007tn Same issue as you describe in my project, any update ? found any solution ?

[crswll]

You need to use require not import like the sample code provided.

[itsikhar]

@crswll Thanks for your reply, already try it but Vite not support require thats why we try using import but tailwindcss.config.js not support Import.

[crswll]

I just set up a fresh project with it and it's working.

[itsikhar]

@crswll And dir="rtl" attribute added to body ?
all other rtl attribute added to html ?

[crswll]

The plugin wouldn't do that. You'd need to do that yourself.

[itsikhar]

Oh, ok I will try it and let you update.

[itsikhar]

@crswll Ok, my LTR/RTL variable did not update correctly, thanks for this tip :)