i use nuxt 3.0.0 with tailwindcss ^3.2.4
i have element-plus also, now i want use postcss-rtl just for element-plus and no for tailwindd or any other css files.
help please.
nuxt.config.ts:
import { defineNuxtConfig } from 'nuxt/config'
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
postcss: {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
},
css: [
'~/assets/css/tailwind.scss',
'@/assets/css/fonts/font-awesome/fontawesome.css',
'@/assets/css/fonts/font-awesome/duotone.css'
],
plugins: [
'@/plugins/element-plus'
]
})
plugins/element-plus.js:
import ElementPlus from 'element-plus';
import fa from 'element-plus/dist/locale/fa.mjs';
import 'dayjs/locale/fa';
import 'element-plus/dist/index.css';
import '@/assets/css/element-plus.scss';
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(ElementPlus, {
locale: fa
})
});
element-plus.scss:
$colors: (
'primary': (
'base': #fe7aac,
)
);
@forward "element-plus/theme-chalk/src/common/var.scss" with (
// do not use same name, it will override.
$colors: $colors
);
@use "element-plus/theme-chalk/src/index.scss" as *;
i want to use rtl postcss just for element-plus