chore: update tailwind stuff on selfhost-desktop

packages/hoppscotch-selfhost-desktop/package.json

@@ -13,6 +13,9 @@
     "gql-codegen": "graphql-codegen --require dotenv/config --config gql-codegen.yml dotenv_config_path=\"../../.env\""
   },
   "dependencies": {
+    "@fontsource-variable/inter": "^5.0.5",
+    "@fontsource-variable/material-symbols-rounded": "^5.0.5",
+    "@fontsource-variable/roboto-mono": "^5.0.6",
     "@hoppscotch/common": "workspace:^",
     "@platform/auth": "^0.1.106",
     "@tauri-apps/api": "^1.3.0",
@@ -53,16 +56,19 @@
     "@vitejs/plugin-legacy": "^2.3.0",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vue/eslint-config-typescript": "^11.0.1",
+    "autoprefixer": "^10.4.14",
     "cross-env": "^7.0.3",
     "eslint": "^8.28.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-vue": "^9.5.1",
     "npm-run-all": "^4.1.5",
+    "postcss": "^8.4.23",
+    "tailwindcss": "^3.3.6",
     "typescript": "^4.9.5",
+    "unplugin-fonts": "^1.1.1",
     "unplugin-icons": "^0.14.9",
     "unplugin-vue-components": "^0.21.0",
     "vite": "^4.2.1",
-    "vite-plugin-fonts": "^0.6.0",
     "vite-plugin-html-config": "^1.0.10",
     "vite-plugin-inspect": "^0.7.4",
     "vite-plugin-pages": "^0.26.0",

packages/hoppscotch-selfhost-desktop/postcss.config.cjs

@@ -0,0 +1,8 @@
+const config = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+
+module.exports = config;

packages/hoppscotch-selfhost-desktop/tailwind.config.ts

@@ -0,0 +1,30 @@
+import { Config } from "tailwindcss"
+import preset from "@hoppscotch/ui/ui-preset"
+
+export default {
+  content: ["../hoppscotch-common/src/**/*.{vue,html}"],
+  presets: [preset],
+  theme: {
+    extend: {
+      inset: {
+        upperPrimaryStickyFold: "var(--upper-primary-sticky-fold)",
+        upperSecondaryStickyFold: "var(--upper-secondary-sticky-fold)",
+        upperTertiaryStickyFold: "var(--upper-tertiary-sticky-fold)",
+        upperFourthStickyFold: "var(--upper-fourth-sticky-fold)",
+        upperMobilePrimaryStickyFold: "var(--upper-mobile-primary-sticky-fold)",
+        upperMobileSecondaryStickyFold:
+          "var(--upper-mobile-secondary-sticky-fold)",
+        upperMobileStickyFold: "var(--upper-mobile-sticky-fold)",
+        upperMobileTertiaryStickyFold:
+          "var(--upper-mobile-tertiary-sticky-fold)",
+        lowerPrimaryStickyFold: "var(--lower-primary-sticky-fold)",
+        lowerSecondaryStickyFold: "var(--lower-secondary-sticky-fold)",
+        lowerTertiaryStickyFold: "var(--lower-tertiary-sticky-fold)",
+        lowerFourthStickyFold: "var(--lower-fourth-sticky-fold)",
+        sidebarPrimaryStickyFold: "var(--sidebar-primary-sticky-fold)",
+        sidebarSecondaryStickyFold: "var(--line-height-body)",
+        propertiesPrimaryStickyFold: "var(--properties-primary-sticky-fold)",
+      },
+    },
+  },
+} satisfies Config

packages/hoppscotch-selfhost-desktop/vite.config.ts

@@ -15,8 +15,8 @@ import Layouts from "vite-plugin-vue-layouts"
 import IconResolver from "unplugin-icons/resolver"
 import { FileSystemIconLoader } from "unplugin-icons/loaders"
 import * as path from "path"
-import { VitePluginFonts } from "vite-plugin-fonts"
 import legacy from "@vitejs/plugin-legacy"
+import Unfonts from "unplugin-fonts/vite"
 
 const ENV = loadEnv("development", path.resolve(__dirname, "../../"))
 
@@ -112,7 +112,6 @@ export default defineConfig({
       dts: "../hoppscotch-common/src/components.d.ts",
       dirs: [
         "../hoppscotch-common/src/components",
-        "../hoppscotch-ui/src/components",
       ],
       directoryAsNamespace: true,
       resolvers: [
@@ -184,12 +183,21 @@ export default defineConfig({
         ],
       },
     }),
-    VitePluginFonts({
-      google: {
+    Unfonts({
+      fontsource: {
         families: [
-          "Inter:wght@400;500;600;700;800",
-          "Roboto+Mono:wght@400;500",
-          "Material+Icons",
+          {
+            name: "Inter Variable",
+            variables: ["variable-full"],
+          },
+          {
+            name: "Material Symbols Rounded Variable",
+            variables: ["variable-full"],
+          },
+          {
+            name: "Roboto Mono Variable",
+            variables: ["variable-full"],
+          },
         ],
       },
     }),