From 38b5c61d51b0acdccd163e00f712c98b92ff53a6 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Tue, 10 Jun 2025 18:45:34 +0530
Subject: [PATCH] feat: make tailwind work

---
 .../src/vue-components/ChatwootMessageListWebComponent.vue    | 1 -
 .../src/vue-components/registerWebComponents.js               | 4 +---
 tailwind.config.js                                            | 2 ++
 vite.config.ts                                                | 2 +-
 4 files changed, 4 insertions(+), 5 deletions(-)

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)];
 }