Merge pull request #40 from receptron/tw4

tailwind 4

package.json

@@ -21,13 +21,14 @@
     "graphai": "^0.6.23",
     "markdown-it": "^14.1.0",
     "pinia": "^2.3.1",
-    "unplugin-vue-markdown": "^28.1.0",
+    "unplugin-vue-markdown": "^28.3.0",
     "vue": "^3.5.13",
-    "vue-i18n": "^11.0.1",
+    "vue-i18n": "^11.1.0",
     "vue-router": "^4.5.0",
     "zod": "^3.24.1"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.0.0",
     "@types/cytoscape": "^3.21.9",
     "@types/cytoscape-fcose": "^2.2.4",
     "@types/cytoscape-klay": "^3.1.4",
@@ -36,7 +37,6 @@
     "@typescript-eslint/parser": "^8.22.0",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vue/eslint-config-typescript": "^14.3.0",
-    "autoprefixer": "^10.4.20",
     "eslint": "^9.19.0",
     "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-no-type-assertion": "^1.3.0",
@@ -46,7 +46,7 @@
     "postcss": "^8.5.1",
     "prettier": "^3.4.2",
     "prettier-plugin-tailwindcss": "^0.6.11",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.0.0",
     "typescript": "5.7.3",
     "typescript-eslint": "^8.22.0",
     "vite": "^6.0.11",

postcss.config.js

@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 };

src/App.vue

@@ -5,6 +5,7 @@
 </template>
 
 <style>
+@reference "./index.css";
 #app {
   /* font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;

src/components/Layout.vue

@@ -4,12 +4,12 @@
       <div class="w-full flex-1">
         <div class="bg-blue-300">
           <div class="relative flex items-center">
-            <div @click="toggleMenu()" class="inline-flex h-14 w-14 flex-shrink-0 cursor-pointer items-center justify-center">
+            <div @click="toggleMenu()" class="inline-flex h-14 w-14 shrink-0 cursor-pointer items-center justify-center">
               <span class="material-icons text-warmgray-900 text-opacity-60">menu</span>
             </div>
             <div class="w-full items-center">GraphAI Demo</div>
             <div v-show="menu" class="fixed top-0 left-0 z-30 flex h-screen w-screen">
-              <div class="bg-warmgray-100 flex w-64 flex-col bg-white shadow">
+              <div class="bg-warmgray-100 flex w-64 flex-col bg-white shadow-sm">
                 <MenuList @close-menu="toggleMenu()" />
               </div>
               <div @click="toggleMenu()" class="flex-1 cursor-pointer bg-black bg-opacity-40"></div>

src/index.css

@@ -1,4 +1,20 @@
 /* ./src/index.css */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}

src/views/Markdown.vue

@@ -18,7 +18,7 @@
             <div class="flex items-center">
               <input
                 v-model="userInput"
-                class="border border-gray-300 rounded-md flex-1 p-2 focus:outline-none focus:ring-2 focus:ring-sky-500"
+                class="border border-gray-300 rounded-md flex-1 p-2 focus:outline-hidden focus:ring-2 focus:ring-sky-500"
                 :disabled="events.length === 0"
                 placeholder="Type your message here..."
               />
@@ -41,7 +41,7 @@
           <h2 class="text-lg font-bold mb-2">Markdown Editor</h2>
           <textarea
             v-model="markdown"
-            class="w-full resize-none overflow-hidden border border-gray-300 rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-sky-500"
+            class="w-full resize-none overflow-hidden border border-gray-300 rounded-md p-2 focus:outline-hidden focus:ring-2 focus:ring-sky-500"
             placeholder="Write your markdown here..."
             @input="adjustTextareaHeight()"
             ref="textareaRef"
@@ -216,6 +216,7 @@ export default defineComponent({
 </script>
 
 <style scoped>
+@reference "../index.css";
 /* Headings */
 ::v-deep(h1) {
   @apply text-3xl text-blue-500 font-bold;