feat: make tailwind work

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';

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

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: {

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