From a41de30dc576e95a0e17d514967e0ee7cf5b1505 Mon Sep 17 00:00:00 2001
From: Chenlei Hu <chenlei.hu@mail.utoronto.ca>
Date: Mon, 9 Sep 2024 16:56:32 +0900
Subject: [PATCH] Fix tailwind css setup (#768)

* Fix tailwind css setup

* Install as dev dep

* Uninstall primeui tailwind
---
 package-lock.json                                      | 9 ++-------
 src/assets/css/style.css                               | 7 +++++++
 src/components/dialog/content/SettingDialogContent.vue | 5 -----
 src/main.ts                                            | 5 ++++-
 tailwind.config.js                                     | 3 +++
 5 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 84735b448..4237f2ad9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,21 +1,16 @@
 {
   "name": "comfyui-frontend",
-  "version": "1.2.47",
+  "version": "1.2.48",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "comfyui-frontend",
-      "version": "1.2.47",
+      "version": "1.2.48",
       "dependencies": {
         "@atlaskit/pragmatic-drag-and-drop": "^1.2.1",
-<<<<<<< HEAD
         "@comfyorg/litegraph": "^0.7.65",
-        "@primevue/themes": "^4.0.0-rc.2",
-=======
-        "@comfyorg/litegraph": "^0.7.64",
         "@primevue/themes": "^4.0.5",
->>>>>>> e82b957 ([Chore] Update primevue)
         "@vitejs/plugin-vue": "^5.0.5",
         "@vueuse/core": "^11.0.0",
         "axios": "^1.7.4",
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 3620ad20f..1539265a8 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -1,3 +1,10 @@
+@layer primevue, tailwind-utilities;
+
+@layer tailwind-utilities {
+  @tailwind components;
+  @tailwind utilities;
+}
+
 :root {
   --fg-color: #000;
   --bg-color: #fff;
diff --git a/src/components/dialog/content/SettingDialogContent.vue b/src/components/dialog/content/SettingDialogContent.vue
index 9b136096a..e20f71bbc 100644
--- a/src/components/dialog/content/SettingDialogContent.vue
+++ b/src/components/dialog/content/SettingDialogContent.vue
@@ -144,11 +144,6 @@ const tabValue = computed(() =>
 </script>
 
 <style>
-/* Remove after we have tailwind setup */
-.border-none {
-  border: none !important;
-}
-
 .settings-tab-panels {
   padding-top: 0px !important;
 }
diff --git a/src/main.ts b/src/main.ts
index e4e66444e..36567ed92 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -26,7 +26,10 @@ app
       preset: ComfyUIPreset,
       options: {
         prefix: 'p',
-        cssLayer: false,
+        cssLayer: {
+          name: 'primevue',
+          order: 'primevue, tailwind-utilities'
+        },
         // This is a workaround for the issue with the dark mode selector
         // https://github.com/primefaces/primevue/issues/5515
         darkModeSelector: '.dark-theme, :root:has(.dark-theme)'
diff --git a/tailwind.config.js b/tailwind.config.js
index 2c057d78c..956bbf460 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,6 +1,9 @@
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+  corePlugins: {
+    preflight: false // This disables Tailwind's base styles
+  },
   theme: {
     extend: {}
   },