fix(webapp): migrate to Tailwind CSS 4 to remove vulnerable braces dependency

webapp/src/main.tsx

@@ -4,7 +4,6 @@ import App from './App';
 import { initI18n } from './lib/i18n';
 import { registerNodeWardenServiceWorker } from './lib/pwa';
 import './tailwind.css';
-import './styles.css';
 
 const queryClient = new QueryClient({
   defaultOptions: {

webapp/src/styles/auth.css

@@ -353,7 +353,7 @@
 }
 
 .not-found-logo {
-  @apply h-14 w-14 flex-shrink-0 object-contain;
+  @apply h-14 w-14 shrink-0 object-contain;
   filter: drop-shadow(0 8px 18px rgba(43, 102, 217, 0.22));
 }
 
@@ -465,7 +465,7 @@
 }
 
 .standalone-brand-logo {
-  @apply h-14 w-[70px] flex-shrink-0 object-contain;
+  @apply h-14 w-[70px] shrink-0 object-contain;
   filter: drop-shadow(0 8px 18px rgba(43, 102, 217, 0.22));
 }
 

webapp/src/styles/forms.css

@@ -19,7 +19,7 @@
 }
 
 .input {
-  @apply h-12 w-full rounded-xl border px-3.5 py-2.5 outline-none;
+  @apply h-12 w-full rounded-xl border px-3.5 py-2.5 outline-hidden;
   background: var(--panel);
   border-color: rgba(74, 103, 150, 0.34);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);

webapp/src/styles/management.css

@@ -802,15 +802,25 @@
 }
 
 .yubikey-manage-dialog-body {
-  @apply mt-3 space-y-4;
+  @apply mt-3;
+}
+
+.yubikey-manage-dialog-body > :not([hidden]) ~ :not([hidden]) {
+  margin-top: 1rem;
+  margin-bottom: 0;
 }
 
 .settings-plain-steps {
-  @apply m-0 space-y-1 border-b pb-3 pl-5;
+  @apply m-0 border-b pb-3 pl-5;
   border-color: var(--line);
   color: var(--text);
 }
 
+.settings-plain-steps > :not([hidden]) ~ :not([hidden]) {
+  margin-top: 0.25rem;
+  margin-bottom: 0;
+}
+
 .yubikey-input-row {
   @apply grid items-center gap-2;
   grid-template-columns: minmax(0, 1fr) auto;
@@ -825,8 +835,9 @@
   @apply h-9 w-9 p-0;
 }
 
