How to use postcss RTL in nuxt 3 except of tailwindcss

537 views Asked by At

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

0

There are 0 answers