Fix tailwind css setup (#768)

* Fix tailwind css setup

* Install as dev dep

* Uninstall primeui tailwind

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",

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;

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

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

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