-.settings-checkbox-block {
-  @apply space-y-2;
+.settings-checkbox-block > :not([hidden]) ~ :not([hidden]) {
+  margin-top: 0.5rem;
+  margin-bottom: 0;
 }
 
 .checkbox-inline {

webapp/src/styles/responsive.css

@@ -132,7 +132,7 @@
   }
 
   .topbar-actions > .network-status-badge {
-    @apply inline-flex h-9 w-9 min-w-9 justify-center gap-0 rounded-xl p-0 text-[0];
+    @apply inline-flex h-9 w-9 min-w-9 justify-center gap-0 rounded-xl p-0 text-[0px];
     background: color-mix(in srgb, var(--panel) 88%, transparent);
     border-color: var(--line);
     box-shadow: none;
@@ -144,7 +144,7 @@
 
   .mobile-sidebar-toggle,
   .mobile-lock-btn {
-    @apply inline-flex h-9 w-9 min-w-9 justify-center gap-0 rounded-xl p-0 text-[0];
+    @apply inline-flex h-9 w-9 min-w-9 justify-center gap-0 rounded-xl p-0 text-[0px];
     background: color-mix(in srgb, var(--panel) 88%, transparent);
     border-color: var(--line);
     box-shadow: none;
@@ -451,7 +451,7 @@
   }
 
   .mobile-fab-trigger {
-    @apply h-9 w-9 gap-0 rounded-full p-0 text-[0];
+    @apply h-9 w-9 gap-0 rounded-full p-0 text-[0px];
     box-shadow: 0 14px 30px rgba(37, 99, 235, 0.28);
     transition: transform 180ms var(--ease-spring), box-shadow var(--dur-fast) var(--ease-out-soft);
   }

webapp/src/styles/skeleton.css

@@ -31,7 +31,12 @@
 }
 
 .skeleton-content {
-  @apply min-w-0 flex-1 space-y-2;
+  @apply min-w-0 flex-1;
+}
+
+.skeleton-content > :not([hidden]) ~ :not([hidden]) {
+  margin-top: 0.5rem;
+  margin-bottom: 0;
 }
 
 .skeleton-line {
@@ -63,13 +68,19 @@
 }
 
 .skeleton-page {
-  @apply h-full space-y-4 p-4;
+  @apply h-full p-4;
+}
+
+.skeleton-page > :not([hidden]) ~ :not([hidden]) {
+  margin-top: 1rem;
+  margin-bottom: 0;
 }
 
 .skeleton-header {
   @apply mb-6;
 }
 
-.skeleton-body {
-  @apply space-y-3;
+.skeleton-body > :not([hidden]) ~ :not([hidden]) {
+  margin-top: 0.75rem;
+  margin-bottom: 0;
 }

webapp/src/styles/vault.css

@@ -55,7 +55,7 @@
 }
 
 .search-input {
-  @apply h-12 w-full rounded-xl border px-3.5 py-2.5 text-base text-ink outline-none transition;
+  @apply h-12 w-full rounded-xl border px-3.5 py-2.5 text-base text-ink outline-hidden transition;
   background: var(--panel);
   border-color: rgba(74, 103, 150, 0.34);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
@@ -416,7 +416,7 @@ select.input.duplicate-mode-toolbar-select {
 }
 
 .desktop-create-trigger {
-  @apply h-[34px] w-[34px] min-w-[34px] gap-0 rounded-[10px] p-0 text-[0];
+  @apply h-[34px] w-[34px] min-w-[34px] gap-0 rounded-[10px] p-0 text-[0px];
 }
 
 .desktop-create-trigger .btn-icon {
@@ -586,7 +586,7 @@ select.input.duplicate-mode-toolbar-select {
 }
 
 .card-brand-icon {
-  @apply inline-grid h-6 w-9 shrink-0 place-items-center rounded border text-[7px] font-black uppercase leading-none;
+  @apply inline-grid h-6 w-9 shrink-0 place-items-center rounded-sm border text-[7px] font-black uppercase leading-none;
   letter-spacing: 0;
   color: #1e3a8a;
   background: linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%);

webapp/src/tailwind.css

@@ -1,3 +1,71 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss' source(none);
+@import './styles.css';
+
+@source '../index.html';
+@source './**/*.{ts,tsx}';
+
+@custom-variant dark (&:where([data-theme='dark'], [data-theme='dark'] *));
+
+/* Inline aliases keep utilities tied to the active light/dark design tokens. */
+@theme inline {
+  --color-canvas: var(--bg-accent);
+  --color-panel: var(--panel);
+  --color-panel-soft: var(--panel-soft);
+  --color-panel-muted: var(--panel-muted);
+  --color-line: var(--line);
+  --color-line-soft: var(--line-soft);
+  --color-ink: var(--text);
+  --color-muted: var(--muted);
+  --color-muted-strong: var(--muted-strong);
+  --color-brand: var(--primary);
+  --color-brand-hover: var(--primary-hover);
+  --color-brand-strong: var(--primary-strong);
+  --color-danger: var(--danger);
+
+  --shadow-soft: var(--shadow-sm);
+  --shadow-panel: var(--shadow-md);
+  --shadow-elevated: var(--shadow-lg);
+
+  --font-sans: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+
+  /* Preserve utility radii independently of tokens.css's --radius-* names. */
+  --radius-xs: 0.125rem;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-3xl: 1.5rem;
+
+  /* Keep line heights fixed when component styles override the font size. */
+  --text-xs--line-height: 1rem;
+  --text-sm--line-height: 1.25rem;
+  --text-base--line-height: 1.5rem;
+  --text-lg--line-height: 1.75rem;
+  --text-xl--line-height: 1.75rem;
+  --text-2xl--line-height: 2rem;
+  --text-3xl--line-height: 2.25rem;
+  --text-4xl--line-height: 2.5rem;
+}
+
+/* Retain the v3 defaults where components do not set their own values. */
+@layer base {
+  *,
+  ::before,
+  ::after,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+
+  input::placeholder,
+  textarea::placeholder {
+    color: var(--color-gray-400);
+  }
+
+  button:not(:disabled),
+  [role='button']:not(:disabled) {
+    cursor: pointer;
+  }
+}

webapp/vite.config.ts

@@ -2,6 +2,7 @@ import { fileURLToPath } from 'node:url';
 import path from 'node:path';
 import { createHash } from 'node:crypto';
 import preact from '@preact/preset-vite';
+import tailwindcss from '@tailwindcss/vite';
 import { defineConfig, type Plugin } from 'vite';
 
 const rootDir = fileURLToPath(new URL('.', import.meta.url));
@@ -263,7 +264,7 @@ export default defineConfig(({ mode }) => {
 
   return {
     root: rootDir,
-    plugins: [preact(), searchIndexPolicyPlugin(isDemo), pwaServiceWorkerPlugin(isDemo)],
+    plugins: [preact(), tailwindcss(), searchIndexPolicyPlugin(isDemo), pwaServiceWorkerPlugin(isDemo)],
     define: {
       __NODEWARDEN_DEMO__: JSON.stringify(isDemo),
     },