diff --git a/app/javascript/react-components/src/vue-components/ChatwootMessageListWebComponent.vue b/app/javascript/react-components/src/vue-components/ChatwootMessageListWebComponent.vue
index 1d2d7c482..56d2ce6e6 100644
--- a/app/javascript/react-components/src/vue-components/ChatwootMessageListWebComponent.vue
+++ b/app/javascript/react-components/src/vue-components/ChatwootMessageListWebComponent.vue
@@ -7,7 +7,6 @@ import MessageList from '../../../ui/MessageList.vue';
 </template>
 
 <style>
-/* Import all necessary styles for the MessageList */
 @import '../../../dashboard/assets/scss/app.scss';
 @import 'vue-multiselect/dist/vue-multiselect.css';
 @import 'floating-vue/dist/style.css';
diff --git a/app/javascript/react-components/src/vue-components/registerWebComponents.js b/app/javascript/react-components/src/vue-components/registerWebComponents.js
index 7b5de49a6..8a8f0bb7a 100644
--- a/app/javascript/react-components/src/vue-components/registerWebComponents.js
+++ b/app/javascript/react-components/src/vue-components/registerWebComponents.js
@@ -1,6 +1,6 @@
 import { defineCustomElement } from 'vue';
-import tailwindStyles from '../../../dashboard/assets/scss/_woot.scss?inline';
 import ChatwootMessageListWebComponent from './ChatwootMessageListWebComponent.vue';
+import '../../../dashboard/assets/scss/app.scss';
 import en from '../../../dashboard/i18n/locale/en';
 import store from '../../../dashboard/store';
 import { createI18n, I18nInjectionKey } from 'vue-i18n';
@@ -28,8 +28,6 @@ const ceOptions = {
     app.use(i18n);
     app.provide(I18nInjectionKey, i18n);
   },
-  // Include tailwind styles in the shadow DOM of each custom element
-  styles: [tailwindStyles],
 };
 
 // Convert Vue components to Web Components
diff --git a/tailwind.config.js b/tailwind.config.js
index eb02a86ed..1ef58a98d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -34,6 +34,8 @@ const tailwindConfig = {
     './app/javascript/dashboard/helper/**/*.js',
     './app/javascript/dashboard/components-next/**/*.js',
     './app/javascript/dashboard/routes/dashboard/**/**/*.js',
+    './app/javascript/react-components/**/*.{js,jsx,vue}',
+    './app/javascript/dashboard/assets/scss/**/*.scss',
     './app/views/**/*.html.erb',
   ],
   theme: {
diff --git a/vite.config.ts b/vite.config.ts
index 21f290d38..295be817e 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -44,7 +44,7 @@ if (isLibraryMode) {
 } else if (uiMode) {
   plugins = [vue()];
 } else if (reactComponentMode) {
-  plugins = [vue(vueOptions), react()];
+  plugins = [vue({ ...vueOptions, customElement: true }), react()];
 } else if (isTestMode) {
   plugins = [vue(vueOptions)];
 }