如何在Nuxt 3中仅为Element-Plus配置PostCSS-RTL（排除TailwindCSS）

步骤1：安装postcss-rtl依赖 #

先安装所需的PostCSS插件：

npm install postcss-rtl --save-dev

步骤2：修改Nuxt配置，针对Element样式单独配置PostCSS #

在nuxt.config.ts中扩展Webpack配置，只对Element-Plus相关的样式文件启用postcss-rtl，不影响TailwindCSS和其他样式：

import { defineNuxtConfig } from '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'
    ],

    hooks: {
        'webpack:config'(configs) {
            configs.forEach(config => {
                const rules = config.module?.rules || [];
                rules.forEach(rule => {
                    // 定位处理CSS/SCSS的规则
                    if (rule.test && (rule.test.test('.css') || rule.test.test('.scss'))) {
                        if (!rule.oneOf) rule.oneOf = [];
                        // 添加单独规则分支，仅处理Element-Plus相关样式
                        rule.oneOf.unshift({
                            test: /(element-plus\/theme-chalk|assets\/css\/element-plus\.scss)/,
                            use: (rule.use || []).map(use => {
                                if (use.loader === 'postcss-loader') {
                                    // 给该分支的postcss-loader追加postcss-rtl插件
                                    return {
                                        ...use,
                                        options: {
                                            postcssOptions: {
                                                plugins: [
                                                    ...(use.options?.postcssOptions?.plugins || []),
                                                    require('postcss-rtl')()
                                                ]
                                            }
                                        }
                                    };
                                }
                                return use;
                            })
                        });
                    }
                });
            });
        }
    }
})

步骤3：保持Element-Plus插件配置不变 #

你的plugins/element-plus.js无需修改，正常引入Element的样式文件即可，Webpack会自动对这些文件应用postcss-rtl处理：

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组件的样式（比如按钮内边距、表单对齐方向）是否已转为RTL布局，同时TailwindCSS的类（如ml-4）依然保持LTR行为，不会被自动转换。

内容的提问来源于stack exchange，提问作者Amir Hosein Sharaifi