feat: replacing windicss by tailwindcss in hoppscotch-ui (#3076)

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>
Co-authored-by: Joel Jacob Stephen <70131076+JoelJacobStephen@users.noreply.github.com>
Co-authored-by: nivedin <nivedinp@gmail.com>

packages/hoppscotch-selfhost-web/package.json

@@ -40,6 +40,8 @@
     "workbox-window": "^7.0.0"
   },
   "devDependencies": {
+    "@hoppscotch/ui": "workspace:^",
+    "autoprefixer": "^10.4.14",
     "@graphql-codegen/add": "^5.0.0",
     "@graphql-codegen/cli": "^5.0.0",
     "@graphql-codegen/typed-document-node": "^5.0.1",
@@ -60,6 +62,9 @@
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-vue": "^9.17.0",
     "npm-run-all": "^4.1.5",
+    "postcss": "^8.4.23",
+    "prettier-plugin-tailwindcss": "^0.5.6",
+    "tailwindcss": "^3.3.2",
     "typescript": "^5.1.6",
     "unplugin-fonts": "^1.0.3",
     "unplugin-icons": "^0.16.5",
@@ -73,9 +78,7 @@
     "vite-plugin-pwa": "^0.16.4",
     "vite-plugin-static-copy": "^0.17.0",
     "vite-plugin-vue-layouts": "^0.8.0",
-    "vite-plugin-windicss": "^1.9.1",
     "vitest": "^0.34.2",
-    "vue-tsc": "^1.8.8",
-    "windicss": "^3.5.6"
+    "vue-tsc": "^1.8.8"
   }
 }

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

@@ -0,0 +1,7 @@
+const postcssConfig = require("@hoppscotch/ui/postcss.config")
+
+const config = {
+  ...postcssConfig,
+}
+
+module.exports = config

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

@@ -0,0 +1,10 @@
+import { Config } from "tailwindcss"
+import preset from "@hoppscotch/ui/ui-preset"
+
+export default {
+  content: [
+    "../hoppscotch-common/src/**/*.{vue,html}",
+    "../hoppscotch-ui/src/**/*.{vue,html}",
+  ],
+  presets: [preset],
+} satisfies Config

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

@@ -8,7 +8,6 @@ import VueI18n from "@intlify/vite-plugin-vue-i18n"
 import Components from "unplugin-vue-components/vite"
 import Icons from "unplugin-icons/vite"
 import Inspect from "vite-plugin-inspect"
-import WindiCSS from "vite-plugin-windicss"
 import { VitePWA } from "vite-plugin-pwa"
 import Pages from "vite-plugin-pages"
 import Layouts from "vite-plugin-vue-layouts"
@@ -45,6 +44,14 @@ export default defineConfig({
   },
   resolve: {
     alias: {
+      "tailwind.config.cjs": path.resolve(
+        __dirname,
+        "../hoppscotch-common/tailwind.config.cjs"
+      ),
+      "postcss.config.cjs": path.resolve(
+        __dirname,
+        "../hoppscotch-common/postcss.config.cjs"
+      ),
       // TODO: Maybe leave ~ only for individual apps and not use on common
       "~": path.resolve(__dirname, "../hoppscotch-common/src"),
       "@hoppscotch/common": "@hoppscotch/common/src",
@@ -108,9 +115,6 @@ export default defineConfig({
       compositionOnly: true,
       include: [path.resolve(__dirname, "locales")],
     }),
-    WindiCSS({
-      root: path.resolve(__dirname, "../hoppscotch-common"),
-    }),
     Components({
       dts: "../hoppscotch-common/src/components.d.ts",
       dirs: [