Fix tailwind css setup (#768)

* Fix tailwind css setup

* Install as dev dep

* Uninstall primeui tailwind

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