diff --git a/webapp/_webapp/package.json b/webapp/_webapp/package.json
index cbb93b1..9b90ab9 100644
--- a/webapp/_webapp/package.json
+++ b/webapp/_webapp/package.json
@@ -63,6 +63,7 @@
     "@codemirror/view": "^6.37.1",
     "@eslint/js": "^9.28.0",
     "@grafana/faro-rollup-plugin": "^0.7.0",
+    "@tailwindcss/postcss": "4.1.8",
     "@types/bun": "^1.3.5",
     "@types/chrome": "^0.0.326",
     "@types/codemirror": "^5.60.16",
@@ -79,7 +80,7 @@
     "globals": "^16.2.0",
     "nodemon": "^3.1.10",
     "prettier": "3.5.3",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "4.1.8",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.33.0",
     "vite": "^6.3.5"
diff --git a/webapp/_webapp/postcss.config.js b/webapp/_webapp/postcss.config.js
index 2aa7205..f69c5d4 100644
--- a/webapp/_webapp/postcss.config.js
+++ b/webapp/_webapp/postcss.config.js
@@ -1,6 +1,6 @@
 export default {
   plugins: {
-    tailwindcss: {},
+    "@tailwindcss/postcss": {},
     autoprefixer: {},
   },
 };
diff --git a/webapp/_webapp/src/devtool/index.css b/webapp/_webapp/src/devtool/index.css
index f65566f..f299b2f 100644
--- a/webapp/_webapp/src/devtool/index.css
+++ b/webapp/_webapp/src/devtool/index.css
@@ -1,6 +1,4 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
 
 :root {
   --primary-bg: rgb(255, 210, 210);
diff --git a/webapp/_webapp/src/index.css b/webapp/_webapp/src/index.css
index 77d8049..499491b 100644
--- a/webapp/_webapp/src/index.css
+++ b/webapp/_webapp/src/index.css
@@ -1,9 +1,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&display=swap");
 @source "../node_modules/streamdown/dist/*.js";
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
 
 :root {
   --pd-border-color: oklch(92.2% 0 0); /* --color-neutral-100 */
diff --git a/webapp/_webapp/tailwind.config.js b/webapp/_webapp/tailwind.config.js
index b685fa6..29faffe 100644
--- a/webapp/_webapp/tailwind.config.js
+++ b/webapp/_webapp/tailwind.config.js
@@ -1,8 +1,8 @@
 // tailwind.config.js
-const { heroui } = require("@heroui/react");
+import { heroui } from "@heroui/react";
 
 /** @type {import('tailwindcss').Config} */
-module.exports = {
+export default {
   content: ["./src/**/*.{js,ts,jsx,tsx}", "./node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}"],
   theme: {
     extend: {