diff --git a/packages/core/playground/src/pages/devtools.vue b/packages/core/playground/src/pages/devtools.vue
index 9250c52a..921cab8b 100644
--- a/packages/core/playground/src/pages/devtools.vue
+++ b/packages/core/playground/src/pages/devtools.vue
@@ -151,87 +151,87 @@ function incrementCounter() {
 </script>
 
 <template>
-  <div max-w-180 mx-auto p6 text-left>
-    <h1 text-xl font-bold mb4>
+  <div class="max-w-180 mx-auto p6 text-left">
+    <h1 class="text-xl font-bold mb4">
       DevTools Debug Dashboard
     </h1>
 
     <!-- Status bar -->
-    <div flex gap-2 items-center mb6 px3 py2 bg-secondary rounded-lg text-sm>
+    <div class="flex gap-2 items-center mb6 px3 py2 bg-secondary rounded-lg text-sm">
       <DisplayBadge :text="isTrusted === null ? 'connecting' : isTrusted ? 'trusted' : 'untrusted'" />
-      <span op30>|</span>
-      <span font-mono>counter: {{ counterState?.count ?? '-' }}</span>
-      <button btn-action-sm ml-auto @click="incrementCounter">
+      <span class="op30">|</span>
+      <span class="font-mono">counter: {{ counterState?.count ?? '-' }}</span>
+      <button class="btn-action-sm ml-auto" @click="incrementCounter">
         ++
       </button>
     </div>
 
     <!-- Quick Actions -->
-    <section mb6>
-      <h2 text-sm font-semibold mb2>
+    <section class="mb6">
+      <h2 class="text-sm font-semibold mb2">
         Quick Actions
       </h2>
-      <div flex="~ wrap gap-2">
-        <button btn-action-sm @click="addNotification('URL copied!', 'success')">
-          <div i-ph-check-circle-duotone text-green />
+      <div class="flex flex-wrap gap-2">
+        <button class="btn-action-sm" @click="addNotification('URL copied!', 'success')">
+          <div class="i-ph-check-circle-duotone text-green" />
           Toast: Success
         </button>
-        <button btn-action-sm @click="addNotification('Something went wrong', 'error')">
-          <div i-ph-x-circle-duotone text-red />
+        <button class="btn-action-sm" @click="addNotification('Something went wrong', 'error')">
+          <div class="i-ph-x-circle-duotone text-red" />
           Toast: Error
         </button>
-        <button btn-action-sm @click="addNotification('Check this out', 'warn')">
-          <div i-ph-warning-duotone text-amber />
+        <button class="btn-action-sm" @click="addNotification('Check this out', 'warn')">
+          <div class="i-ph-warning-duotone text-amber" />
           Toast: Warning
         </button>
-        <button btn-action-sm @click="addLoadingThenResolve()">
-          <div i-ph-spinner-gap-duotone />
+        <button class="btn-action-sm" @click="addLoadingThenResolve()">
+          <div class="i-ph-spinner-gap-duotone" />
           Loading -> Resolve
         </button>
-        <button btn-action-sm @click="addBatchMessages()">
-          <div i-ph-list-plus-duotone />
+        <button class="btn-action-sm" @click="addBatchMessages()">
+          <div class="i-ph-list-plus-duotone" />
           Add All Levels
         </button>
-        <button btn-action-sm text-red @click="clearMessages()">
-          <div i-ph-trash-duotone />
+        <button class="btn-action-sm text-red" @click="clearMessages()">
+          <div class="i-ph-trash-duotone" />
           Clear All
         </button>
       </div>
     </section>
 
     <!-- Add Message -->
-    <section mb6 border="~ base" rounded-lg p3>
-      <h2 text-sm font-semibold mb2>
+    <section class="mb6 border border-base rounded-lg p3">
+      <h2 class="text-sm font-semibold mb2">
         Add Message
       </h2>
-      <div grid="~ cols-2 gap-2" text-sm>
-        <label flex="~ col gap-1">
-          <span op50 text-xs>Message</span>
-          <input v-model="messageMessage" border="~ base" rounded px2 py1 text-sm bg-transparent outline-none>
+      <div class="grid grid-cols-2 gap-2 text-sm">
+        <label class="flex flex-col gap-1">
+          <span class="op50 text-xs">Message</span>
+          <input v-model="messageMessage" class="border border-base rounded px2 py1 text-sm bg-transparent outline-none">
         </label>
-        <label flex="~ col gap-1">
-          <span op50 text-xs>Level</span>
-          <select v-model="messageLevel" border="~ base" rounded px2 py1 text-sm bg-transparent>
+        <label class="flex flex-col gap-1">
+          <span class="op50 text-xs">Level</span>
+          <select v-model="messageLevel" class="border border-base rounded px2 py1 text-sm bg-transparent">
             <option v-for="l of levels" :key="l" :value="l">
               {{ l }}
             </option>
           </select>
         </label>
-        <label flex="~ col gap-1">
-          <span op50 text-xs>Category</span>
-          <input v-model="messageCategory" border="~ base" rounded px2 py1 text-sm bg-transparent outline-none>
+        <label class="flex flex-col gap-1">
+          <span class="op50 text-xs">Category</span>
+          <input v-model="messageCategory" class="border border-base rounded px2 py1 text-sm bg-transparent outline-none">
         </label>
-        <label flex="~ col gap-1">
-          <span op50 text-xs>Labels (comma-separated)</span>
-          <input v-model="messageLabels" border="~ base" rounded px2 py1 text-sm bg-transparent outline-none>
+        <label class="flex flex-col gap-1">
+          <span class="op50 text-xs">Labels (comma-separated)</span>
+          <input v-model="messageLabels" class="border border-base rounded px2 py1 text-sm bg-transparent outline-none">
         </label>
-        <label flex="~ col gap-1">
-          <span op50 text-xs>ID (for dedup)</span>
-          <input v-model="messageId" placeholder="auto" border="~ base" rounded px2 py1 text-sm bg-transparent outline-none>
+        <label class="flex flex-col gap-1">
+          <span class="op50 text-xs">ID (for dedup)</span>
+          <input v-model="messageId" placeholder="auto" class="border border-base rounded px2 py1 text-sm bg-transparent outline-none">
         </label>
-        <label flex="~ col gap-1">
-          <span op50 text-xs>Status</span>
-          <select v-model="messageStatus" border="~ base" rounded px2 py1 text-sm bg-transparent>
+        <label class="flex flex-col gap-1">
+          <span class="op50 text-xs">Status</span>
+          <select v-model="messageStatus" class="border border-base rounded px2 py1 text-sm bg-transparent">
             <option value="idle">
               idle
             </option>
@@ -240,72 +240,72 @@ function incrementCounter() {
             </option>
           </select>
         </label>
-        <label flex="~ col gap-1" col-span-2>
-          <span op50 text-xs>Description</span>
-          <textarea v-model="messageDescription" rows="2" border="~ base" rounded px2 py1 text-sm bg-transparent outline-none resize-y />
+        <label class="flex flex-col gap-1 col-span-2">
+          <span class="op50 text-xs">Description</span>
+          <textarea v-model="messageDescription" rows="2" class="border border-base rounded px2 py1 text-sm bg-transparent outline-none resize-y" />
         </label>
-        <label flex="~ col gap-1" col-span-2>
-          <span op50 text-xs>Stacktrace</span>
-          <textarea v-model="messageStacktrace" rows="3" border="~ base" rounded px2 py1 text-sm bg-transparent outline-none resize-y font-mono />
+        <label class="flex flex-col gap-1 col-span-2">
+          <span class="op50 text-xs">Stacktrace</span>
+          <textarea v-model="messageStacktrace" rows="3" class="border border-base rounded px2 py1 text-sm bg-transparent outline-none resize-y font-mono" />
         </label>
-        <label flex="~ col gap-1">
-          <span op50 text-xs>Auto Dismiss</span>
-          <input v-model="messageAutoDismiss" type="number" border="~ base" rounded px2 py1 text-sm bg-transparent outline-none>
+        <label class="flex flex-col gap-1">
+          <span class="op50 text-xs">Auto Dismiss</span>
+          <input v-model="messageAutoDismiss" type="number" class="border border-base rounded px2 py1 text-sm bg-transparent outline-none">
         </label>
-        <label flex="~ col gap-1">
-          <span op50 text-xs>Auto Delete</span>
-          <input v-model="messageAutoDelete" type="number" border="~ base" rounded px2 py1 text-sm bg-transparent outline-none>
+        <label class="flex flex-col gap-1">
+          <span class="op50 text-xs">Auto Delete</span>
+          <input v-model="messageAutoDelete" type="number" class="border border-base rounded px2 py1 text-sm bg-transparent outline-none">
         </label>
-        <label flex="~ col gap-1" col-span-2>
-          <span op50 text-xs>File Position - Path</span>
-          <input v-model="messageFilePositionFile" border="~ base" rounded px2 py1 text-sm bg-transparent outline-none>
+        <label class="flex flex-col gap-1 col-span-2">
+          <span class="op50 text-xs">File Position - Path</span>
+          <input v-model="messageFilePositionFile" class="border border-base rounded px2 py1 text-sm bg-transparent outline-none">
         </label>
-        <label flex="~ col gap-1">
-          <span op50 text-xs>File Position - Line</span>
-          <input v-model="messageFilePositionLine" type="number" border="~ base" rounded px2 py1 text-sm bg-transparent outline-none>
+        <label class="flex flex-col gap-1">
+          <span class="op50 text-xs">File Position - Line</span>
+          <input v-model="messageFilePositionLine" type="number" class="border border-base rounded px2 py1 text-sm bg-transparent outline-none">
         </label>
-        <label flex="~ col gap-1">
-          <span op50 text-xs>File Position - Column</span>
-          <input v-model="messageFilePositionColumn" type="number" border="~ base" rounded px2 py1 text-sm bg-transparent outline-none>
+        <label class="flex flex-col gap-1">
+          <span class="op50 text-xs">File Position - Column</span>
+          <input v-model="messageFilePositionColumn" type="number" class="border border-base rounded px2 py1 text-sm bg-transparent outline-none">
         </label>
       </div>
-      <div flex items-center gap-3 mt2>
-        <label flex items-center gap-1 text-xs>
+      <div class="flex items-center gap-3 mt2">
+        <label class="flex items-center gap-1 text-xs">
           <input v-model="messageNotify" type="checkbox">
           Notify (toast)
         </label>
-        <button btn-action-sm ml-auto @click="addMessage">
-          <div i-ph-paper-plane-tilt-duotone />
+        <button class="btn-action-sm ml-auto" @click="addMessage">
+          <div class="i-ph-paper-plane-tilt-duotone" />
           Add Message
         </button>
       </div>
     </section>
 
     <!-- Update Message -->
-    <section mb6 border="~ base" rounded-lg p3>
-      <h2 text-sm font-semibold mb2>
+    <section class="mb6 border border-base rounded-lg p3">
+      <h2 class="text-sm font-semibold mb2">
         Update Message by ID
       </h2>
-      <div grid="~ cols-2 gap-2" text-sm>
-        <label flex="~ col gap-1">
-          <span op50 text-xs>Entry ID</span>
-          <input v-model="updateId" placeholder="entry id" border="~ base" rounded px2 py1 text-sm bg-transparent outline-none>
+      <div class="grid grid-cols-2 gap-2 text-sm">
+        <label class="flex flex-col gap-1">
+          <span class="op50 text-xs">Entry ID</span>
+          <input v-model="updateId" placeholder="entry id" class="border border-base rounded px2 py1 text-sm bg-transparent outline-none">
         </label>
-        <label flex="~ col gap-1">
-          <span op50 text-xs>New Message</span>
-          <input v-model="updateMessage" border="~ base" rounded px2 py1 text-sm bg-transparent outline-none>
+        <label class="flex flex-col gap-1">
+          <span class="op50 text-xs">New Message</span>
+          <input v-model="updateMessage" class="border border-base rounded px2 py1 text-sm bg-transparent outline-none">
         </label>
-        <label flex="~ col gap-1">
-          <span op50 text-xs>Level</span>
-          <select v-model="updateLevel" border="~ base" rounded px2 py1 text-sm bg-transparent>
+        <label class="flex flex-col gap-1">
+          <span class="op50 text-xs">Level</span>
+          <select v-model="updateLevel" class="border border-base rounded px2 py1 text-sm bg-transparent">
             <option v-for="l of levels" :key="l" :value="l">
               {{ l }}
             </option>
           </select>
         </label>
-        <label flex="~ col gap-1">
-          <span op50 text-xs>Status</span>
-          <select v-model="updateStatus" border="~ base" rounded px2 py1 text-sm bg-transparent>
+        <label class="flex flex-col gap-1">
+          <span class="op50 text-xs">Status</span>
+          <select v-model="updateStatus" class="border border-base rounded px2 py1 text-sm bg-transparent">
             <option value="idle">
               idle
             </option>
@@ -315,23 +315,23 @@ function incrementCounter() {
           </select>
         </label>
       </div>
-      <div flex justify-end mt2>
-        <button btn-action-sm @click="updateMessageEntry">
-          <div i-ph-pencil-simple-duotone />
+      <div class="flex justify-end mt2">
+        <button class="btn-action-sm" @click="updateMessageEntry">
+          <div class="i-ph-pencil-simple-duotone" />
           Update
         </button>
       </div>
     </section>
 
     <!-- Shared State -->
-    <section border="~ base" rounded-lg p3>
-      <h2 text-sm font-semibold mb2>
+    <section class="border border-base rounded-lg p3">
+      <h2 class="text-sm font-semibold mb2">
         Shared State: counter
       </h2>
-      <pre text-xs bg-secondary rounded p2 of-auto font-mono>{{ counterState }}</pre>
-      <div flex gap-2 mt2>
-        <button btn-action-sm @click="incrementCounter">
-          <div i-ph-plus-duotone />
+      <pre class="text-xs bg-secondary rounded p2 of-auto font-mono">{{ counterState }}</pre>
+      <div class="flex gap-2 mt2">
+        <button class="btn-action-sm" @click="incrementCounter">
+          <div class="i-ph-plus-duotone" />
           Increment
         </button>
       </div>
diff --git a/packages/oxc/src/app/app.vue b/packages/oxc/src/app/app.vue
index 7a793338..23af3f8e 100644
--- a/packages/oxc/src/app/app.vue
+++ b/packages/oxc/src/app/app.vue
@@ -8,11 +8,11 @@ connect()
 </script>
 
 <template>
-  <div v-if="connectionState.error" text-red>
+  <div v-if="connectionState.error" class="text-red">
     {{ connectionState.error }}
   </div>
   <VisualLoading v-else-if="!connectionState.connected" text="Connecting..." />
-  <main v-else container mx-auto p4>
+  <main v-else class="container mx-auto p4">
     <NuxtPage />
   </main>
 </template>
diff --git a/packages/oxc/src/app/components/Back.vue b/packages/oxc/src/app/components/Back.vue
index b4224617..8bd8175a 100644
--- a/packages/oxc/src/app/components/Back.vue
+++ b/packages/oxc/src/app/components/Back.vue
@@ -14,8 +14,8 @@ function goBack() {
 </script>
 
 <template>
-  <button btn-action-sm mb2 w-fit cursor-pointer @click="goBack">
-    <div i-ph-arrow-bend-up-left-duotone />
+  <button class="btn-action-sm mb2 w-fit cursor-pointer" @click="goBack">
+    <div class="i-ph-arrow-bend-up-left-duotone" />
     Back
   </button>
 </template>
diff --git a/packages/oxc/src/app/components/ErrorTooltip.vue b/packages/oxc/src/app/components/ErrorTooltip.vue
index 9909e451..2516640a 100644
--- a/packages/oxc/src/app/components/ErrorTooltip.vue
+++ b/packages/oxc/src/app/components/ErrorTooltip.vue
@@ -27,68 +27,55 @@ function handleOpenInEditor() {
 </script>
 
 <template>
-  <div flex="~ col gap-3">
+  <div class="flex flex-col gap-3">
     <!-- Header area -->
-    <div flex items-center gap-2 pb2 border="b base">
-      <div flex items-center gap-2 px2 py1 rounded-md text-sm font-medium :class="severityBadge">
-        <div :class="severityIcon" text-sm />
-        <span font-mono>{{ message.code }}</span>
+    <div class="flex items-center gap-2 pb2 border-b border-base">
+      <div
+        class="flex items-center gap-2 px2 py1 rounded-md text-sm font-medium"
+        :class="severityBadge"
+      >
+        <div :class="severityIcon" class="text-sm" />
+        <span class="font-mono">{{ message.code }}</span>
       </div>
     </div>
 
     <!-- Message content -->
     <div
       v-if="message.message"
-      text-sm
-      leading-relaxed
-      color-base
+      class="text-sm leading-relaxed color-base"
       v-html="processLabelHtml(message.message)"
     />
 
     <!-- Help text -->
-    <div v-if="message.help" flex items-start gap-2 p2 rounded-md border="~ base" bg-active>
-      <div i-ph-lightbulb-duotone flex-shrink-0 text-primary-500 mt-0.5 />
-      <div text-xs op-fade leading-relaxed>
+    <div
+      v-if="message.help"
+      class="flex items-start gap-2 p2 rounded-md border border-base bg-active"
+    >
+      <div class="i-ph-lightbulb-duotone flex-shrink-0 text-primary-500 mt-0.5" />
+      <div class="text-xs op-fade leading-relaxed">
         {{ message.help }}
       </div>
     </div>
 
     <!-- Action buttons -->
-    <div flex items-center gap-2 pt2 border="t base">
+    <div class="flex items-center gap-2 pt2 border-t border-base">
       <!-- Jump to the rule URL -->
       <a
         v-if="message.url"
         :href="message.url"
         target="_blank"
-        flex
-        items-center
-        gap-1.5
-        px2
-        py1.5
-        rounded-md
-        op-fade
-        hover:bg-active
-        text-xs
+        class="flex items-center gap-1.5 px2 py1.5 rounded-md op-fade hover:bg-active text-xs"
       >
-        <div i-ph-info text-sm />
+        <div class="i-ph-info text-sm" />
         <span>Rule details</span>
       </a>
 
       <!-- Open in editor -->
       <button
-        flex
-        items-center
-        gap-1.5
-        cursor-pointer
-        px2
-        py1.5
-        rounded-md
-        op-fade
-        hover:bg-active
-        text-xs
+        class="flex items-center gap-1.5 cursor-pointer px2 py1.5 rounded-md op-fade hover:bg-active text-xs"
         @click="handleOpenInEditor"
       >
-        <div i-radix-icons:open-in-new-window text-sm />
+        <div class="i-radix-icons:open-in-new-window text-sm" />
         <span>Open in editor</span>
       </button>
     </div>
diff --git a/packages/oxc/src/app/components/FileCard.vue b/packages/oxc/src/app/components/FileCard.vue
index 9bae78c6..c2ef365b 100644
--- a/packages/oxc/src/app/components/FileCard.vue
+++ b/packages/oxc/src/app/components/FileCard.vue
@@ -17,15 +17,15 @@ function handleOpenInEditor() {
 <template>
   <ContainerCard>
     <template #header>
-      <div flex items-center gap-2 cursor-pointer @click="handleOpenInEditor">
-        <DisplayFileIcon flex-none :filename="file.filename" />
-        <span truncate color-base hover:underline font-mono>
+      <div class="flex items-center gap-2 cursor-pointer" @click="handleOpenInEditor">
+        <DisplayFileIcon class="flex-none" :filename="file.filename" />
+        <span class="truncate color-base hover:underline font-mono">
           {{ file.filename }}
         </span>
       </div>
     </template>
 
-    <div relative font-mono>
+    <div class="relative font-mono">
       <div v-if="file.lines.length > 0">
         <LineError
           v-for="lineData in file.lines"
diff --git a/packages/oxc/src/app/components/LineError.vue b/packages/oxc/src/app/components/LineError.vue
index abba78de..213265a0 100644
--- a/packages/oxc/src/app/components/LineError.vue
+++ b/packages/oxc/src/app/components/LineError.vue
@@ -77,27 +77,21 @@ function severityClass(severity: string | undefined) {
 </script>
 
 <template>
-  <div overflow-auto>
-    <div p4>
+  <div class="overflow-auto">
+    <div class="p4">
       <!-- Current line code -->
-      <div flex gap-4 items-start>
-        <span op-fade font-mono text-sm relative top-3px>{{ lineData.line }}</span>
-        <div flex-1>
+      <div class="flex gap-4 items-start">
+        <span class="op-fade font-mono text-sm relative top-3px">{{ lineData.line }}</span>
+        <div class="flex-1">
           <Shiki :code="currentLineCode" :ext="fileExt" />
 
-          <div flex relative :style="{ minHeight: `${errorHeight}px`, top: '-10px' }">
+          <div class="flex relative" :style="{ minHeight: `${errorHeight}px`, top: '-10px' }">
             <a
               v-for="(label, labelIndex) in sortedLabels"
               :key="labelIndex"
               target="_blank"
               :href="getMessageForLabel(label.span.column)?.url"
-              absolute
-              whitespace-pre
-              text-neutral-300
-              dark:text-neutral-600
-              hover:text-neutral-800
-              dark:hover:text-neutral-200
-              cursor-pointer
+              class="absolute whitespace-pre text-neutral-300 dark:text-neutral-600 hover:text-neutral-800 dark:hover:text-neutral-200 cursor-pointer"
               group
               :style="{ left: `calc(${label.span.column - 1}ch)` }"
             >
@@ -115,20 +109,20 @@ function severityClass(severity: string | undefined) {
                   <div
                     v-for="i in (sortedLabels.length - labelIndex - 1) * 2"
                     :key="`bar-${i}`"
-                    relative
+                    class="relative"
                     :style="getLabelVerticalStyle(labelIndex, -1)"
                   >
                     │
                   </div>
-                  <div relative flex :style="getLabelVerticalStyle(labelIndex)">
+                  <div class="relative flex" :style="getLabelVerticalStyle(labelIndex)">
                     <div>╰─</div>
                     <div
                       v-if="(label as any).label"
-                      ml1
+                      class="ml1"
                       v-html="`${processLabelHtml((label as any).label)}.`"
                     />
                     <div
-                      ml1
+                      class="ml1"
                       :class="severityClass(getMessageForLabel(label.span.column)?.severity)"
                     >
                       {{ getMessageForLabel(label.span.column)?.code }}
@@ -136,7 +130,7 @@ function severityClass(severity: string | undefined) {
                   </div>
                 </div>
                 <template #popper>
-                  <div max-w-sm>
+                  <div class="max-w-sm">
                     <ErrorTooltip
                       v-if="getMessageForLabel(label.span.column)"
                       :message="getMessageForLabel(label.span.column)!"
diff --git a/packages/oxc/src/app/components/Search.vue b/packages/oxc/src/app/components/Search.vue
index f2b897dc..5cca42c3 100644
--- a/packages/oxc/src/app/components/Search.vue
+++ b/packages/oxc/src/app/components/Search.vue
@@ -21,16 +21,16 @@ function clearSearch() {
 </script>
 
 <template>
-  <div w-full flex items-center gap-2 border="~ base rounded-lg" bg-base px3 py2>
-    <div i-lucide-search op-fade flex-none />
-    <input v-model="search" w-full bg-transparent outline-none placeholder="Search file names" />
+  <div class="w-full flex items-center gap-2 border border-base rounded-lg bg-base px3 py2">
+    <div class="i-lucide-search op-fade flex-none" />
+    <input
+      v-model="search"
+      class="w-full bg-transparent outline-none"
+      placeholder="Search file names"
+    />
     <button
       v-if="search?.length"
-      i-lucide-circle-x
-      op50
-      flex-none
-      cursor-pointer
-      hover:op100
+      class="i-lucide-circle-x op50 flex-none cursor-pointer hover:op100"
       aria-label="Clear input"
       @click="clearSearch"
     />
diff --git a/packages/oxc/src/app/components/SessionCard.vue b/packages/oxc/src/app/components/SessionCard.vue
index 1b2d3701..eb3539ac 100644
--- a/packages/oxc/src/app/components/SessionCard.vue
+++ b/packages/oxc/src/app/components/SessionCard.vue
@@ -12,84 +12,48 @@ const failed = computed(() => {
 </script>
 
 <template>
-  <NuxtLink w-full :to="`/lint/report/${meta.timestamp}`">
-    <ContainerCard p4 cursor-pointer hover:bg-active>
-      <div flex justify-between gap-2 font-mono op-fade>
-        <div flex items-center gap-1>
-          <div i-ph-hash-duotone />
-          <span text-sm>{{ meta.timestamp }}</span>
+  <NuxtLink class="w-full" :to="`/lint/report/${meta.timestamp}`">
+    <ContainerCard class="p4 cursor-pointer hover:bg-active">
+      <div class="flex justify-between gap-2 font-mono op-fade">
+        <div class="flex items-center gap-1">
+          <div class="i-ph-hash-duotone" />
+          <span class="text-sm">{{ meta.timestamp }}</span>
         </div>
 
         {{ useTimeAgo(meta.timestamp) }}
       </div>
 
-      <div flex justify-between items-center mt4>
+      <div class="flex justify-between items-center mt4">
         <span
-          badge-color-gray
-          inline-flex
-          items-center
-          gap-1
-          px2
-          py0.5
-          rounded
-          border
-          text-sm
-          font-mono
+          class="badge-color-gray inline-flex items-center gap-1 px2 py0.5 rounded border text-sm font-mono"
         >
-          <div i-ph-file-duotone />
+          <div class="i-ph-file-duotone" />
           {{ meta.summary.number_of_files }}
         </span>
 
-        <div v-if="failed" flex items-center gap-2>
+        <div v-if="failed" class="flex items-center gap-2">
           <span
             v-if="meta.summary.error_count > 0"
-            badge-color-red
-            inline-flex
-            items-center
-            gap-1
-            px2
-            py0.5
-            rounded
-            border
-            text-sm
-            font-mono
+            class="badge-color-red inline-flex items-center gap-1 px2 py0.5 rounded border text-sm font-mono"
           >
-            <div i-ph-x-circle-duotone />
+            <div class="i-ph-x-circle-duotone" />
             {{ meta.summary.error_count }}
           </span>
 
           <span
             v-if="meta.summary.warning_count > 0"
-            badge-color-amber
-            inline-flex
-            items-center
-            gap-1
-            px2
-            py0.5
-            rounded
-            border
-            text-sm
-            font-mono
+            class="badge-color-amber inline-flex items-center gap-1 px2 py0.5 rounded border text-sm font-mono"
           >
-            <div i-ph-warning-circle-duotone />
+            <div class="i-ph-warning-circle-duotone" />
             {{ meta.summary.warning_count }}
           </span>
         </div>
 
         <span
           v-else
-          badge-color-green
-          inline-flex
-          items-center
-          gap-1
-          px2
-          py0.5
-          rounded
-          border
-          text-sm
-          font-mono
+          class="badge-color-green inline-flex items-center gap-1 px2 py0.5 rounded border text-sm font-mono"
         >
-          <div i-ph-check-circle-duotone />
+          <div class="i-ph-check-circle-duotone" />
           Passed
         </span>
       </div>
diff --git a/packages/oxc/src/app/components/SummaryCard.vue b/packages/oxc/src/app/components/SummaryCard.vue
index 3fbf020a..40cc46c6 100644
--- a/packages/oxc/src/app/components/SummaryCard.vue
+++ b/packages/oxc/src/app/components/SummaryCard.vue
@@ -18,134 +18,102 @@ const durationMs = computed(() => Math.round(props.summary.start_time * 1000))
 </script>
 
 <template>
-  <div flex="~ col" gap-2>
-    <ContainerCard p4>
-      <div grid="~ cols-[max-content_160px_2fr]" gap-2 items-center>
-        <div i-ph-anchor text-lg />
+  <div class="flex flex-col gap-2">
+    <ContainerCard class="p4">
+      <div class="grid grid-cols-[max-content_160px_2fr] gap-2 items-center">
+        <div class="i-ph-anchor text-lg" />
 
-        <div font-medium>Oxlint Version</div>
+        <div class="font-medium">Oxlint Version</div>
 
         <NuxtLink
           :to="`https://github.com/oxc-project/oxc/releases/tag/oxlint_v${version}`"
           external
           target="_blank"
-          w-fit
+          class="w-fit"
         >
           <span
-            badge-color-gray
-            inline-flex
-            items-center
-            gap-1
-            px2
-            py1
-            rounded
-            border
-            font-mono
-            hover:color-active
+            class="badge-color-gray inline-flex items-center gap-1 px2 py1 rounded border font-mono hover:color-active"
           >
-            <span ml1>v{{ version }}</span>
-            <div i-ph-arrow-up-right />
+            <span class="ml1">v{{ version }}</span>
+            <div class="i-ph-arrow-up-right" />
           </span>
         </NuxtLink>
 
-        <div i-ph-gear text-lg />
+        <div class="i-ph-gear text-lg" />
 
-        <div font-medium>Oxlint Config</div>
+        <div class="font-medium">Oxlint Config</div>
 
         <OverlayModal>
           <template #trigger="{ open }">
             <span
-              badge-color-gray
-              inline-flex
-              w-fit
-              items-center
-              gap-1
-              px2
-              py1
-              rounded
-              border
-              font-mono
-              cursor-pointer
-              hover:color-active
+              class="badge-color-gray inline-flex w-fit items-center gap-1 px2 py1 rounded border font-mono cursor-pointer hover:color-active"
               @click="open"
             >
-              <span ml1>.oxlintrc.json</span>
-              <div i-ph-arrow-up-right />
+              <span class="ml1">.oxlintrc.json</span>
+              <div class="i-ph-arrow-up-right" />
             </span>
           </template>
           <template #title>
-            <div flex items-center gap-1>
-              <div i-vscode-icons:file-type-oxlint flex-none />
+            <div class="flex items-center gap-1">
+              <div class="i-vscode-icons:file-type-oxlint flex-none" />
               <div>.oxlintrc.json</div>
             </div>
           </template>
-          <div v-if="config" w-150 max-w-full font-mono>
+          <div v-if="config" class="w-150 max-w-full font-mono">
             <Shiki :code="JSON.stringify(config, null, 2)" ext=".json" />
           </div>
           <div v-else>
-            <p text-sm op-fade>No config found</p>
+            <p class="text-sm op-fade">No config found</p>
           </div>
         </OverlayModal>
 
-        <div i-ph-clock-duotone text-lg />
+        <div class="i-ph-clock-duotone text-lg" />
 
-        <div font-medium>Created At</div>
+        <div class="font-medium">Created At</div>
 
-        <span badge-color-gray inline-flex w-fit items-center px2 py1 rounded border font-mono>
+        <span
+          class="badge-color-gray inline-flex w-fit items-center px2 py1 rounded border font-mono"
+        >
           {{ new Date(timestamp).toLocaleString() }}
         </span>
 
-        <div i-ph-timer-duotone text-lg />
+        <div class="i-ph-timer-duotone text-lg" />
 
-        <div font-medium>Lint Duration</div>
+        <div class="font-medium">Lint Duration</div>
 
-        <span badge-color-gray inline-flex w-fit items-center px2 py1 rounded border font-mono>
+        <span
+          class="badge-color-gray inline-flex w-fit items-center px2 py1 rounded border font-mono"
+        >
           <DisplayDuration :duration="durationMs" />
         </span>
 
-        <div i-ph-file-duotone text-lg />
+        <div class="i-ph-file-duotone text-lg" />
 
-        <div font-medium>Checked Files</div>
+        <div class="font-medium">Checked Files</div>
 
         <span
-          badge-color-gray
-          inline-flex
-          w-fit
-          items-center
-          gap-1
-          px2
-          py1
-          rounded
-          border
-          font-mono
+          class="badge-color-gray inline-flex w-fit items-center gap-1 px2 py1 rounded border font-mono"
         >
           {{ summary.number_of_files }} files.
-          <span text-red-600 dark:text-red-400 font-semibold
+          <span class="text-red-600 dark:text-red-400 font-semibold"
             >{{ summary.files_with_issues }} with issues</span
           >
         </span>
 
-        <div i-ph-warning-octagon-duotone text-lg />
+        <div class="i-ph-warning-octagon-duotone text-lg" />
 
-        <div font-medium>Issues</div>
+        <div class="font-medium">Issues</div>
 
         <span
-          badge-color-gray
-          inline-flex
-          w-fit
-          items-center
-          gap-1
-          px2
-          py1
-          rounded
-          border
-          font-mono
+          class="badge-color-gray inline-flex w-fit items-center gap-1 px2 py1 rounded border font-mono"
         >
           {{ totalIssues }} issues.
-          <span v-if="summary.error_count > 0" text-red-600 dark:text-red-400 font-semibold
+          <span v-if="summary.error_count > 0" class="text-red-600 dark:text-red-400 font-semibold"
             >{{ summary.error_count }} errors</span
           >
-          <span v-if="summary.warning_count > 0" text-yellow-600 dark:text-yellow-400 font-semibold
+          <span
+            v-if="summary.warning_count > 0"
+            class="text-yellow-600 dark:text-yellow-400 font-semibold"
             >{{ summary.warning_count }} warnings</span
           >
         </span>
diff --git a/packages/oxc/src/app/pages/fmt/config.vue b/packages/oxc/src/app/pages/fmt/config.vue
index 78aa309d..2c554666 100644
--- a/packages/oxc/src/app/pages/fmt/config.vue
+++ b/packages/oxc/src/app/pages/fmt/config.vue
@@ -178,18 +178,16 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div h="[calc(100vh-4rem)]" max-w-7xl p4 mx-auto>
+  <div class="h-[calc(100vh-4rem)] max-w-7xl p4 mx-auto">
     <Back to="/" />
-    <div flex="~ col lg:row" h-full border="~ base rounded-lg" of-hidden bg-base>
-      <div flex-1 min-h-0 min-w-0 border="b base lg:b-0 lg:r">
-        <div ref="editorRef" h-full min-h="200px lg:0" />
+    <div class="flex flex-col lg:flex-row h-full border border-base rounded-lg of-hidden bg-base">
+      <div class="flex-1 min-h-0 min-w-0 border-b border-base lg:border-b-0 lg:border-r">
+        <div ref="editorRef" class="h-full min-h-200px lg:min-h-0" />
       </div>
-      <div flex-1 min-h="200px lg:0" min-w-0 relative>
+      <div class="flex-1 min-h-200px lg:min-h-0 min-w-0 relative">
         <iframe
           :src="currentDocUrl"
-          w-full
-          h-full
-          border-0
+          class="w-full h-full border-0"
           sandbox="allow-same-origin allow-scripts"
           title="Formatter configuration documentation"
           @load="iframeLoading = false"
@@ -202,21 +200,10 @@ onBeforeUnmount(() => {
         >
           <div
             v-show="iframeLoading"
-            absolute
-            inset-0
-            flex
-            items-center
-            justify-center
-            bg-base
-            pointer-events-none
+            class="absolute inset-0 flex items-center justify-center bg-base pointer-events-none"
           >
             <span
-              size-8
-              animate-spin
-              rounded-full
-              border-2
-              border-base
-              border-t-primary-500
+              class="size-8 animate-spin rounded-full border-2 border-base border-t-primary-500"
               aria-hidden="true"
             />
           </div>
diff --git a/packages/oxc/src/app/pages/index.vue b/packages/oxc/src/app/pages/index.vue
index a978b858..0660925d 100644
--- a/packages/oxc/src/app/pages/index.vue
+++ b/packages/oxc/src/app/pages/index.vue
@@ -23,200 +23,149 @@ const { state: overview } = useAsyncState(() => rpc.value.call('devtools-oxc:ove
 </script>
 
 <template>
-  <div flex="~ col" items-center gap-8 font-mono translate-y-50>
+  <div class="flex flex-col items-center gap-8 font-mono translate-y-50">
     <BannerOxcDevTools />
 
-    <div flex="~ col md:row" items-center gap-4>
+    <div class="flex flex-col md:flex-row items-center gap-4">
       <ContainerCard
-        w-70
-        flex="~ col"
-        items-center
-        justify-center
-        gap-3
-        py5
-        px4
-        transition-all
-        duration-300
-        hover:shadow-lg
-        dark:hover:shadow="[0_0_20px_rgba(255,255,255,0.1)]"
+        class="w-70 flex flex-col items-center justify-center gap-3 py5 px4 transition-all duration-300 hover:shadow-lg dark:hover:shadow-[0_0_20px_rgba(255,255,255,0.1)]"
       >
-        <div i-ph-check-circle text-4xl op-fade />
-        <p text-xl mt2 font-medium color-base>oxlint</p>
+        <div class="i-ph-check-circle text-4xl op-fade" />
+        <p class="text-xl mt2 font-medium color-base">oxlint</p>
 
-        <div v-if="overview?.oxlint.installed" flex="~ col" items-center>
+        <div v-if="overview?.oxlint.installed" class="flex flex-col items-center">
           <a
             :href="overview?.oxlint.npmxLink"
             target="_blank"
-            op-fade
-            text-base
-            cursor-pointer
-            hover:color-active
+            class="op-fade text-base cursor-pointer hover:color-active"
           >
             v{{ overview?.oxlint.version }}
           </a>
           <span
             v-if="overview?.oxlint.latest"
-            badge-color-green
-            px2
-            py0.5
-            rounded
-            border
-            font-bold
-            text-sm
+            class="badge-color-green px2 py0.5 rounded border font-bold text-sm"
             >Latest</span
           >
           <NuxtLink
             v-else
             to="https://npmx.dev/package/oxlint/v/latest"
             target="_blank"
-            cursor-pointer
+            class="cursor-pointer"
           >
-            <span badge-color-amber px2 py0.5 rounded border font-bold text-sm
+            <span class="badge-color-amber px2 py0.5 rounded border font-bold text-sm"
               >Update Available</span
             >
           </NuxtLink>
         </div>
 
-        <span v-else op-fade mt4 text-base> Not installed </span>
+        <span v-else class="op-fade mt4 text-base"> Not installed </span>
 
-        <div v-if="overview?.oxlint.installed" flex items-center gap-3 mt2>
-          <NuxtLink to="/lint/report" flex items-center gap-1 op-fade text-sm hover:color-active>
-            <div i-carbon-report />
+        <div v-if="overview?.oxlint.installed" class="flex items-center gap-3 mt2">
+          <NuxtLink
+            to="/lint/report"
+            class="flex items-center gap-1 op-fade text-sm hover:color-active"
+          >
+            <div class="i-carbon-report" />
             Reports
           </NuxtLink>
 
-          <NuxtLink to="/lint/config" flex items-center gap-1 op-fade text-sm hover:color-active>
-            <div i-carbon-settings />
+          <NuxtLink
+            to="/lint/config"
+            class="flex items-center gap-1 op-fade text-sm hover:color-active"
+          >
+            <div class="i-carbon-settings" />
             Config
           </NuxtLink>
 
           <a
             href="https://oxc.rs/docs/guide/usage/linter.html"
             target="_blank"
-            flex
-            items-center
-            gap-1
-            op-fade
-            text-sm
-            hover:color-active
+            class="flex items-center gap-1 op-fade text-sm hover:color-active"
           >
-            <div i-carbon-document />
+            <div class="i-carbon-document" />
             Docs
           </a>
         </div>
       </ContainerCard>
 
       <ContainerCard
-        w-70
-        flex="~ col"
-        items-center
-        justify-center
-        gap-3
-        py5
-        px4
-        transition-all
-        duration-300
-        hover:shadow-lg
-        dark:hover:shadow="[0_0_20px_rgba(255,255,255,0.1)]"
+        class="w-70 flex flex-col items-center justify-center gap-3 py5 px4 transition-all duration-300 hover:shadow-lg dark:hover:shadow-[0_0_20px_rgba(255,255,255,0.1)]"
       >
-        <div i-ph-code text-4xl op-fade />
-        <p text-xl mt2 font-medium color-base>oxfmt</p>
+        <div class="i-ph-code text-4xl op-fade" />
+        <p class="text-xl mt2 font-medium color-base">oxfmt</p>
 
         <a
           v-if="overview?.oxfmt.installed"
           :href="overview?.oxfmt.npmxLink"
           target="_blank"
-          op-fade
-          text-base
-          cursor-pointer
-          hover:color-active
+          class="op-fade text-base cursor-pointer hover:color-active"
         >
           v{{ overview?.oxfmt.version }}
         </a>
         <div v-if="overview?.oxfmt.installed">
           <span
             v-if="overview?.oxfmt.latest"
-            badge-color-green
-            px2
-            py0.5
-            rounded
-            border
-            font-bold
-            text-sm
+            class="badge-color-green px2 py0.5 rounded border font-bold text-sm"
             >Latest</span
           >
           <NuxtLink
             v-else
             to="https://npmx.dev/package/oxfmt/v/latest"
             target="_blank"
-            cursor-pointer
+            class="cursor-pointer"
           >
-            <span badge-color-amber px2 py0.5 rounded border font-bold text-sm
+            <span class="badge-color-amber px2 py0.5 rounded border font-bold text-sm"
               >Update Available</span
             >
           </NuxtLink>
         </div>
-        <span v-else op-fade mt4 text-base> Not installed </span>
+        <span v-else class="op-fade mt4 text-base"> Not installed </span>
 
-        <div v-if="overview?.oxfmt.installed" flex items-center gap-3 mt2>
-          <NuxtLink to="/fmt/config" flex items-center gap-1 op-fade text-sm hover:color-active>
-            <div i-carbon-settings />
+        <div v-if="overview?.oxfmt.installed" class="flex items-center gap-3 mt2">
+          <NuxtLink
+            to="/fmt/config"
+            class="flex items-center gap-1 op-fade text-sm hover:color-active"
+          >
+            <div class="i-carbon-settings" />
             Config
           </NuxtLink>
 
           <a
             href="https://oxc.rs/docs/guide/usage/formatter.html"
             target="_blank"
-            flex
-            items-center
-            gap-1
-            op-fade
-            text-sm
-            hover:color-active
+            class="flex items-center gap-1 op-fade text-sm hover:color-active"
           >
-            <div i-carbon-document />
+            <div class="i-carbon-document" />
             Docs
           </a>
         </div>
       </ContainerCard>
     </div>
 
-    <div flex="~ col md:row" items-center gap-6>
+    <div class="flex flex-col md:flex-row items-center gap-6">
       <a
         href="https://github.com/yuyinws/oxc-inspector"
         target="_blank"
-        flex
-        items-center
-        gap-1
-        op-fade
-        hover:color-active
+        class="flex items-center gap-1 op-fade hover:color-active"
       >
-        <div i-lucide-star />
+        <div class="i-lucide-star" />
         Star on GitHub
       </a>
       <a
         href="https://github.com/yuyinws/oxc-inspector/discussions/4"
         target="_blank"
-        flex
-        items-center
-        gap-1
-        op-fade
-        hover:color-active
+        class="flex items-center gap-1 op-fade hover:color-active"
       >
-        <div i-lucide-lightbulb />
+        <div class="i-lucide-lightbulb" />
         Ideas &amp; Suggestions
       </a>
 
       <a
         href="https://github.com/yuyinws/oxc-inspector/issues"
         target="_blank"
-        flex
-        items-center
-        gap-1
-        op-fade
-        hover:color-active
+        class="flex items-center gap-1 op-fade hover:color-active"
       >
-        <div i-lucide-bug />
+        <div class="i-lucide-bug" />
         Bug Reports
       </a>
     </div>
diff --git a/packages/oxc/src/app/pages/lint/config.vue b/packages/oxc/src/app/pages/lint/config.vue
index de6b0e11..154bedaa 100644
--- a/packages/oxc/src/app/pages/lint/config.vue
+++ b/packages/oxc/src/app/pages/lint/config.vue
@@ -239,18 +239,16 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div h="[calc(100vh-4rem)]" max-w-7xl p4 mx-auto>
+  <div class="h-[calc(100vh-4rem)] max-w-7xl p4 mx-auto">
     <Back to="/" />
-    <div flex="~ col lg:row" h-full border="~ base rounded-lg" of-hidden bg-base>
-      <div flex-1 min-h-0 min-w-0 border="b base lg:b-0 lg:r">
-        <div ref="editorRef" h-full min-h="200px lg:0" />
+    <div class="flex flex-col lg:flex-row h-full border border-base rounded-lg of-hidden bg-base">
+      <div class="flex-1 min-h-0 min-w-0 border-b border-base lg:border-b-0 lg:border-r">
+        <div ref="editorRef" class="h-full min-h-200px lg:min-h-0" />
       </div>
-      <div flex-1 min-h="200px lg:0" min-w-0 relative>
+      <div class="flex-1 min-h-200px lg:min-h-0 min-w-0 relative">
         <iframe
           :src="currentDocUrl"
-          w-full
-          h-full
-          border-0
+          class="w-full h-full border-0"
           sandbox="allow-same-origin allow-scripts"
           title="Rule documentation"
           @load="iframeLoading = false"
@@ -263,21 +261,10 @@ onBeforeUnmount(() => {
         >
           <div
             v-show="iframeLoading"
-            absolute
-            inset-0
-            flex
-            items-center
-            justify-center
-            bg-base
-            pointer-events-none
+            class="absolute inset-0 flex items-center justify-center bg-base pointer-events-none"
           >
             <span
-              size-8
-              animate-spin
-              rounded-full
-              border-2
-              border-base
-              border-t-primary-500
+              class="size-8 animate-spin rounded-full border-2 border-base border-t-primary-500"
               aria-hidden="true"
             />
           </div>
diff --git a/packages/oxc/src/app/pages/lint/report/[id].vue b/packages/oxc/src/app/pages/lint/report/[id].vue
index d962eb8b..79ff31b0 100644
--- a/packages/oxc/src/app/pages/lint/report/[id].vue
+++ b/packages/oxc/src/app/pages/lint/report/[id].vue
@@ -99,7 +99,7 @@ const showFiles = computed(() => !!filteredFiles.value && filteredFiles.value.le
     />
 
     <template v-else>
-      <div v-if="showFiles" grid="~ cols-1 lg:cols-2" gap-4>
+      <div v-if="showFiles" class="grid grid-cols-1 lg:grid-cols-2 gap-4">
         <FileCard v-for="file in filteredFiles" :key="file.filename" :file="file" />
       </div>
 
diff --git a/packages/oxc/src/app/pages/lint/report/index.vue b/packages/oxc/src/app/pages/lint/report/index.vue
index c09593bf..c5548597 100644
--- a/packages/oxc/src/app/pages/lint/report/index.vue
+++ b/packages/oxc/src/app/pages/lint/report/index.vue
@@ -24,15 +24,19 @@ const filteredSessionMetaList = computed(() => {
 </script>
 
 <template>
-  <div flex="~ col" gap-4>
+  <div class="flex flex-col gap-4">
     <Back />
-    <div flex justify-between items-center w-full>
-      <div flex items-center gap-2>
-        <button btn-action-sm cursor-pointer aria-label="Reload sessions" @click="reloadSessions()">
-          <div i-lucide-refresh-cw />
+    <div class="flex justify-between items-center w-full">
+      <div class="flex items-center gap-2">
+        <button
+          class="btn-action-sm cursor-pointer"
+          aria-label="Reload sessions"
+          @click="reloadSessions()"
+        >
+          <div class="i-lucide-refresh-cw" />
         </button>
 
-        <p op-fade>Select a lint session to get started:</p>
+        <p class="op-fade">Select a lint session to get started:</p>
       </div>
 
       <FormCheckbox v-model="hidePassed" label="Hide Passed" />
@@ -42,9 +46,14 @@ const filteredSessionMetaList = computed(() => {
       <SessionCard v-for="meta in filteredSessionMetaList" :key="meta.timestamp" :meta="meta" />
     </template>
 
-    <VisualEmptyState v-else w-full mt4 title="No sessions found" icon="i-ph-folder-simple-duotone">
+    <VisualEmptyState
+      v-else
+      class="w-full mt4"
+      title="No sessions found"
+      icon="i-ph-folder-simple-duotone"
+    >
       <template #description>
-        <div text-sm op-fade leading-7>
+        <div class="text-sm op-fade leading-7">
           <span>Oxc Inspector logs directory</span><code>.devtools-oxc</code> not found.
           <br />
           Run <code>npx @vitejs/devtools-oxc lint</code> to generate it first.
@@ -54,7 +63,7 @@ const filteredSessionMetaList = computed(() => {
             to="https://github.com/yuyinws/oxc-inspector"
             external
             target="_blank"
-            color-active
+            class="color-active"
           >
             https://github.com/yuyinws/oxc-inspector
           </NuxtLink>
diff --git a/packages/rolldown/src/app/app.vue b/packages/rolldown/src/app/app.vue
index 416cac52..d744db55 100644
--- a/packages/rolldown/src/app/app.vue
+++ b/packages/rolldown/src/app/app.vue
@@ -16,14 +16,14 @@ connect()
 </script>
 
 <template>
-  <div v-if="connectionState.error" text-red>
+  <div v-if="connectionState.error" class="text-red">
     {{ connectionState.error }}
   </div>
   <VisualLoading
     v-else-if="!connectionState.connected"
     text="Connecting..."
   />
-  <div v-else h-vh>
+  <div v-else class="h-vh">
     <NuxtPage />
   </div>
 </template>
diff --git a/packages/rolldown/src/app/components/assets/BaseInfo.vue b/packages/rolldown/src/app/components/assets/BaseInfo.vue
index 851c5ac8..28a3a5a7 100644
--- a/packages/rolldown/src/app/components/assets/BaseInfo.vue
+++ b/packages/rolldown/src/app/components/assets/BaseInfo.vue
@@ -8,10 +8,10 @@ defineProps<{
 </script>
 
 <template>
-  <div flex="~ gap-2 items-center">
-    <div i-catppuccin-java-class-abstract />
+  <div class="flex gap-2 items-center">
+    <div class="i-catppuccin-java-class-abstract" />
     <div>{{ asset.filename }}</div>
-    <DisplayFileSizeBadge :bytes="asset.size" text-sm />
+    <DisplayFileSizeBadge :bytes="asset.size" class="text-sm" />
     <DisplayBadge :text="asset.type" />
   </div>
 </template>
diff --git a/packages/rolldown/src/app/components/assets/Folder.vue b/packages/rolldown/src/app/components/assets/Folder.vue
index af319f1d..c5c48709 100644
--- a/packages/rolldown/src/app/components/assets/Folder.vue
+++ b/packages/rolldown/src/app/components/assets/Folder.vue
@@ -39,7 +39,7 @@ const assetTreeRoots = computed(() => [
     link-query-key="asset"
   >
     <template #extra="{ node }">
-      <span op50>
+      <span class="op50">
         ({{ assetsMap.get(node.full)?.chunk?.name?.replace(/[\[\]]/g, '') }})
       </span>
     </template>
diff --git a/packages/rolldown/src/app/components/assets/List.vue b/packages/rolldown/src/app/components/assets/List.vue
index b62462da..9cf46446 100644
--- a/packages/rolldown/src/app/components/assets/List.vue
+++ b/packages/rolldown/src/app/components/assets/List.vue
@@ -15,7 +15,7 @@ withDefaults(defineProps<{
 </script>
 
 <template>
-  <div p4>
+  <div class="p4">
     <DataVirtualList
       :items="assets"
       key-prop="filename"
@@ -24,7 +24,7 @@ withDefaults(defineProps<{
       :scroller="scroller"
     >
       <template #default="{ item }">
-        <div h-10 flex>
+        <div class="h-10 flex">
           <AssetsListItem :asset="item" />
         </div>
       </template>
diff --git a/packages/rolldown/src/app/components/assets/ListItem.vue b/packages/rolldown/src/app/components/assets/ListItem.vue
index 9b32a63c..692c25cc 100644
--- a/packages/rolldown/src/app/components/assets/ListItem.vue
+++ b/packages/rolldown/src/app/components/assets/ListItem.vue
@@ -9,13 +9,13 @@ defineProps<{
 <template>
   <NuxtLink
     :to="{ query: { asset: asset.filename } }"
-    block h-8 w-full min-w-0 overflow-hidden font-mono border="~ rounded base" px2 py1 text-sm hover="bg-active"
+    class="block h-8 w-full min-w-0 overflow-hidden font-mono border rounded border-base px2 py1 text-sm hover:bg-active"
   >
-    <div h-full min-w-0 flex="~ gap-1 items-center">
-      <DisplayFileIcon :filename="asset.filename" flex-none />
-      <span min-w-0 overflow-hidden text-ellipsis whitespace-nowrap>
+    <div class="h-full min-w-0 flex gap-1 items-center">
+      <DisplayFileIcon :filename="asset.filename" class="flex-none" />
+      <span class="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap">
         {{ asset.filename }}
-        <span op50>
+        <span class="op50">
           ({{ asset.chunk?.name?.replace(/[\[\]]/g, '') }})
         </span>
       </span>
diff --git a/packages/rolldown/src/app/components/assets/Sunburst.vue b/packages/rolldown/src/app/components/assets/Sunburst.vue
index 3263de0c..a2056f40 100644
--- a/packages/rolldown/src/app/components/assets/Sunburst.vue
+++ b/packages/rolldown/src/app/components/assets/Sunburst.vue
@@ -19,44 +19,42 @@ watchEffect(() => el.value?.append(props.graph.el))
 </script>
 
 <template>
-  <div grid="~ cols-[max-content_1fr] gap-2" p4>
-    <div ref="el" w-500px />
-    <div flex="~ col gap-4">
+  <div class="grid grid-cols-[max-content_1fr] gap-2 p4">
+    <div ref="el" class="w-500px" />
+    <div class="flex flex-col gap-4">
       <ChartNavBreadcrumb
-        border="b base" py2
+        class="border-b border-base py2"
         :selected="selected"
         :options="graph.options"
         @select="emit('select', $event)"
       />
-      <div v-if="selected" grid="~ cols-[250px_1fr] gap-1">
+      <div v-if="selected" class="grid grid-cols-[250px_1fr] gap-1">
         <template v-for="child of selected.children" :key="child.id">
           <button
-            ws-nowrap text-nowrap text-left overflow-hidden text-ellipsis text-sm
-            hover="bg-active" rounded px2
+            class="ws-nowrap text-nowrap text-left overflow-hidden text-ellipsis text-sm hover:bg-active rounded px2"
             @click="emit('select', child)"
           >
-            <span v-if="child.meta && child.meta === selected?.meta" text-primary>(self)</span>
+            <span v-if="child.meta && child.meta === selected?.meta" class="text-primary">(self)</span>
             <span v-else>{{ child.id }}</span>
           </button>
 
           <button
-            relative flex="~ gap-1 items-center"
-            hover="bg-active" rounded
+            class="relative flex gap-1 items-center hover:bg-active rounded"
             @click="emit('select', child)"
           >
             <div
-              h-5 rounded shadow border="~ base"
+              class="h-5 rounded shadow border border-base"
               :style="{
                 background: colorToCssBackground(graph.options.getColor?.(child) || '#000'),
                 width: `${child.size / selected.size * 100}%`,
               }"
             />
-            <DisplayFileSizeBadge text-xs :bytes="child.size" :total="selected.size" :percent-ratio="3" />
+            <DisplayFileSizeBadge class="text-xs" :bytes="child.size" :total="selected.size" :percent-ratio="3" />
             <div
               v-if="child.children.length > 0"
               v-tooltip="`${child.children.length} dependencies`"
               :title="`${child.children.length} dependencies`"
-              text-xs op-fade
+              class="text-xs op-fade"
             >
               ({{ child.children.length }})
             </div>
diff --git a/packages/rolldown/src/app/components/chart/ModuleFlamegraph.vue b/packages/rolldown/src/app/components/chart/ModuleFlamegraph.vue
index b0b33e4e..3fea9a06 100644
--- a/packages/rolldown/src/app/components/chart/ModuleFlamegraph.vue
+++ b/packages/rolldown/src/app/components/chart/ModuleFlamegraph.vue
@@ -135,41 +135,38 @@ watch(() => props.flowNodeSelected, async () => {
 </script>
 
 <template>
-  <div relative border="t base" pb10 py1 mt4>
+  <div class="relative border-t border-base pb10 py1 mt4">
     <DisplayGraphHoverView :hover-x="hoverX" :hover-y="hoverY">
       <div
         v-if="hoverNode"
-        border="~ base" rounded-lg shadow-lg px3 py2
-        bg-glass pointer-events-none text-sm max-w-80
+        class="border border-base rounded-lg shadow-lg px3 py2 bg-glass pointer-events-none text-sm max-w-80"
       >
-        <div font-semibold font-mono text-base mb2>
+        <div class="font-semibold font-mono text-base mb2">
           {{ hoverNode.plugin_name }}
         </div>
-        <div v-if="hoverNode.meta" border="t base" pt2 flex="~ col gap-1.5" min-w-48>
-          <div flex="~ justify-between items-center" py1>
-            <label text-xs opacity-70>Start Time</label>
+        <div v-if="hoverNode.meta" class="border-t border-base pt2 flex flex-col gap-1.5 min-w-48">
+          <div class="flex justify-between items-center py1">
+            <label class="text-xs opacity-70">Start Time</label>
             <time
               :datetime="new Date(hoverNode.meta.timestamp_start).toISOString()"
-              font-mono text="xs"
+              class="font-mono text-xs px1.5 py0.5 rounded"
               bg="base/10"
-              px1.5 py0.5 rounded
             >
               {{ normalizeTimestamp(hoverNode.meta.timestamp_start) }}
             </time>
           </div>
-          <div flex="~ justify-between items-center" py1>
-            <label text-xs opacity-70>End Time</label>
+          <div class="flex justify-between items-center py1">
+            <label class="text-xs opacity-70">End Time</label>
             <time
               :datetime="new Date(hoverNode.meta.timestamp_end).toISOString()"
-              font-mono text="xs"
+              class="font-mono text-xs px1.5 py0.5 rounded"
               bg="base/10"
-              px1.5 py0.5 rounded
             >
               {{ normalizeTimestamp(hoverNode.meta.timestamp_end) }}
             </time>
           </div>
-          <div flex="~ justify-between items-center" py1 border="t base dashed" pt2>
-            <label text="xs" op70>Duration</label>
+          <div class="flex justify-between items-center py1 border-t border-base border-dashed pt2">
+            <label class="text-xs op70">Duration</label>
             <DisplayDuration :duration="hoverNode.duration" />
           </div>
         </div>
@@ -178,6 +175,6 @@ watch(() => props.flowNodeSelected, async () => {
         </div>
       </div>
     </DisplayGraphHoverView>
-    <div ref="el" min-h-30 />
+    <div ref="el" class="min-h-30" />
   </div>
 </template>
diff --git a/packages/rolldown/src/app/components/chart/Treemap.vue b/packages/rolldown/src/app/components/chart/Treemap.vue
index fd6dd1a7..f09acbb8 100644
--- a/packages/rolldown/src/app/components/chart/Treemap.vue
+++ b/packages/rolldown/src/app/components/chart/Treemap.vue
@@ -16,13 +16,13 @@ watchEffect(() => el.value?.append(props.graph.el))
 </script>
 
 <template>
-  <div class="px4" flex="~ col gap2">
+  <div class="px4 flex flex-col gap2">
     <slot
       :selected="selected"
       :options="graph.options"
       @select="(node: N | null) => emit('select', node)"
     >
-      <div border="b base" py2 min-h-10 />
+      <div class="border-b border-base py2 min-h-10" />
     </slot>
     <div ref="el" />
   </div>
diff --git a/packages/rolldown/src/app/components/chunks/BaseInfo.vue b/packages/rolldown/src/app/components/chunks/BaseInfo.vue
index 0a9ffbe7..804f179d 100644
--- a/packages/rolldown/src/app/components/chunks/BaseInfo.vue
+++ b/packages/rolldown/src/app/components/chunks/BaseInfo.vue
@@ -22,27 +22,27 @@ const normalizedModules = computed(() => Array.isArray(props.chunk.modules) ? pr
   <component
     :is="link ? NuxtLink : 'div'"
     :to="link ? (typeof link === 'string' ? link : { path: route.path, query: { chunk: chunk.chunk_id } }) : undefined"
-    flex="~ gap-3 items-center"
+    class="flex gap-3 items-center"
   >
-    <div flex="~ gap-2 items-center" :title="`Chunk #${chunk.chunk_id}`">
+    <div class="flex gap-2 items-center" :title="`Chunk #${chunk.chunk_id}`">
       <slot name="icon">
-        <div i-ph-shapes-duotone />
+        <div class="i-ph-shapes-duotone" />
       </slot>
       <div>{{ chunk.name || '[unnamed]' }}</div>
       <DisplayBadge :text="chunk.reason" />
       <slot name="left-after" />
     </div>
 
-    <div flex-auto />
+    <div class="flex-auto" />
 
-    <div v-if="!basic" flex="~ items-center gap-2">
-      <span op50 font-mono>#{{ chunk.chunk_id }}</span>
-      <div flex="~ gap-1 items-center" :title="`${normalizedImports} imports`">
-        <div i-ph-file-arrow-up-duotone />
+    <div v-if="!basic" class="flex items-center gap-2">
+      <span class="op50 font-mono">#{{ chunk.chunk_id }}</span>
+      <div class="flex gap-1 items-center" :title="`${normalizedImports} imports`">
+        <div class="i-ph-file-arrow-up-duotone" />
         {{ normalizedImports }}
       </div>
-      <div flex="~ gap-1 items-center" :title="`${normalizedModules} modules`">
-        <div i-ph-package-duotone />
+      <div class="flex gap-1 items-center" :title="`${normalizedModules} modules`">
+        <div class="i-ph-package-duotone" />
         {{ normalizedModules }}
       </div>
     </div>
diff --git a/packages/rolldown/src/app/components/chunks/FlatList.vue b/packages/rolldown/src/app/components/chunks/FlatList.vue
index ae5f3523..3d3ca08c 100644
--- a/packages/rolldown/src/app/components/chunks/FlatList.vue
+++ b/packages/rolldown/src/app/components/chunks/FlatList.vue
@@ -32,8 +32,8 @@ const emit = defineEmits<{
     :scroller="scroller"
   >
     <template #default="{ item }">
-      <div flex pb2 @click="emit('select', item)">
-        <ChunksBaseInfo :chunk="item" :basic="basic" :link="link" w-full font-mono border="~ rounded base" px2 py1 text-sm hover="bg-active" flex="~ gap-4 items-center">
+      <div class="flex pb2" @click="emit('select', item)">
+        <ChunksBaseInfo :chunk="item" :basic="basic" :link="link" class="w-full font-mono border rounded border-base px2 py1 text-sm hover:bg-active flex gap-4 items-center">
           <template #left-after>
             <DisplayBadge v-if="item.is_initial" text="initial" />
           </template>
diff --git a/packages/rolldown/src/app/components/chunks/Graph.vue b/packages/rolldown/src/app/components/chunks/Graph.vue
index 82f9703c..8d133ed1 100644
--- a/packages/rolldown/src/app/components/chunks/Graph.vue
+++ b/packages/rolldown/src/app/components/chunks/Graph.vue
@@ -202,15 +202,15 @@ createModuleGraph<ChunkInfo, ChunkImport>({
   >
     <template #default="{ node }">
       <NuxtLink class="flex items-center" :to="{ path: route.path, query: { chunk: node.data.module.chunk_id } }">
-        <span op50 font-mono w12>#{{ node.data.module.id }}</span>
-        <div flex="~ gap-2 items-center" :title="`Chunk #${node.data.module.id}`">
+        <span class="op50 font-mono w12">#{{ node.data.module.id }}</span>
+        <div class="flex gap-2 items-center" :title="`Chunk #${node.data.module.id}`">
           <div>{{ node.data.module.name || '[unnamed]' }}</div>
           <DisplayBadge :text="node.data.module.reason" />
           <DisplayBadge v-if="node.data.module.is_initial" text="initial" />
         </div>
-        <div flex-auto />
-        <div flex="~ gap-1 items-center">
-          <div i-ph-package-duotone />
+        <div class="flex-auto" />
+        <div class="flex gap-1 items-center">
+          <div class="i-ph-package-duotone" />
           {{ node.data.module.modules.length }}
         </div>
       </NuxtLink>
diff --git a/packages/rolldown/src/app/components/chunks/Imports.vue b/packages/rolldown/src/app/components/chunks/Imports.vue
index 97484b08..ebdd9a95 100644
--- a/packages/rolldown/src/app/components/chunks/Imports.vue
+++ b/packages/rolldown/src/app/components/chunks/Imports.vue
@@ -8,13 +8,13 @@ defineProps<{
 </script>
 
 <template>
-  <DisplayExpandableContainer flex="~ col gap-1" mt2 ws-nowrap :list="imports">
+  <DisplayExpandableContainer class="flex flex-col gap-1 mt2 ws-nowrap" :list="imports">
     <template #default="{ items }">
       <template v-for="(chunk, index) in items" :key="index">
-        <ChunksBaseInfo v-if="chunk" :chunk="chunk" link hover="bg-active" border="~ base rounded" px2 py1 w-full>
+        <ChunksBaseInfo v-if="chunk" :chunk="chunk" link class="hover:bg-active border border-base rounded px2 py1 w-full">
           <template #icon>
-            <div v-if="chunk.kind === 'import-statement'" i-ph-file-duotone />
-            <div v-if="chunk.kind === 'dynamic-import'" i-ph-lightning-duotone />
+            <div v-if="chunk.kind === 'import-statement'" class="i-ph-file-duotone" />
+            <div v-if="chunk.kind === 'dynamic-import'" class="i-ph-lightning-duotone" />
           </template>
           <template #left-after>
             <DisplayBadge :text="chunk.kind" />
diff --git a/packages/rolldown/src/app/components/chunks/Sunburst.vue b/packages/rolldown/src/app/components/chunks/Sunburst.vue
index 4e339df0..285a8811 100644
--- a/packages/rolldown/src/app/components/chunks/Sunburst.vue
+++ b/packages/rolldown/src/app/components/chunks/Sunburst.vue
@@ -19,44 +19,42 @@ watchEffect(() => el.value?.append(props.graph.el))
 </script>
 
 <template>
-  <div grid="~ cols-[max-content_1fr] gap-2" p4>
-    <div ref="el" w-500px />
-    <div flex="~ col gap-4">
+  <div class="grid grid-cols-[max-content_1fr] gap-2 p4">
+    <div ref="el" class="w-500px" />
+    <div class="flex flex-col gap-4">
       <ChartNavBreadcrumb
-        border="b base" py2
+        class="border-b border-base py2"
         :selected="selected"
         :options="graph.options"
         @select="emit('select', $event)"
       />
-      <div v-if="selected" grid="~ cols-[250px_1fr] gap-1">
+      <div v-if="selected" class="grid grid-cols-[250px_1fr] gap-1">
         <template v-for="child of selected.children" :key="child.id">
           <button
-            ws-nowrap text-nowrap text-left overflow-hidden text-ellipsis text-sm
-            hover="bg-active" rounded px2
+            class="ws-nowrap text-nowrap text-left overflow-hidden text-ellipsis text-sm hover:bg-active rounded px2"
             @click="emit('select', child)"
           >
-            <span v-if="child.meta && child.meta === selected?.meta" text-primary>(self)</span>
+            <span v-if="child.meta && child.meta === selected?.meta" class="text-primary">(self)</span>
             <span v-else>{{ child.meta?.name || child.id }}</span>
           </button>
 
           <button
-            relative flex="~ gap-1 items-center"
-            hover="bg-active" rounded
+            class="relative flex gap-1 items-center hover:bg-active rounded"
             @click="emit('select', child)"
           >
             <div
-              h-5 rounded shadow border="~ base"
+              class="h-5 rounded shadow border border-base"
               :style="{
                 background: colorToCssBackground(graph.options.getColor?.(child) || '#000'),
                 width: `${child.size / selected.size * 100}%`,
               }"
             />
-            <DisplayFileSizeBadge text-xs :bytes="child.size" :total="selected.size" :percent-ratio="3" />
+            <DisplayFileSizeBadge class="text-xs" :bytes="child.size" :total="selected.size" :percent-ratio="3" />
             <div
               v-if="child.children.length > 0"
               v-tooltip="`${child.children.length} modules`"
               :title="`${child.children.length} modules`"
-              text-xs op-fade
+              class="text-xs op-fade"
             >
               ({{ child.children.length }})
             </div>
diff --git a/packages/rolldown/src/app/components/compare/DeltaValue.vue b/packages/rolldown/src/app/components/compare/DeltaValue.vue
index 59990da4..aa5a0770 100644
--- a/packages/rolldown/src/app/components/compare/DeltaValue.vue
+++ b/packages/rolldown/src/app/components/compare/DeltaValue.vue
@@ -58,7 +58,7 @@ const formatted = computed(() => {
 </script>
 
 <template>
-  <span font-mono ws-nowrap :class="colorClass">
-    {{ sign }}{{ formatted.amount }}<span v-if="formatted.unit" text-xs op75 ml-0.5>{{ formatted.unit }}</span>
+  <span class="font-mono ws-nowrap" :class="colorClass">
+    {{ sign }}{{ formatted.amount }}<span v-if="formatted.unit" class="text-xs op75 ml-0.5">{{ formatted.unit }}</span>
   </span>
 </template>
diff --git a/packages/rolldown/src/app/components/compare/MetricCard.vue b/packages/rolldown/src/app/components/compare/MetricCard.vue
index a176ce0a..be58b5db 100644
--- a/packages/rolldown/src/app/components/compare/MetricCard.vue
+++ b/packages/rolldown/src/app/components/compare/MetricCard.vue
@@ -19,17 +19,17 @@ const formattedCurrent = computed(() => {
 </script>
 
 <template>
-  <div font-500 op50 text-4 flex="~ items-center gap-2" :title="description">
+  <div class="font-500 op50 text-4 flex items-center gap-2" :title="description">
     <div :class="icon" class="text-xl" />
     {{ name }}
   </div>
-  <div flex="~ gap-2" items-center>
+  <div class="flex gap-2 items-center">
     <div v-if="format === 'bytes'">
-      <span font-semibold text-5 font-mono>{{ (formattedCurrent as Array<number | string>)[0] }}</span>
-      <span font-semibold text-4 font-mono>{{ (formattedCurrent as Array<number | string>)[1] }}</span>
+      <span class="font-semibold text-5 font-mono">{{ (formattedCurrent as Array<number | string>)[0] }}</span>
+      <span class="font-semibold text-4 font-mono">{{ (formattedCurrent as Array<number | string>)[1] }}</span>
     </div>
     <div v-else>
-      <span font-semibold text-5 font-mono>{{ formattedCurrent }}</span>
+      <span class="font-semibold text-5 font-mono">{{ formattedCurrent }}</span>
     </div>
     <DisplayComparisonMetric v-if="previous > 0 && current > 0" :current="current" :previous="previous" />
   </div>
diff --git a/packages/rolldown/src/app/components/compare/SessionMeta.vue b/packages/rolldown/src/app/components/compare/SessionMeta.vue
index 19e3f5fc..45d44918 100644
--- a/packages/rolldown/src/app/components/compare/SessionMeta.vue
+++ b/packages/rolldown/src/app/components/compare/SessionMeta.vue
@@ -13,14 +13,14 @@ defineProps<{
 </script>
 
 <template>
-  <div flex="~ gap5" w-full border="b base" pb3>
-    <div v-for="(item, index) of sessions" :key="item.id" flex-1 border="~ base rounded" p4 grid="~ cols-[max-content_140px_2fr] max-lg:cols-[max-content_80px_2fr] gap-2 items-center">
+  <div class="flex gap5 w-full border-b border-base pb3">
+    <div v-for="(item, index) of sessions" :key="item.id" class="flex-1 border border-base rounded p4 grid grid-cols-[max-content_140px_2fr] max-lg:grid-cols-[max-content_80px_2fr] gap-2 items-center">
       <!-- session meta -->
       <div class="i-ph-hash-duotone" />
       <div>
         {{ item.title }}
       </div>
-      <div font-mono>
+      <div class="font-mono">
         <span>{{ item.id }}</span>
       </div>
       <!-- created at meta -->
@@ -28,18 +28,18 @@ defineProps<{
       <div>
         Created At
       </div>
-      <div font-mono>
+      <div class="font-mono">
         <time :datetime="item.createdAt.toISOString()">{{ item.createdAt.toLocaleString() }}</time>
       </div>
 
-      <div v-if="summaries?.[index]?.length" col-span-3 border="t base" mt2 pt3 flex="~ items-center gap-4 wrap">
-        <div v-for="summary of summaries?.[index] || []" :key="summary.label" flex="~ items-center gap-2">
-          <div :class="summary.icon" op50 />
-          <div text-xs op50>
+      <div v-if="summaries?.[index]?.length" class="col-span-3 border-t border-base mt2 pt3 flex items-center gap-4 flex-wrap">
+        <div v-for="summary of summaries?.[index] || []" :key="summary.label" class="flex items-center gap-2">
+          <div :class="summary.icon" class="op50" />
+          <div class="text-xs op50">
             {{ summary.label }}
           </div>
           <div
-            font-mono font-600
+            class="font-mono font-600"
             :class="summary.tone === 'increase' ? 'text-red-500' : summary.tone === 'decrease' ? 'text-green-500' : undefined"
           >
             {{ summary.value }}
diff --git a/packages/rolldown/src/app/components/compare/SingleSideRow.vue b/packages/rolldown/src/app/components/compare/SingleSideRow.vue
index b64c75be..ad018de7 100644
--- a/packages/rolldown/src/app/components/compare/SingleSideRow.vue
+++ b/packages/rolldown/src/app/components/compare/SingleSideRow.vue
@@ -25,24 +25,24 @@ withDefaults(defineProps<{
 </script>
 
 <template>
-  <div border="~ base rounded" p4 flex="~ col gap-3" hover="bg-active">
-    <div flex="~ items-start gap-3">
-      <div min-w-0 flex-1>
-        <div text-xs op50 mb1>
+  <div class="border border-base rounded p4 flex flex-col gap-3 hover:bg-active">
+    <div class="flex items-start gap-3">
+      <div class="min-w-0 flex-1">
+        <div class="text-xs op50 mb1">
           {{ sessionLabel }}
         </div>
-        <div flex="~ items-baseline gap-2" min-w-0 font-mono :title="titleMeta ? `${title} (${titleMeta})` : title">
-          <span truncate>{{ title }}</span>
-          <span v-if="titleMeta" flex-none op50>({{ titleMeta }})</span>
+        <div class="flex items-baseline gap-2 min-w-0 font-mono" :title="titleMeta ? `${title} (${titleMeta})` : title">
+          <span class="truncate">{{ title }}</span>
+          <span v-if="titleMeta" class="flex-none op50">({{ titleMeta }})</span>
         </div>
-        <div v-if="subtitle" truncate text-xs op55 mt1 :title="subtitle">
+        <div v-if="subtitle" class="truncate text-xs op55 mt1" :title="subtitle">
           {{ subtitle }}
         </div>
       </div>
       <CompareDeltaValue :value="delta" :format="format" signed />
     </div>
 
-    <div v-if="badges.length || stats.length" flex="~ items-center gap-2 wrap" text-xs>
+    <div v-if="badges.length || stats.length" class="flex items-center gap-2 flex-wrap text-xs">
       <DisplayBadge v-for="badge of badges" :key="badge" :text="badge" />
       <CompareStatsStrip :stats="stats" />
     </div>
diff --git a/packages/rolldown/src/app/components/compare/SplitRow.vue b/packages/rolldown/src/app/components/compare/SplitRow.vue
index 5aa4eb30..b22b6182 100644
--- a/packages/rolldown/src/app/components/compare/SplitRow.vue
+++ b/packages/rolldown/src/app/components/compare/SplitRow.vue
@@ -43,73 +43,73 @@ const ratioClass = computed(() => {
 </script>
 
 <template>
-  <div border="~ base rounded" of-hidden hover="bg-active">
-    <div border="b base" bg-base p3 flex="~ items-center justify-end">
-      <div flex="~ items-center gap-2 wrap justify-end">
+  <div class="border border-base rounded of-hidden hover:bg-active">
+    <div class="border-b border-base bg-base p3 flex items-center justify-end">
+      <div class="flex items-center gap-2 flex-wrap justify-end">
         <CompareDeltaValue :value="delta" :format="format" signed />
-        <span v-if="ratioText" rounded bg-active px2 py0.5 font-mono text-xs :class="ratioClass">
+        <span v-if="ratioText" class="rounded bg-active px2 py0.5 font-mono text-xs" :class="ratioClass">
           {{ ratioText }}
         </span>
       </div>
     </div>
 
-    <div grid="~ cols-2" min-h-30>
-      <div p4 min-w-0 flex="~ col gap-3 justify-between" :class="{ op35: !previousTitle }">
+    <div class="grid grid-cols-2 min-h-30">
+      <div class="p4 min-w-0 flex flex-col gap-3 justify-between" :class="{ op35: !previousTitle }">
         <template v-if="previousTitle">
-          <div min-w-0>
-            <div flex="~ items-center gap-2" text-xs op50 mb2>
-              <span i-ph-clock-counter-clockwise-duotone />
+          <div class="min-w-0">
+            <div class="flex items-center gap-2 text-xs op50 mb2">
+              <span class="i-ph-clock-counter-clockwise-duotone" />
               Session A
             </div>
-            <div flex="~ items-baseline gap-2" min-w-0 font-mono font-600 :title="previousTitleMeta ? `${previousTitle} (${previousTitleMeta})` : previousTitle">
-              <span truncate>{{ previousTitle }}</span>
-              <span v-if="previousTitleMeta" flex-none font-400 op50>({{ previousTitleMeta }})</span>
+            <div class="flex items-baseline gap-2 min-w-0 font-mono font-600" :title="previousTitleMeta ? `${previousTitle} (${previousTitleMeta})` : previousTitle">
+              <span class="truncate">{{ previousTitle }}</span>
+              <span v-if="previousTitleMeta" class="flex-none font-400 op50">({{ previousTitleMeta }})</span>
             </div>
-            <div v-if="previousSubtitle" truncate text-xs op50 mt1 :title="previousSubtitle">
+            <div v-if="previousSubtitle" class="truncate text-xs op50 mt1" :title="previousSubtitle">
               {{ previousSubtitle }}
             </div>
           </div>
-          <div flex="~ items-end gap-3 justify-between">
-            <div min-w-0 flex="~ items-center gap-2 wrap">
+          <div class="flex items-end gap-3 justify-between">
+            <div class="min-w-0 flex items-center gap-2 flex-wrap">
               <DisplayBadge v-for="badge of previousBadges" :key="badge" :text="badge" />
               <CompareStatsStrip :stats="previousStats" />
             </div>
-            <span text-lg font-600>
+            <span class="text-lg font-600">
               <CompareDeltaValue :value="previous" :format="format" />
             </span>
           </div>
         </template>
-        <div v-else h-full min-h-16 flex="~ items-center justify-center" text-sm italic op60>
+        <div v-else class="h-full min-h-16 flex items-center justify-center text-sm italic op60">
           Not present
         </div>
       </div>
 
-      <div border="l base" p4 min-w-0 flex="~ col gap-3 justify-between" :class="{ op35: !currentTitle }">
+      <div class="border-l border-base p4 min-w-0 flex flex-col gap-3 justify-between" :class="{ op35: !currentTitle }">
         <template v-if="currentTitle">
-          <div min-w-0>
-            <div flex="~ items-center gap-2" text-xs op50 mb2>
-              <span i-ph-clock-duotone />
+          <div class="min-w-0">
+            <div class="flex items-center gap-2 text-xs op50 mb2">
+              <span class="i-ph-clock-duotone" />
               Session B
             </div>
-            <div flex="~ items-baseline gap-2" min-w-0 font-mono font-600 :title="currentTitleMeta ? `${currentTitle} (${currentTitleMeta})` : currentTitle">
-              <span truncate>{{ currentTitle }}</span>
-              <span v-if="currentTitleMeta" flex-none font-400 op50>({{ currentTitleMeta }})</span>
+            <div class="flex items-baseline gap-2 min-w-0 font-mono font-600" :title="currentTitleMeta ? `${currentTitle} (${currentTitleMeta})` : currentTitle">
+              <span class="truncate">{{ currentTitle }}</span>
+              <span v-if="currentTitleMeta" class="flex-none font-400 op50">({{ currentTitleMeta }})</span>
             </div>
-            <div v-if="currentSubtitle" truncate text-xs op50 mt1 :title="currentSubtitle">
+            <div v-if="currentSubtitle" class="truncate text-xs op50 mt1" :title="currentSubtitle">
               {{ currentSubtitle }}
             </div>
           </div>
-          <div flex="~ items-end gap-3 justify-between">
-            <div min-w-0 flex="~ items-center gap-2 wrap">
+          <div class="flex items-end gap-3 justify-between">
+            <div class="min-w-0 flex items-center gap-2 flex-wrap">
               <DisplayBadge v-for="badge of currentBadges" :key="badge" :text="badge" />
               <CompareStatsStrip :stats="currentStats" />
             </div>
-            <span text-lg font-600>
+            <span class="text-lg font-600">
               <CompareDeltaValue :value="current" :format="format" />
             </span>
           </div>
         </template>
-        <div v-else h-full min-h-16 flex="~ items-center justify-center" text-sm italic op60>
+        <div v-else class="h-full min-h-16 flex items-center justify-center text-sm italic op60">
           Not present
         </div>
       </div>
diff --git a/packages/rolldown/src/app/components/compare/StatsStrip.vue b/packages/rolldown/src/app/components/compare/StatsStrip.vue
index d470c47c..c7906e99 100644
--- a/packages/rolldown/src/app/components/compare/StatsStrip.vue
+++ b/packages/rolldown/src/app/components/compare/StatsStrip.vue
@@ -18,17 +18,17 @@ const visibleStats = computed(() => props.stats.filter(stat => !stat.hidden))
 </script>
 
 <template>
-  <div v-if="visibleStats.length" flex="~ items-baseline gap-1.5 wrap" min-w-0 text-xs>
+  <div v-if="visibleStats.length" class="flex items-baseline gap-1.5 flex-wrap min-w-0 text-xs">
     <template v-for="(stat, index) of visibleStats" :key="stat.label">
-      <span v-if="index" op35>&middot;</span>
-      <span inline-flex items-baseline gap-1>
+      <span v-if="index" class="op35">&middot;</span>
+      <span class="inline-flex items-baseline gap-1">
         <span
-          font-mono font-600
+          class="font-mono font-600"
           :class="stat.tone === 'increase' ? 'text-red-500' : stat.tone === 'decrease' ? 'text-green-500' : 'op85'"
         >
           {{ stat.value }}
         </span>
-        <span op55>{{ stat.label }}</span>
+        <span class="op55">{{ stat.label }}</span>
       </span>
     </template>
   </div>
diff --git a/packages/rolldown/src/app/components/compare/TabView.vue b/packages/rolldown/src/app/components/compare/TabView.vue
index 1dcd88c4..d45ce450 100644
--- a/packages/rolldown/src/app/components/compare/TabView.vue
+++ b/packages/rolldown/src/app/components/compare/TabView.vue
@@ -568,50 +568,46 @@ function sumDelta(rows: SplitDiffRow[]) {
 </script>
 
 <template>
-  <div flex="~ col" border="~ base rounded-lg" p3 min-h-0 flex-1>
-    <div py3 px2 flex="~ items-center gap-2">
+  <div class="flex flex-col border border-base rounded-lg p3 min-h-0 flex-1">
+    <div class="py3 px2 flex items-center gap-2">
       <div :class="activeTabMeta?.icon" />
       {{ activeTabMeta?.label }}
     </div>
     <CompareSessionMeta :sessions="props.sessions" :summaries="sessionSummaries" />
 
-    <div flex-1 min-h-0 of-auto pt3>
+    <div class="flex-1 min-h-0 of-auto pt3">
       <template v-if="props.tab === 'overview'">
-        <div grid="~ cols-6 gap5" w-full>
-          <div v-for="(item, index) of comparisonMetrics" :key="item.name" :class="index < 2 ? 'col-span-3' : 'col-span-2'" border="~ base rounded" p4 flex="~ col" gap2>
+        <div class="grid grid-cols-6 gap5 w-full">
+          <div v-for="(item, index) of comparisonMetrics" :key="item.name" :class="index < 2 ? 'col-span-3' : 'col-span-2'" class="border border-base rounded p4 flex flex-col gap2">
             <CompareMetricCard v-bind="item" />
           </div>
         </div>
       </template>
 
       <template v-else>
-        <div flex="~ col gap-4">
-          <div grid="~ cols-3 gap-3">
+        <div class="flex flex-col gap-4">
+          <div class="grid grid-cols-3 gap-3">
             <button
               v-for="item of diffModeOptions"
               :key="item.id"
               type="button"
-              border="~ rounded"
-              p4
-              text-left
-              flex="~ col gap-3"
-              transition
+              class="border rounded p4 text-left flex flex-col gap-3 transition"
               :title="item.description"
               :class="activeDiffMode === item.id ? 'border-active bg-active' : 'border-base hover:bg-active'"
               @click="activeDiffMode = item.id"
             >
-              <div flex="~ items-center gap-2" text-sm>
-                <span :class="item.icon" op60 />
-                <span font-600>{{ item.label }}</span>
+              <div class="flex items-center gap-2 text-sm">
+                <span :class="item.icon" class="op60" />
+                <span class="font-600">{{ item.label }}</span>
               </div>
-              <div flex="~ items-end gap-2">
-                <span text-3xl font-mono font-600>{{ item.count }}</span>
+              <div class="flex items-end gap-2">
+                <span class="text-3xl font-mono font-600">{{ item.count }}</span>
                 <CompareDeltaValue v-if="item.delta" :value="item.delta" :format="activeDiffFormat" signed />
               </div>
             </button>
           </div>
 
-          <section v-if="activeDiffOption" flex="~ col gap-2">
+          <section v-if="activeDiffOption" class="flex flex-col gap-2">
             <template v-if="activeDiffMode === 'changed'">
               <CompareSplitRow
                 v-for="row of activeDiffOption.rows"
@@ -635,7 +631,7 @@ function sumDelta(rows: SplitDiffRow[]) {
             </template>
 
             <template v-else-if="activeDiffMode === 'added'">
-              <div grid="~ cols-2 gap-3">
+              <div class="grid grid-cols-2 gap-3">
                 <CompareSingleSideRow
                   v-for="row of activeDiffOption.rows"
                   :key="row.key"
@@ -652,7 +648,7 @@ function sumDelta(rows: SplitDiffRow[]) {
             </template>
 
             <template v-else>
-              <div grid="~ cols-2 gap-3">
+              <div class="grid grid-cols-2 gap-3">
                 <CompareSingleSideRow
                   v-for="row of activeDiffOption.rows"
                   :key="row.key"
@@ -669,7 +665,7 @@ function sumDelta(rows: SplitDiffRow[]) {
             </template>
           </section>
 
-          <div v-if="!activeDiffRows.length" h40 flex="~ items-center justify-center" op50 italic>
+          <div v-if="!activeDiffRows.length" class="h40 flex items-center justify-center op50 italic">
             {{ activeDiffEmptyText }}
           </div>
         </div>
diff --git a/packages/rolldown/src/app/components/data/AssetDetails.vue b/packages/rolldown/src/app/components/data/AssetDetails.vue
index 20a6fea5..66676575 100644
--- a/packages/rolldown/src/app/components/data/AssetDetails.vue
+++ b/packages/rolldown/src/app/components/data/AssetDetails.vue
@@ -73,17 +73,17 @@ function openInEditor() {
 </script>
 
 <template>
-  <div flex="~ col gap-3">
-    <div flex="~ gap-4 items-center wrap">
+  <div class="flex flex-col gap-3">
+    <div class="flex gap-4 items-center flex-wrap">
       <AssetsBaseInfo :asset="asset" />
-      <div flex-auto />
-      <div flex="~ gap-2">
-        <button btn-action @click="openInEditor">
-          <div i-ph-arrow-square-out-duotone />
+      <div class="flex-auto" />
+      <div class="flex gap-2">
+        <button class="btn-action" @click="openInEditor">
+          <div class="i-ph-arrow-square-out-duotone" />
           Open in editor
         </button>
-        <button btn-action @click="showSource = true">
-          <div i-ph-file-text />
+        <button class="btn-action" @click="showSource = true">
+          <div class="i-ph-file-text" />
           View source
         </button>
         <slot />
@@ -91,11 +91,11 @@ function openInEditor() {
     </div>
 
     <template v-if="showSource">
-      <div flex="~ gap-2 items-center">
-        <div op50>
+      <div class="flex gap-2 items-center">
+        <div class="op50">
           Source
         </div>
-        <span flex-auto />
+        <span class="flex-auto" />
         <DisplayIconButton
           title="Line Wrapping"
           class-icon="i-ph-arrow-u-down-left-duotone"
@@ -104,20 +104,20 @@ function openInEditor() {
         />
         <DisplayCloseButton @click="showSource = false" />
       </div>
-      <div class="w-full of-auto px2 py1" border="~ base rounded-lg">
+      <div class="w-full of-auto px2 py1 border border-base rounded-lg">
         <CodeViewer
           :code="asset.content!"
         />
       </div>
     </template>
 
-    <div v-if="assetChunks && assetChunks.length > 0" flex="~ col gap-4">
-      <div flex="~ col gap-2">
-        <div op50>
+    <div v-if="assetChunks && assetChunks.length > 0" class="flex flex-col gap-4">
+      <div class="flex flex-col gap-2">
+        <div class="op50">
           Chunks
         </div>
         <NuxtLink
-          v-for="chunk of assetChunks" :key="chunk.chunk_id" border="~ base rounded-lg" px2 py1 min-w-fit
+          v-for="chunk of assetChunks" :key="chunk.chunk_id" class="border border-base rounded-lg px2 py1 min-w-fit"
           :to="{ path: route.path, query: { chunk: chunk.chunk_id } }"
         >
           <DataChunkDetails
@@ -128,8 +128,8 @@ function openInEditor() {
         </NuxtLink>
       </div>
       <template v-if="_importers?.length || _imports?.length">
-        <div flex="~ col gap-2">
-          <div op50>
+        <div class="flex flex-col gap-2">
+          <div class="op50">
             Asset Relationships
           </div>
           <DataAssetRelationships
@@ -139,13 +139,13 @@ function openInEditor() {
         </div>
       </template>
     </div>
-    <div v-else flex="~ col gap-1">
+    <div v-else class="flex flex-col gap-1">
       <!-- For other situation -->
-      <div op50>
+      <div class="op50">
         [Non-Module Asset]
       </div>
-      <div v-if="asset.filename.endsWith('.map')" flex="~ items-center gap-2">
-        <span op50>Source Map for</span> <DisplayBadge :text="JSON.parse(asset.content!).file" />
+      <div v-if="asset.filename.endsWith('.map')" class="flex items-center gap-2">
+        <span class="op50">Source Map for</span> <DisplayBadge :text="JSON.parse(asset.content!).file" />
       </div>
     </div>
   </div>
diff --git a/packages/rolldown/src/app/components/data/AssetDetailsLoader.vue b/packages/rolldown/src/app/components/data/AssetDetailsLoader.vue
index e72bf7ce..2b7e097f 100644
--- a/packages/rolldown/src/app/components/data/AssetDetailsLoader.vue
+++ b/packages/rolldown/src/app/components/data/AssetDetailsLoader.vue
@@ -55,7 +55,7 @@ const { state } = useAsyncState(
 </script>
 
 <template>
-  <div v-if="state?.asset" p4 relative h-full w-full of-auto bg-glass z-panel-content>
+  <div v-if="state?.asset" class="p4 relative h-full w-full of-auto bg-glass z-panel-content">
     <DataAssetDetails :asset="state.asset" :session="session" :chunks="state?.chunks" :importers="state?.importers" :imports="state?.imports">
       <DisplayCloseButton
         @click="emit('close')"
diff --git a/packages/rolldown/src/app/components/data/AssetRelationships.vue b/packages/rolldown/src/app/components/data/AssetRelationships.vue
index 389a9cf7..2d76b20d 100644
--- a/packages/rolldown/src/app/components/data/AssetRelationships.vue
+++ b/packages/rolldown/src/app/components/data/AssetRelationships.vue
@@ -130,14 +130,14 @@ onMounted(() => {
   <div
     v-if="importers?.length || imports?.length"
     ref="container"
-    w-full relative select-none
+    class="w-full relative select-none"
   >
     <!-- nodes -->
-    <div flex px2>
+    <div class="flex px2">
       <!-- importers -->
       <div
         v-if="importers?.length"
-        py1
+        class="py1"
         :style="{
           width: `${SPACING.width}px`,
           marginTop: `${importersVerticalOffset}px`,
@@ -146,10 +146,7 @@ onMounted(() => {
         <template v-for="(importer, i) of importers" :key="importer.filename">
           <NuxtLink
             :to="{ query: { asset: importer.filename } }"
-            hover="bg-active" block px2 p1 bg-base
-            z-graph-node
-            border="~ base rounded"
-            font-mono text-sm
+            class="hover:bg-active block px2 p1 bg-base z-graph-node border border-base rounded font-mono text-sm"
             :style="{
               width: `${SPACING.width}px`,
               height: `${SPACING.height}px`,
@@ -161,7 +158,7 @@ onMounted(() => {
             }"
           >
             <DisplayFileIcon :filename="importer.filename" />
-            <span overflow-hidden text-ellipsis>
+            <span class="overflow-hidden text-ellipsis">
               {{ importer.filename }}
             </span>
           </NuxtLink>
@@ -170,7 +167,7 @@ onMounted(() => {
 
       <!-- dot: current asset -->
       <div
-        bg-base rounded-full border-3 font-mono border-active flex-shrink-0 :style="{
+        class="bg-base rounded-full border-3 font-mono border-active flex-shrink-0" :style="{
           margin: dotNodeMargin,
           width: `${SPACING.dot}px`,
           height: `${SPACING.dot}px`,
@@ -180,7 +177,7 @@ onMounted(() => {
       <!-- imports -->
       <div
         v-if="imports?.length"
-        py1
+        class="py1"
         :style="{
           width: `${SPACING.width}px`,
           marginTop: `${importsVerticalOffset}px`,
@@ -189,10 +186,7 @@ onMounted(() => {
         <template v-for="(_import, i) of imports" :key="_import.filename">
           <NuxtLink
             :to="{ query: { asset: _import.filename } }"
-            hover="bg-active" block px2 p1 bg-base
-            z-graph-node
-            border="~ base rounded"
-            font-mono text-sm
+            class="hover:bg-active block px2 p1 bg-base z-graph-node border border-base rounded font-mono text-sm"
             :style="{
               width: `${SPACING.width}px`,
               height: `${SPACING.height}px`,
@@ -204,7 +198,7 @@ onMounted(() => {
             }"
           >
             <DisplayFileIcon :filename="_import.filename" />
-            <span overflow-hidden text-ellipsis>
+            <span class="overflow-hidden text-ellipsis">
               {{ _import.filename }}
             </span>
           </NuxtLink>
@@ -214,7 +208,7 @@ onMounted(() => {
 
     <!-- links -->
     <svg
-      pointer-events-none absolute left-0 top-0 z-graph-link w-full
+      class="pointer-events-none absolute left-0 top-0 z-graph-link w-full"
       :style="{
         height: `${nodesHeight}px`,
       }"
diff --git a/packages/rolldown/src/app/components/data/ChunkDetails.vue b/packages/rolldown/src/app/components/data/ChunkDetails.vue
index afec6984..c5d6fe2b 100644
--- a/packages/rolldown/src/app/components/data/ChunkDetails.vue
+++ b/packages/rolldown/src/app/components/data/ChunkDetails.vue
@@ -138,12 +138,12 @@ const importers = computed((): RolldownChunkImport[] => {
 </script>
 
 <template>
-  <div flex="~ col gap-3">
+  <div class="flex flex-col gap-3">
     <ChunksBaseInfo :chunk="chunk">
       <template #left-after>
         <DisplayBadge v-if="chunk.is_initial" text="initial" />
-        <DisplayFileSizeBadge :bytes="chunkSize" text-sm title="Chunk size" />
-        <div v-if="imports.length" text-sm op50 flex="~ items-center" title="Total size of imports">
+        <DisplayFileSizeBadge :bytes="chunkSize" class="text-sm" title="Chunk size" />
+        <div v-if="imports.length" class="text-sm op50 flex items-center" title="Total size of imports">
           (<DisplayFileSizeBadge :bytes="imports.reduce((total, i) => total + i.size, 0) " />)
         </div>
       </template>
@@ -152,11 +152,11 @@ const importers = computed((): RolldownChunkImport[] => {
 
     <template v-if="showDetails">
       <details open="true">
-        <summary op50>
+        <summary class="op50">
           Assets
         </summary>
         <NuxtLink
-          border="~ base rounded-lg" px2 mt2 py1 min-w-fit flex="~"
+          class="border border-base rounded-lg px2 mt2 py1 min-w-fit flex"
           :to="{ path: route.path, query: { asset: chunk.asset?.filename } }"
         >
           <AssetsBaseInfo :asset="{ ...chunk.asset!, type: 'asset' }" />
@@ -164,10 +164,10 @@ const importers = computed((): RolldownChunkImport[] => {
       </details>
 
       <details open="true">
-        <summary op50>
+        <summary class="op50">
           <span>Modules ({{ chunk.modules.length }})</span>
         </summary>
-        <DisplayExpandableContainer flex="~ col gap-1" mt2 ws-nowrap :list="chunk.modules">
+        <DisplayExpandableContainer class="flex flex-col gap-1 mt2 ws-nowrap" :list="chunk.modules">
           <template #default="{ items }">
             <DisplayModuleId
               v-for="module of items"
@@ -176,8 +176,7 @@ const importers = computed((): RolldownChunkImport[] => {
               :session
               :link="true"
               :minimal="true"
-              hover="bg-active"
-              border="~ base rounded" px2 py1 w-full
+              class="hover:bg-active border border-base rounded px2 py1 w-full"
             />
           </template>
         </DisplayExpandableContainer>
@@ -187,14 +186,14 @@ const importers = computed((): RolldownChunkImport[] => {
 
       <template v-else>
         <details v-if="chunk.imports.length" open="true">
-          <summary op50>
+          <summary class="op50">
             <span>Imports ({{ chunk.imports.length }})</span>
           </summary>
           <ChunksImports :imports="imports" />
         </details>
 
         <details v-if="importers.length" open="true">
-          <summary op50>
+          <summary class="op50">
             <span>Importers ({{ importers.length }})</span>
           </summary>
           <ChunksImports :imports="importers" />
diff --git a/packages/rolldown/src/app/components/data/ChunkDetailsLoader.vue b/packages/rolldown/src/app/components/data/ChunkDetailsLoader.vue
index dadecc66..a001482c 100644
--- a/packages/rolldown/src/app/components/data/ChunkDetailsLoader.vue
+++ b/packages/rolldown/src/app/components/data/ChunkDetailsLoader.vue
@@ -31,7 +31,7 @@ const { state, isLoading } = useAsyncState(
 <template>
   <VisualLoading v-if="isLoading" />
 
-  <div v-if="state" p4 relative h-full w-full of-auto z-panel-content>
+  <div v-if="state" class="p4 relative h-full w-full of-auto z-panel-content">
     <DataChunkDetails :session="session" :chunk="state">
       <DisplayCloseButton
         @click="emit('close')"
diff --git a/packages/rolldown/src/app/components/data/ModuleDetailsLoader.vue b/packages/rolldown/src/app/components/data/ModuleDetailsLoader.vue
index 4a3fd016..e304021e 100644
--- a/packages/rolldown/src/app/components/data/ModuleDetailsLoader.vue
+++ b/packages/rolldown/src/app/components/data/ModuleDetailsLoader.vue
@@ -57,57 +57,46 @@ function selectFlowNode(v: boolean) {
 </script>
 
 <template>
-  <div v-if="info" relative h-full w-full>
+  <div v-if="info" class="relative h-full w-full">
     <DisplayCloseButton
-      absolute right-2 top-1.5 bg-glass z-panel-content
+      class="absolute right-2 top-1.5 bg-glass z-panel-content"
       @click="emit('close')"
     />
     <div
-      bg-glass absolute left-2 top-2 z-panel-content p2
-      border="~ base rounded-lg"
-      flex="~ col gap-2"
+      class="bg-glass absolute left-2 top-2 z-panel-content p2 border border-base rounded-lg flex flex-col gap-2"
     >
-      <DisplayModuleId :id="module" px2 pt1 :session />
-      <div text-xs font-mono flex="~ items-center gap-3" ml2>
+      <DisplayModuleId :id="module" class="px2 pt1" :session />
+      <div class="text-xs font-mono flex items-center gap-3 ml2">
         <ModulesBuildMetrics v-if="info" :metrics="info.build_metrics" />
       </div>
-      <div flex="~ gap-2">
+      <div class="flex gap-2">
         <button
           :class="settings.moduleDetailsViewType === 'flow' ? 'text-primary' : ''"
-          flex="~ gap-2 items-center justify-center"
-          px2 py1 w-40
-          border="~ base rounded-lg"
-          hover="bg-active"
+          class="flex gap-2 items-center justify-center px2 py1 w-40 border border-base rounded-lg hover:bg-active"
           @click="settings.moduleDetailsViewType = 'flow'"
         >
-          <div i-ph-git-branch-duotone rotate-180 />
+          <div class="i-ph-git-branch-duotone rotate-180" />
           Build Flow
         </button>
         <button
           :class="settings.moduleDetailsViewType === 'charts' ? 'text-primary' : ''"
-          flex="~ gap-2 items-center justify-center"
-          px2 py1 w-40
-          border="~ base rounded-lg"
-          hover="bg-active"
+          class="flex gap-2 items-center justify-center px2 py1 w-40 border border-base rounded-lg hover:bg-active"
           @click="settings.moduleDetailsViewType = 'charts'"
         >
-          <div i-ph-chart-donut-duotone />
+          <div class="i-ph-chart-donut-duotone" />
           Charts
         </button>
         <button
           :class="settings.moduleDetailsViewType === 'imports' ? 'text-primary' : ''"
-          flex="~ gap-2 items-center justify-center"
-          px2 py1 w-40
-          border="~ base rounded-lg"
-          hover="bg-active"
+          class="flex gap-2 items-center justify-center px2 py1 w-40 border border-base rounded-lg hover:bg-active"
           @click="settings.moduleDetailsViewType = 'imports'"
         >
-          <div i-ph-graph-duotone />
+          <div class="i-ph-graph-duotone" />
           Imports
         </button>
       </div>
     </div>
-    <div of-auto h-full pt-30>
+    <div class="of-auto h-full pt-30">
       <FlowmapModuleFlow
         v-if="settings.moduleDetailsViewType === 'flow'"
         :info
diff --git a/packages/rolldown/src/app/components/data/ModuleImportRelationships.vue b/packages/rolldown/src/app/components/data/ModuleImportRelationships.vue
index 8a85fbb6..54b59be3 100644
--- a/packages/rolldown/src/app/components/data/ModuleImportRelationships.vue
+++ b/packages/rolldown/src/app/components/data/ModuleImportRelationships.vue
@@ -140,15 +140,15 @@ onMounted(() => {
 <template>
   <div
     ref="container"
-    w-full relative select-none mt4
+    class="w-full relative select-none mt4"
   >
     <template v-if="importers?.length || module.imports?.length">
       <!-- nodes -->
-      <div flex px2>
+      <div class="flex px2">
         <!-- importers -->
         <div
           v-if="importers?.length"
-          py1
+          class="py1"
           :style="{
             width: `${SPACING.width}px`,
             marginTop: `${importersVerticalOffset}px`,
@@ -157,9 +157,7 @@ onMounted(() => {
           <template v-for="(importer, i) of importers" :key="importer.id">
             <DisplayModuleId
               :id="importer.id"
-              hover="bg-active" block px2 p1 bg-base ws-nowrap
-              z-graph-node
-              border="~ base rounded"
+              class="hover:bg-active block px2 p1 bg-base ws-nowrap z-graph-node border border-base rounded"
               :link="true"
               :session="session"
               :minimal="true"
@@ -174,7 +172,7 @@ onMounted(() => {
         </div>
         <!-- dot: current module -->
         <div
-          bg-base rounded-full border-3 font-mono border-active flex-shrink-0 :style="{
+          class="bg-base rounded-full border-3 font-mono border-active flex-shrink-0" :style="{
             margin: dotNodeMargin,
             width: `${SPACING.dot}px`,
             height: `${SPACING.dot}px`,
@@ -183,7 +181,7 @@ onMounted(() => {
         <!-- imports -->
         <div
           v-if="module.imports?.length"
-          py1
+          class="py1"
           :style="{
             width: `${SPACING.width}px`,
             marginTop: `${importsVerticalOffset}px`,
@@ -192,9 +190,7 @@ onMounted(() => {
           <template v-for="(_import, i) of module.imports" :key="_import.module_id">
             <DisplayModuleId
               :id="_import!.module_id"
-              hover="bg-active" block px2 p1 bg-base ws-nowrap
-              z-graph-node
-              border="~ base rounded"
+              class="hover:bg-active block px2 p1 bg-base ws-nowrap z-graph-node border border-base rounded"
               :link="true"
               :session="session"
               :minimal="true"
@@ -211,7 +207,7 @@ onMounted(() => {
 
       <!-- links -->
       <svg
-        pointer-events-none absolute left-0 top-0 z-graph-link w-full
+        class="pointer-events-none absolute left-0 top-0 z-graph-link w-full"
         :style="{
           height: `${nodesHeight}px`,
         }"
@@ -228,7 +224,7 @@ onMounted(() => {
         </g>
       </svg>
     </template>
-    <div v-else w-full h-48 flex="~ items-center justify-center" op50 italic>
+    <div v-else class="w-full h-48 flex items-center justify-center op50 italic">
       <p>
         No data
       </p>
diff --git a/packages/rolldown/src/app/components/data/PackageDetailsLoader.vue b/packages/rolldown/src/app/components/data/PackageDetailsLoader.vue
index 7ce95a92..7cd78ce3 100644
--- a/packages/rolldown/src/app/components/data/PackageDetailsLoader.vue
+++ b/packages/rolldown/src/app/components/data/PackageDetailsLoader.vue
@@ -47,18 +47,18 @@ function openInNpm() {
 <template>
   <VisualLoading v-if="isLoading" />
 
-  <div v-if="state" p4 relative h-full w-full of-auto z-panel-content>
-    <div flex="~ col gap-3">
-      <div flex="~ gap-3 items-center" :title="package">
-        <div flex="~ items-center gap-1">
+  <div v-if="state" class="p4 relative h-full w-full of-auto z-panel-content">
+    <div class="flex flex-col gap-3">
+      <div class="flex gap-3 items-center" :title="package">
+        <div class="flex items-center gap-1">
           <div>
             <DisplayHighlightedPackageName :name="packageName" />
           </div>
           <DisplayFileSizeBadge :bytes="state.transformedCodeSize" />
         </div>
-        <div flex-auto />
-        <button btn-action flex="~ items-center" @click="openInNpm">
-          <div i-ph-arrow-square-out-duotone />
+        <div class="flex-auto" />
+        <button class="btn-action flex items-center" @click="openInNpm">
+          <div class="i-ph-arrow-square-out-duotone" />
           Open in npm
         </button>
         <DisplayCloseButton
@@ -67,15 +67,15 @@ function openInNpm() {
       </div>
 
       <details open="true">
-        <summary op50>
+        <summary class="op50">
           <span>Bundled Files ({{ normalizedBundledFiles.length }})</span>
         </summary>
-        <DisplayExpandableContainer flex="~ col gap-1" mt2 ws-nowrap :list="normalizedBundledFiles">
+        <DisplayExpandableContainer class="flex flex-col gap-1 mt2 ws-nowrap" :list="normalizedBundledFiles">
           <template #default="{ items }">
-            <div v-for="file of items" :key="file.path" flex="~ row gap-1 items-center nowrap" hover="bg-active" border="~ base rounded" px2 py1 w-full>
-              <DisplayModuleId :id="file.path" :session="session" ws-nowrap flex-1 disable-tooltip link :cwd="state.dir" />
-              <span inline-flex>
-                <DisplayFileSizeBadge :bytes="file.transformedCodeSize" text-xs />
+            <div v-for="file of items" :key="file.path" class="flex flex-row gap-1 items-center flex-nowrap hover:bg-active border border-base rounded px2 py1 w-full">
+              <DisplayModuleId :id="file.path" :session="session" class="ws-nowrap flex-1" disable-tooltip link :cwd="state.dir" />
+              <span class="inline-flex">
+                <DisplayFileSizeBadge :bytes="file.transformedCodeSize" class="text-xs" />
               </span>
             </div>
           </template>
@@ -83,13 +83,13 @@ function openInNpm() {
       </details>
 
       <details open="true">
-        <summary op50>
+        <summary class="op50">
           <span>Importers ({{ importers.length }})</span>
         </summary>
-        <DisplayExpandableContainer flex="~ col gap-1" mt2 ws-nowrap :list="importers">
+        <DisplayExpandableContainer class="flex flex-col gap-1 mt2 ws-nowrap" :list="importers">
           <template #default="{ items }">
-            <div v-for="importer of items" :key="importer.path" flex="~ row gap-1 items-center nowrap" hover="bg-active" border="~ base rounded" px2 py1 w-full>
-              <DisplayModuleId :id="importer.path" :session="session" ws-nowrap flex-1 disable-tooltip link />
+            <div v-for="importer of items" :key="importer.path" class="flex flex-row gap-1 items-center flex-nowrap hover:bg-active border border-base rounded px2 py1 w-full">
+              <DisplayModuleId :id="importer.path" :session="session" class="ws-nowrap flex-1" disable-tooltip link />
               <DisplayBadge v-if="importer.version" :text="`v${importer.version}`" as="span" />
             </div>
           </template>
diff --git a/packages/rolldown/src/app/components/data/PluginDetailsLoader.vue b/packages/rolldown/src/app/components/data/PluginDetailsLoader.vue
index 0d761d58..7985ef18 100644
--- a/packages/rolldown/src/app/components/data/PluginDetailsLoader.vue
+++ b/packages/rolldown/src/app/components/data/PluginDetailsLoader.vue
@@ -226,76 +226,68 @@ watch(() => settings.value.pluginDetailsViewType, () => {
 
 <template>
   <VisualLoading v-if="isLoading" />
-  <div v-else-if="state?.calls?.length" relative h-full w-full>
+  <div v-else-if="state?.calls?.length" class="relative h-full w-full">
     <DisplayCloseButton
-      absolute right-2 top-1.5
+      class="absolute right-2 top-1.5"
       @click="emit('close')"
     />
     <div
-      bg-glass absolute left-2 top-2 z-panel-content p2
-      border="~ base rounded-lg"
-      flex="~ col gap-2"
+      class="bg-glass absolute left-2 top-2 z-panel-content p2 border border-base rounded-lg flex flex-col gap-2"
     >
-      <div font-mono px1>
+      <div class="font-mono px1">
         <DisplayPluginName :name="state?.plugin_name!" />
       </div>
-      <div text-xs font-mono flex="~ items-center gap-3" ml2>
+      <div class="text-xs font-mono flex items-center gap-3 ml2">
         <DisplayDuration
-          :duration="hookResolveIdDuration" flex="~ gap-1 items-center"
+          :duration="hookResolveIdDuration" class="flex gap-1 items-center"
           :title="`Resolve Id hooks cost: ${formatDuration(hookResolveIdDuration, true)}`"
         >
-          <span i-ph-magnifying-glass-duotone inline-block />
+          <span class="i-ph-magnifying-glass-duotone inline-block" />
         </DisplayDuration>
         <DisplayDuration
-          :duration="hookLoadDuration" flex="~ gap-1 items-center"
+          :duration="hookLoadDuration" class="flex gap-1 items-center"
           :title="`Load hooks cost: ${formatDuration(hookLoadDuration, true)}`"
         >
-          <span i-ph-upload-simple-duotone inline-block />
+          <span class="i-ph-upload-simple-duotone inline-block" />
         </DisplayDuration>
         <DisplayDuration
-          :duration="hookTransformDuration" flex="~ gap-1 items-center"
+          :duration="hookTransformDuration" class="flex gap-1 items-center"
           :title="`Transform hooks cost: ${formatDuration(hookTransformDuration, true)}`"
         >
-          <span i-ph-magic-wand-duotone inline-block />
+          <span class="i-ph-magic-wand-duotone inline-block" />
         </DisplayDuration>
-        <span op40>|</span>
+        <span class="op40">|</span>
         <DisplayDuration
-          :duration="totalDuration" flex="~ gap-1 items-center"
+          :duration="totalDuration" class="flex gap-1 items-center"
           :title="`Total build cost: ${formatDuration(totalDuration, true)}`"
         >
-          <span i-ph-clock-duotone inline-block />
+          <span class="i-ph-clock-duotone inline-block" />
         </DisplayDuration>
-        <span op40>|</span>
+        <span class="op40">|</span>
         <DisplayNumberBadge
           :number="processedModules.length" icon="i-catppuccin-java-class-abstract"
           color="transparent color-scale-neutral"
           :title="`Module processed: ${processedModules.length}`"
         />
-        <span op40>|</span>
+        <span class="op40">|</span>
         <DisplayNumberBadge
           :number="state?.calls?.length ?? 0" icon="i-ph-arrow-counter-clockwise"
           color="transparent color-scale-neutral"
           :title="`Total calls: ${state?.calls?.length ?? 0}`"
         />
       </div>
-      <div flex="~ gap-2">
+      <div class="flex gap-2">
         <button
           :class="settings.pluginDetailsViewType === 'flow' ? 'text-primary' : ''"
-          flex="~ gap-2 items-center justify-center"
-          px2 py1 w-40
-          border="~ base rounded-lg"
-          hover="bg-active"
+          class="flex gap-2 items-center justify-center px2 py1 w-40 border border-base rounded-lg hover:bg-active"
           @click="settings.pluginDetailsViewType = 'flow'"
         >
-          <div i-ph-git-branch-duotone rotate-180 />
+          <div class="i-ph-git-branch-duotone rotate-180" />
           Build Flow
         </button>
         <button
           :class="settings.pluginDetailsViewType === 'sunburst' ? 'text-primary' : ''"
-          flex="~ gap-2 items-center justify-center"
-          px2 py1 w-40
-          border="~ base rounded-lg"
-          hover="bg-active"
+          class="flex gap-2 items-center justify-center px2 py1 w-40 border border-base rounded-lg hover:bg-active"
           @click="settings.pluginDetailsViewType = 'sunburst'"
         >
           <div i-ph-chart-sunburst-duotone />
@@ -303,7 +295,7 @@ watch(() => settings.value.pluginDetailsViewType, () => {
         </button>
       </div>
     </div>
-    <div of-auto h-full pt-30>
+    <div class="of-auto h-full pt-30">
       <FlowmapPluginFlow
         v-if="settings.pluginDetailsViewType === 'flow'"
         :session="session"
@@ -318,59 +310,54 @@ watch(() => settings.value.pluginDetailsViewType, () => {
         <template #module="{ child }">
           <DisplayModuleId
             :id="child.text!"
-            w-full border-none ws-nowrap
+            class="w-full border-none ws-nowrap hover:bg-active border border-base rounded block px2 py1"
             :session="session"
-            hover="bg-active"
-            border="~ base rounded" block px2 py1
           />
         </template>
       </PluginsSunburst>
     </div>
   </div>
-  <div v-else flex="~ items-center justify-center" w-full h-full>
-    <span italic op50>
+  <div v-else class="flex items-center justify-center w-full h-full">
+    <span class="italic op50">
       No data
     </span>
   </div>
   <DisplayGraphHoverView :hover-x="mouse.x" :hover-y="mouse.y">
     <div
       v-if="nodeHover"
-      border="~ base" rounded-lg shadow-lg px3 py2
-      bg-glass pointer-events-none text-sm max-w-80
+      class="border border-base rounded-lg shadow-lg px3 py2 bg-glass pointer-events-none text-sm max-w-80"
     >
-      <div v-if="nodeHover.meta?.title" flex="~ items-center gap2">
+      <div v-if="nodeHover.meta?.title" class="flex items-center gap2">
         {{ nodeHover.meta.title }}
         <DisplayDuration :duration="nodeHover.meta.duration" />
       </div>
       <template v-else>
-        <div v-if="nodeHover.meta?.module" flex="~" font-semibold font-mono text-base mb2>
+        <div v-if="nodeHover.meta?.module" class="flex font-semibold font-mono text-base mb2">
           <DisplayModuleId :id="nodeHover.meta.module" :session="session" :link="false" />
         </div>
-        <div v-if="nodeHover.meta?.module" border="t base" pt2 flex="~ col gap-1.5" min-w-48>
-          <div flex="~ justify-between items-center" py1>
-            <label text-xs opacity-70>Start Time</label>
+        <div v-if="nodeHover.meta?.module" class="border-t border-base pt2 flex flex-col gap-1.5 min-w-48">
+          <div class="flex justify-between items-center py1">
+            <label class="text-xs opacity-70">Start Time</label>
             <time
               :datetime="new Date(nodeHover.meta.timestamp_start).toISOString()"
-              font-mono text="xs"
+              class="font-mono text-xs px1.5 py0.5 rounded"
               bg="base/10"
-              px1.5 py0.5 rounded
             >
               {{ normalizeTimestamp(nodeHover.meta.timestamp_start) }}
             </time>
           </div>
-          <div flex="~ justify-between items-center" py1>
-            <label text-xs opacity-70>End Time</label>
+          <div class="flex justify-between items-center py1">
+            <label class="text-xs opacity-70">End Time</label>
             <time
               :datetime="new Date(nodeHover.meta.timestamp_end).toISOString()"
-              font-mono text="xs"
+              class="font-mono text-xs px1.5 py0.5 rounded"
               bg="base/10"
-              px1.5 py0.5 rounded
             >
               {{ normalizeTimestamp(nodeHover.meta.timestamp_end) }}
             </time>
           </div>
-          <div flex="~ justify-between items-center" py1 border="t base dashed" pt2>
-            <label text="xs" op70>Duration</label>
+          <div class="flex justify-between items-center py1 border-t border-base border-dashed pt2">
+            <label class="text-xs op70">Duration</label>
             <DisplayDuration :duration="nodeHover.meta.duration" />
           </div>
         </div>
diff --git a/packages/rolldown/src/app/components/data/PluginDetailsTable.vue b/packages/rolldown/src/app/components/data/PluginDetailsTable.vue
index 07d500f6..5c2abfa0 100644
--- a/packages/rolldown/src/app/components/data/PluginDetailsTable.vue
+++ b/packages/rolldown/src/app/components/data/PluginDetailsTable.vue
@@ -102,9 +102,8 @@ function toggleDurationSortType() {
 <template>
   <DataVirtualList
     v-if="filtered.length && selectedFields.length"
-    class="plugin-details-table"
+    class="plugin-details-table min-w-max h-full min-h-0"
     role="table"
-    min-w-max h-full min-h-0
     :items="filtered"
     key-prop="id"
     :page-mode="false"
@@ -112,54 +111,51 @@ function toggleDurationSortType() {
     :item-size="36"
   >
     <template #before>
-      <div role="row" class="border-b border-base bg-base" flex="~ row">
-        <div v-if="selectedFields.includes('hookName')" role="columnheader" bg-base flex-none w32 ws-nowrap p1 text-center font-600>
+      <div role="row" class="border-b border-base bg-base flex flex-row">
+        <div v-if="selectedFields.includes('hookName')" role="columnheader" class="bg-base flex-none w32 ws-nowrap p1 text-center font-600">
           Hook name
         </div>
-        <div v-if="selectedFields.includes('module')" role="columnheader" bg-base flex-1 min-w100 ws-nowrap p1 text-left font-600>
-          <button flex="~ row gap1 items-center" w-full>
+        <div v-if="selectedFields.includes('module')" role="columnheader" class="bg-base flex-1 min-w100 ws-nowrap p1 text-left font-600">
+          <button class="flex flex-row gap1 items-center w-full">
             Module
             <VMenu>
-              <span w-6 h-6 rounded-full cursor-pointer hover="bg-active" flex="~ items-center justify-center">
-                <i text-xs class="i-ph-funnel-duotone" :class="filterModuleTypes.length !== searchFilterTypes.length ? 'text-primary op100' : 'op50'" />
+              <span class="w-6 h-6 rounded-full cursor-pointer hover:bg-active flex items-center justify-center">
+                <i class="i-ph-funnel-duotone text-xs" :class="filterModuleTypes.length !== searchFilterTypes.length ? 'text-primary op100' : 'op50'" />
               </span>
               <template #popper>
-                <div class="p2" flex="~ col gap2">
+                <div class="p2 flex flex-col gap2">
                   <label
                     v-for="rule of searchFilterTypes"
                     :key="rule.name"
-                    border="~ base rounded-md" px2 py1
-                    flex="~ items-center gap-1"
-                    select-none
                     :title="rule.description"
-                    class="cursor-pointer module-type-filter"
+                    class="cursor-pointer module-type-filter border border-base rounded-md px2 py1 flex items-center gap-1 select-none"
                   >
                     <input
                       type="checkbox"
-                      mr1
+                      class="mr1"
                       :checked="filterModuleTypes?.includes(rule.name)"
                       @change="toggleModuleType(rule)"
                     >
-                    <div :class="rule.icon" icon-catppuccin />
-                    <div text-sm>{{ rule.description || rule.name }}</div>
+                    <div :class="rule.icon" class="icon-catppuccin" />
+                    <div class="text-sm">{{ rule.description || rule.name }}</div>
                   </label>
                 </div>
               </template>
             </VMenu>
           </button>
         </div>
-        <div v-if="selectedFields.includes('duration')" role="columnheader" rounded-tr-2 bg-base flex-none ws-nowrap p1 text-center font-600 w-27>
-          <button flex="~ row gap1 items-center justify-center" w-full @click="toggleDurationSortType">
+        <div v-if="selectedFields.includes('duration')" role="columnheader" class="rounded-tr-2 bg-base flex-none ws-nowrap p1 text-center font-600 w-27">
+          <button class="flex flex-row gap1 items-center justify-center w-full" @click="toggleDurationSortType">
             Duration
-            <span w-6 h-6 rounded-full cursor-pointer hover="bg-active" flex="~ items-center justify-center">
-              <i text-xs :class="[durationSortType !== 'asc' ? 'i-ph-arrow-down-duotone' : 'i-ph-arrow-up-duotone', durationSortType ? 'op100 text-primary' : 'op50']" />
+            <span class="w-6 h-6 rounded-full cursor-pointer hover:bg-active flex items-center justify-center">
+              <i class="text-xs" :class="[durationSortType !== 'asc' ? 'i-ph-arrow-down-duotone' : 'i-ph-arrow-up-duotone', durationSortType ? 'op100 text-primary' : 'op50']" />
             </span>
           </button>
         </div>
-        <div v-if="selectedFields.includes('startTime')" role="columnheader" rounded-tr-2 bg-base flex-none min-w52 ws-nowrap p1 text-center font-600>
+        <div v-if="selectedFields.includes('startTime')" role="columnheader" class="rounded-tr-2 bg-base flex-none min-w52 ws-nowrap p1 text-center font-600">
           Start Time
         </div>
-        <div v-if="selectedFields.includes('endTime')" role="columnheader" rounded-tr-2 bg-base flex-none min-w52 ws-nowrap p1 text-center font-600>
+        <div v-if="selectedFields.includes('endTime')" role="columnheader" class="rounded-tr-2 bg-base flex-none min-w52 ws-nowrap p1 text-center font-600">
           End Time
         </div>
       </div>
@@ -168,39 +164,35 @@ function toggleDurationSortType() {
     <template #default="{ item, index }">
       <div
         role="row"
-        flex="~ row"
-        h-9
-        class="border-base border-b border-dashed"
+        class="border-base border-b border-dashed flex flex-row h-9"
         :class="[index === filtered.length - 1 ? 'border-b-0' : '']"
       >
-        <div v-if="selectedFields.includes('hookName')" role="cell" flex="~ items-center justify-center" flex-none w32 ws-nowrap op80>
+        <div v-if="selectedFields.includes('hookName')" role="cell" class="flex items-center justify-center flex-none w32 ws-nowrap op80">
           <DisplayBadge :text="HOOK_NAME_MAP[item.type]" />
         </div>
-        <div v-if="selectedFields.includes('module')" role="cell" flex-1 min-w100 text-left text-ellipsis line-clamp-2>
+        <div v-if="selectedFields.includes('module')" role="cell" class="flex-1 min-w100 text-left text-ellipsis line-clamp-2">
           <DisplayModuleId
             :id="item.module"
-            w-full border-none ws-nowrap
+            class="w-full border-none ws-nowrap hover:bg-active border border-base rounded block px2 py1"
             :session="session"
             :link="`/session/${session.id}/graph?module=${item.module}`"
-            hover="bg-active"
-            border="~ base rounded" block px2 py1
           />
         </div>
-        <div v-if="selectedFields.includes('duration')" role="cell" flex="~ items-center justify-center" flex-none text-center text-sm w-27>
+        <div v-if="selectedFields.includes('duration')" role="cell" class="flex items-center justify-center flex-none text-center text-sm w-27">
           <DisplayDuration :duration="item.duration" />
         </div>
-        <div v-if="selectedFields.includes('startTime')" role="cell" flex="~ items-center justify-center" flex-none text-center font-mono text-sm min-w52 op80>
+        <div v-if="selectedFields.includes('startTime')" role="cell" class="flex items-center justify-center flex-none text-center font-mono text-sm min-w52 op80">
           {{ normalizeTimestamp(item.timestamp_start) }}
         </div>
-        <div v-if="selectedFields.includes('endTime')" role="cell" flex="~ items-center justify-center" flex-none text-center font-mono text-sm min-w52 op80>
+        <div v-if="selectedFields.includes('endTime')" role="cell" class="flex items-center justify-center flex-none text-center font-mono text-sm min-w52 op80">
           {{ normalizeTimestamp(item.timestamp_end) }}
         </div>
       </div>
     </template>
   </DataVirtualList>
-  <div v-else role="table" min-w-max h-full>
-    <div p4>
-      <div w-full h-48 flex="~ items-center justify-center" op50 italic>
+  <div v-else role="table" class="min-w-max h-full">
+    <div class="p4">
+      <div class="w-full h-48 flex items-center justify-center op50 italic">
         <p v-if="!selectedFields.length">
           No columns selected
         </p>
diff --git a/packages/rolldown/src/app/components/display/ClusterBadge.vue b/packages/rolldown/src/app/components/display/ClusterBadge.vue
index edfed1b0..4d03dbf6 100644
--- a/packages/rolldown/src/app/components/display/ClusterBadge.vue
+++ b/packages/rolldown/src/app/components/display/ClusterBadge.vue
@@ -32,11 +32,11 @@ const style = computed(() => ({
 
 <template>
   <Tooltip>
-    <div flex="~ gap-1 items-center" text-sm pl1 pr2 rounded border-l-3 border :style>
-      <div v-if="parsed.namespace" text-xs op-fade>
+    <div class="flex gap-1 items-center text-sm pl1 pr2 rounded border-l-3 border" :style>
+      <div v-if="parsed.namespace" class="text-xs op-fade">
         {{ parsed.namespace }}:
       </div>
-      <div rounded-full font-mono>
+      <div class="rounded-full font-mono">
         {{ parsed.value }}
       </div>
     </div>
diff --git a/packages/rolldown/src/app/components/display/ComparisonMetric.vue b/packages/rolldown/src/app/components/display/ComparisonMetric.vue
index eb49059d..c8f52725 100644
--- a/packages/rolldown/src/app/components/display/ComparisonMetric.vue
+++ b/packages/rolldown/src/app/components/display/ComparisonMetric.vue
@@ -21,7 +21,7 @@ const comparisonColorClass = computed(() => isNotChanged.value ? 'text-gray-500'
 
 <template>
   <span
-    text-4 mt-1 font-mono
+    class="text-4 mt-1 font-mono"
     :class="comparisonColorClass"
   >
     {{ trendSymbol }}{{ normalizedPercent }}%
diff --git a/packages/rolldown/src/app/components/display/ExpandableContainer.vue b/packages/rolldown/src/app/components/display/ExpandableContainer.vue
index 6da2ea6a..4dcf5961 100644
--- a/packages/rolldown/src/app/components/display/ExpandableContainer.vue
+++ b/packages/rolldown/src/app/components/display/ExpandableContainer.vue
@@ -16,34 +16,27 @@ const top = computed(() => props.list.slice(0, count.value))
 </script>
 
 <template>
-  <div relative>
+  <div class="relative">
     <slot :items="top" />
     <div
       v-if="list.length > count"
-      pointer-events-none absolute left-0 right-0 bottom-0 bg-gradient-more h-30
-      flex="~ justify-center"
+      class="pointer-events-none absolute left-0 right-0 bottom-0 bg-gradient-more h-30 flex justify-center"
     >
       <button
-        op35 p2 pt4 mta
-        pointer-events-auto
-        hover:op100
-        flex="~ items-center gap-1 justify-center"
+        class="op35 p2 pt4 mta pointer-events-auto hover:op100 flex items-center gap-1 justify-center"
         @click="count = Math.round(count + initialCount)"
       >
-        <div i-ri:arrow-down-double-line />
+        <div class="i-ri:arrow-down-double-line" />
         <span>More</span>
-        <DisplayNumberBadge prefix="+" :number="Math.min(Math.round(initialCount), props.list.length - count)" rounded-full text-sm />
+        <DisplayNumberBadge prefix="+" :number="Math.min(Math.round(initialCount), props.list.length - count)" class="rounded-full text-sm" />
       </button>
       <button
-        op35 p2 pt4 mta
-        pointer-events-auto
-        hover:op100
-        flex="~ items-center gap-1 justify-center"
+        class="op35 p2 pt4 mta pointer-events-auto hover:op100 flex items-center gap-1 justify-center"
         @click="count = props.list.length"
       >
-        <div i-ph-arrows-out-line-vertical-duotone />
+        <div class="i-ph-arrows-out-line-vertical-duotone" />
         <span>All</span>
-        <DisplayNumberBadge :number="props.list.length" rounded-full text-sm />
+        <DisplayNumberBadge :number="props.list.length" class="rounded-full text-sm" />
       </button>
     </div>
   </div>
diff --git a/packages/rolldown/src/app/components/display/IconButton.vue b/packages/rolldown/src/app/components/display/IconButton.vue
index e23c82cf..5f7950ef 100644
--- a/packages/rolldown/src/app/components/display/IconButton.vue
+++ b/packages/rolldown/src/app/components/display/IconButton.vue
@@ -9,9 +9,8 @@ const props = defineProps<{
 <template>
   <button
     type="button"
-    w-8 h-8 rounded-full flex items-center justify-center
-    :class="props.active ? 'bg-active op90 text-green-400' : ''"
-    hover="bg-active op100" op50 :title="props.title"
+    class="w-8 h-8 rounded-full flex items-center justify-center hover:bg-active hover:op100 op50"
+    :class="props.active ? 'bg-active op90 text-green-400' : ''" :title="props.title"
     :aria-label="props.title"
   >
     <slot><div :class="props.classIcon" /></slot>
diff --git a/packages/rolldown/src/app/components/display/ModuleId.vue b/packages/rolldown/src/app/components/display/ModuleId.vue
index fa158642..e8b23f40 100644
--- a/packages/rolldown/src/app/components/display/ModuleId.vue
+++ b/packages/rolldown/src/app/components/display/ModuleId.vue
@@ -55,7 +55,7 @@ const containerClass = computed(() => {
     :to="link ? (typeof link === 'string' ? link : { path: route.path, query: { ...route.query, module: id, chunk: undefined }, hash: location.hash }) : undefined"
   >
     <Tooltip
-      my-auto text-sm font-mono block w-full
+      class="my-auto text-sm font-mono block w-full"
       :triggers="['hover']"
       :delay="1200"
       :disabled="disableTooltip || (props.id?.length || 0) < 30"
@@ -65,8 +65,8 @@ const containerClass = computed(() => {
         v-if="id"
         :class="containerClass"
       >
-        <DisplayFileIcon v-if="icon" :filename="id" mr1.5 />
-        <span overflow-hidden text-ellipsis break-all line-clamp-2>
+        <DisplayFileIcon v-if="icon" :filename="id" class="mr1.5" />
+        <span class="overflow-hidden text-ellipsis break-all line-clamp-2">
           <DisplayHighlightedPath :path="relativePath" :minimal="minimal" />
         </span>
         <slot />
@@ -85,7 +85,7 @@ const containerClass = computed(() => {
         <slot name="detail" />
       </div>
       <template #popper>
-        <span font-mono text-sm>
+        <span class="font-mono text-sm">
           {{ props.id }}
         </span>
       </template>
diff --git a/packages/rolldown/src/app/components/display/TreeNode.vue b/packages/rolldown/src/app/components/display/TreeNode.vue
index ae846c55..416fe7f8 100644
--- a/packages/rolldown/src/app/components/display/TreeNode.vue
+++ b/packages/rolldown/src/app/components/display/TreeNode.vue
@@ -39,18 +39,12 @@ function select(node: ModuleDest) {
 <template>
   <details :open="open" @toggle="e => open = (e.target as HTMLDetailsElement)?.open">
     <summary
-      cursor-default
-      select-none
-      text-sm
-      truncate
+      class="cursor-default select-none text-sm truncate flex gap-1 px2 py1 rounded hover:bg-active"
       :style="{ paddingLeft: `${padding + 0.5}rem` }"
-      flex="~ gap-1"
-      px2 py1 rounded
-      hover="bg-active "
     >
       <div class="i-ph-caret-right-duotone transition op50" :class="open ? 'rotate-90' : ''" />
-      <div :class="open ? iconOpen || icon : icon" inline-block vertical-text-bottom />
-      <div font-mono>
+      <div :class="open ? iconOpen || icon : icon" class="inline-block vertical-text-bottom" />
+      <div class="font-mono">
         <DisplayHighlightedPath :path="node.name || ''" />
       </div>
     </summary>
@@ -71,16 +65,12 @@ function select(node: ModuleDest) {
         <component
           :is="link ? NuxtLink : 'div'"
           :to="link ? (typeof link === 'string' ? link : { path: route.path, query: { ...route.query, [linkQueryKey]: i.full }, hash: location.hash }) : undefined"
-          text-sm
-          ws-nowrap
-          flex="~ gap-1"
-          px2 py1 rounded
-          hover="bg-active"
+          class="text-sm ws-nowrap flex gap-1 px2 py1 rounded hover:bg-active"
           :style="{ paddingLeft: `${padding + 2.7}rem` }"
           @click="select(i)"
         >
           <DisplayFileIcon :filename="i.full" />
-          <div font-mono>
+          <div class="font-mono">
             <DisplayHighlightedPath :path="i.path.split('/').pop() || ''" />
             <slot name="extra" :node="i" />
           </div>
diff --git a/packages/rolldown/src/app/components/display/Version.vue b/packages/rolldown/src/app/components/display/Version.vue
index e78878bf..252daded 100644
--- a/packages/rolldown/src/app/components/display/Version.vue
+++ b/packages/rolldown/src/app/components/display/Version.vue
@@ -6,5 +6,5 @@ defineProps<{
 </script>
 
 <template>
-  <span v-if="version" font-mono>{{ prefix || '' }}{{ version?.includes(':') ? version : `${prefix ? '' : 'v'}${version}` }}</span>
+  <span v-if="version" class="font-mono">{{ prefix || '' }}{{ version?.includes(':') ? version : `${prefix ? '' : 'v'}${version}` }}</span>
 </template>
diff --git a/packages/rolldown/src/app/components/display/VirtualTree.vue b/packages/rolldown/src/app/components/display/VirtualTree.vue
index c51512c0..4db23e8f 100644
--- a/packages/rolldown/src/app/components/display/VirtualTree.vue
+++ b/packages/rolldown/src/app/components/display/VirtualTree.vue
@@ -175,7 +175,7 @@ function select(node: ModuleDest) {
 </script>
 
 <template>
-  <div p4>
+  <div class="p4">
     <DataVirtualList
       :items="rows"
       key-prop="key"
@@ -184,18 +184,14 @@ function select(node: ModuleDest) {
       :scroller="scroller"
     >
       <template #default="{ item: row }">
-        <div v-if="row.type === 'divider'" h-7 flex items-center>
-          <div w-full border="t base" />
+        <div v-if="row.type === 'divider'" class="h-7 flex items-center">
+          <div class="w-full border-t border-base" />
         </div>
 
         <button
           v-else-if="row.type === 'folder'"
           type="button"
-          h-7 w-full min-w-0
-          cursor-default select-none text-sm truncate
-          flex="~ gap-1 items-center"
-          px2 rounded bg-transparent text-left
-          hover="bg-active"
+          class="h-7 w-full min-w-0 cursor-default select-none text-sm truncate flex gap-1 items-center px2 rounded bg-transparent text-left hover:bg-active"
           :aria-expanded="isFolderOpen(row)"
           :style="{ paddingLeft: `${row.depth + 0.5}rem` }"
           @click="toggleFolder(row)"
@@ -204,8 +200,8 @@ function select(node: ModuleDest) {
             class="i-ph-caret-right-duotone transition op50 shrink-0"
             :class="isFolderOpen(row) ? 'rotate-90' : ''"
           />
-          <div :class="isFolderOpen(row) ? row.iconOpen || row.icon : row.icon" inline-block vertical-text-bottom shrink-0 />
-          <div font-mono truncate>
+          <div :class="isFolderOpen(row) ? row.iconOpen || row.icon : row.icon" class="inline-block vertical-text-bottom shrink-0" />
+          <div class="font-mono truncate">
             <DisplayHighlightedPath :path="row.node.name || ''" />
           </div>
         </button>
@@ -214,16 +210,12 @@ function select(node: ModuleDest) {
           :is="link ? NuxtLink : 'div'"
           v-else
           :to="link ? getItemLink(row.item) : undefined"
-          h-7 min-w-0
-          text-sm ws-nowrap
-          flex="~ gap-1 items-center"
-          px2 rounded
-          hover="bg-active"
+          class="h-7 min-w-0 text-sm ws-nowrap flex gap-1 items-center px2 rounded hover:bg-active"
           :style="{ paddingLeft: `${row.depth + 2.7}rem` }"
           @click="select(row.item)"
         >
-          <DisplayFileIcon :filename="row.item.full" shrink-0 />
-          <div font-mono min-w-0 truncate>
+          <DisplayFileIcon :filename="row.item.full" class="shrink-0" />
+          <div class="font-mono min-w-0 truncate">
             <DisplayHighlightedPath :path="getItemName(row.item)" />
             <slot name="extra" :node="row.item" />
           </div>
diff --git a/packages/rolldown/src/app/components/flowmap/ModuleFlow.vue b/packages/rolldown/src/app/components/flowmap/ModuleFlow.vue
index 7c754323..e929b16d 100644
--- a/packages/rolldown/src/app/components/flowmap/ModuleFlow.vue
+++ b/packages/rolldown/src/app/components/flowmap/ModuleFlow.vue
@@ -37,8 +37,8 @@ function handleClose() {
     <Pane size="55" min-size="10" max-size="90" class="!h-auto !of-visible ">
       <!-- the origin of the height: -->
       <!-- DialogTopMargin (20) + HandleHeight (30) + padding (4*2) = 58 -->
-      <div v-on-click-outside="[handleClose, { ignore: ['.splitpanes__splitter', '.flowmap-node-inline'] }]" w-full h="[calc(100vh-(var(--spacing)*58))]" pointer-events-auto sticky top-4>
-        <div absolute left-0 top="1/2" translate-x="-1/2" translate-y="-1/2" bg="#DFDFDF dark:#313131" h-10 w-2 rounded-full z-10 cursor-col-resize />
+      <div v-on-click-outside="[handleClose, { ignore: ['.splitpanes__splitter', '.flowmap-node-inline'] }]" class="w-full h-[calc(100vh-(var(--spacing)*58))] pointer-events-auto sticky top-4">
+        <div class="absolute left-0 top-1/2 translate-x--1/2 translate-y--1/2 bg-#DFDFDF dark:bg-#313131 h-10 w-2 rounded-full z-10 cursor-col-resize" />
         <ModuleFlowDetails
           :selected="selected"
           :session="session"
@@ -47,7 +47,7 @@ function handleClose() {
       </div>
     </Pane>
   </Splitpanes>
-  <div p4>
+  <div class="p4">
     <ModuleFlowTimeline
       :info="info"
       :session="session"
diff --git a/packages/rolldown/src/app/components/flowmap/ModuleFlowDetails.vue b/packages/rolldown/src/app/components/flowmap/ModuleFlowDetails.vue
index db7c3751..02956670 100644
--- a/packages/rolldown/src/app/components/flowmap/ModuleFlowDetails.vue
+++ b/packages/rolldown/src/app/components/flowmap/ModuleFlowDetails.vue
@@ -46,12 +46,11 @@ function handleClose() {
 
 <template>
   <div
-    bg-glass w-full h-full
+    class="bg-glass w-full h-full border border-base rounded-lg of-hidden flex flex-col"
     :class="codeDisplay?.from && codeDisplay?.to ? '' : 'border-dashed'"
-    border="~ base rounded-lg" of-hidden flex="~ col"
   >
     <template v-if="selected?.type === 'chunk'">
-      <div p4 h-full of-auto style="overscroll-behavior: contain">
+      <div class="p4 h-full of-auto" style="overscroll-behavior: contain">
         <DataChunkDetails
           :chunk="selected"
           :session="session"
@@ -59,7 +58,7 @@ function handleClose() {
       </div>
     </template>
     <template v-else-if="selected?.type === 'asset'">
-      <div p4 h-full of-auto style="overscroll-behavior: contain">
+      <div class="p4 h-full of-auto" style="overscroll-behavior: contain">
         <DataAssetDetails
           :asset="selected"
           :session="session"
@@ -68,12 +67,12 @@ function handleClose() {
       </div>
     </template>
     <template v-else-if="codeDisplay?.from && codeDisplay?.to">
-      <div pl4 p2 font-mono border="b base" flex="~ items-center gap-2">
+      <div class="pl4 p2 font-mono border-b border-base flex items-center gap-2">
         <PluginName :name="codeDisplay?.plugin_name ?? ''" />
-        <span v-if="codeDisplay?.type" op50 text-xs>
+        <span v-if="codeDisplay?.type" class="op50 text-xs">
           {{ codeDisplay?.type === 'load' ? 'Load' : 'Transform' }}
         </span>
-        <div flex-auto />
+        <div class="flex-auto" />
         <DisplayIconButton
           title="Line Wrapping"
           class-icon="i-ph-arrow-u-down-left-duotone"
@@ -90,7 +89,7 @@ function handleClose() {
       />
     </template>
     <!-- TODO: show more info with selected node -->
-    <span v-else op50 italic ma>
+    <span v-else class="op50 italic ma">
       No data
     </span>
   </div>
diff --git a/packages/rolldown/src/app/components/flowmap/ModuleFlowTimeline.vue b/packages/rolldown/src/app/components/flowmap/ModuleFlowTimeline.vue
index b6167f0c..e4937d15 100644
--- a/packages/rolldown/src/app/components/flowmap/ModuleFlowTimeline.vue
+++ b/packages/rolldown/src/app/components/flowmap/ModuleFlowTimeline.vue
@@ -119,29 +119,28 @@ function handleSelect(value: RolldownModuleFlowNode | null) {
 </script>
 
 <template>
-  <div select-none h-full of-auto ws-nowrap w-100vh of-visible>
+  <div class="select-none h-full of-auto ws-nowrap w-100vh of-visible">
     <!-- Importers section -->
-    <div v-if="info.importers?.length" text-sm>
-      <div flex>
+    <div v-if="info.importers?.length" class="text-sm">
+      <div class="flex">
         <VMenu>
           <FlowmapNode class-node-outer="border-dashed">
             <template #inner>
-              <div flex="~ items-center gap-1" text-sm text-blue px3 py1>
-                <div i-ph-arrows-merge-duotone rotate-270 />
+              <div class="flex items-center gap-1 text-sm text-blue px3 py1">
+                <div class="i-ph-arrows-merge-duotone rotate-270" />
                 {{ info.importers?.length }} importers
               </div>
             </template>
           </FlowmapNode>
           <template #popper="{ hide }">
-            <div p2 flex="~ col gap-1">
+            <div class="p2 flex flex-col gap-1">
               <DisplayModuleId
                 v-for="importer of info.importers"
                 :id="importer"
                 :key="importer"
                 :session="session"
                 :link="true"
-                class="hover:bg-active"
-                px2 py1 rounded
+                class="hover:bg-active px2 py1 rounded"
                 @click="hide"
               />
             </div>
@@ -149,19 +148,18 @@ function handleSelect(value: RolldownModuleFlowNode | null) {
         </VMenu>
       </div>
       <div
-        pl-10 border="r" h-4 w-1px z-flowmap-line
-        class="border-flow-line border-dashed"
+        class="border-flow-line border-dashed pl-10 border-r h-4 w-1px z-flowmap-line"
       />
     </div>
 
     <!-- Main module node -->
-    <div flex="~">
+    <div class="flex">
       <FlowmapNode
         :lines="{ bottom: true }"
         :active="selected != null"
       >
         <template #content>
-          <div p2>
+          <div class="p2">
             <DisplayModuleId
               :id="info.id"
               :session="session"
@@ -170,18 +168,18 @@ function handleSelect(value: RolldownModuleFlowNode | null) {
         </template>
       </FlowmapNode>
       <template v-if="info.imports?.length">
-        <div w-10 border="t base dashed" mya />
-        <VMenu mya>
+        <div class="w-10 border-t border-base border-dashed mya" />
+        <VMenu class="mya">
           <FlowmapNode class-node-outer="border-dashed">
             <template #inner>
-              <div flex="~ items-center gap-1" text-sm text-orange px3 py1>
-                <div i-ph-arrows-split-duotone rotate-270 />
+              <div class="flex items-center gap-1 text-sm text-orange px3 py1">
+                <div class="i-ph-arrows-split-duotone rotate-270" />
                 {{ info.imports?.length }} imports
               </div>
             </template>
           </FlowmapNode>
           <template #popper="{ hide }">
-            <div p2 flex="~ col gap-1">
+            <div class="p2 flex flex-col gap-1">
               <DisplayModuleId
                 v-for="imp of info.imports"
                 :id="imp.module_id"
@@ -189,8 +187,7 @@ function handleSelect(value: RolldownModuleFlowNode | null) {
                 :kind="imp.kind"
                 :session="session"
                 :link="true"
-                class="hover:bg-active"
-                px2 py1 rounded
+                class="hover:bg-active px2 py1 rounded"
                 @click="hide"
               />
             </div>
@@ -208,8 +205,8 @@ function handleSelect(value: RolldownModuleFlowNode | null) {
       :active-end="isSelectedAncestor(loads[0])"
     >
       <template #node>
-        <div i-ph-magnifying-glass-duotone /> Resolve Id
-        <span op50 text-xs>({{ info.resolve_ids.length }})</span>
+        <div class="i-ph-magnifying-glass-duotone" /> Resolve Id
+        <span class="op50 text-xs">({{ info.resolve_ids.length }})</span>
       </template>
       <template #container>
         <div>
@@ -234,8 +231,8 @@ function handleSelect(value: RolldownModuleFlowNode | null) {
       :active-end="isSelectedAncestor(transforms[0])"
     >
       <template #node>
-        <div i-ph-upload-simple-duotone /> Load
-        <span op50 text-xs>({{ info.loads.length }})</span>
+        <div class="i-ph-upload-simple-duotone" /> Load
+        <span class="op50 text-xs">({{ info.loads.length }})</span>
       </template>
       <template #container>
         <div>
@@ -261,9 +258,9 @@ function handleSelect(value: RolldownModuleFlowNode | null) {
       :active-end="isSelectedAncestor(info.chunks[0] || transforms.at(-1))"
     >
       <template #node>
-        <div i-ph-magic-wand-duotone /> Transform
-        <span v-if="transformsLoading" i-ph-spinner animate-spin />
-        <span v-else op50 text-xs>({{ info.transforms.length }})</span>
+        <div class="i-ph-magic-wand-duotone" /> Transform
+        <span v-if="transformsLoading" class="i-ph-spinner animate-spin" />
+        <span v-else class="op50 text-xs">({{ info.transforms.length }})</span>
       </template>
       <template #container>
         <div>
@@ -288,11 +285,11 @@ function handleSelect(value: RolldownModuleFlowNode | null) {
       :class-root-node="info.chunks.length === 0 ? 'border-dashed' : ''"
       :active-start="isSelectedAncestor(info.chunks[0])"
       :active-end="isSelectedAncestor(info.chunks.at(-1))"
-      pl6 pt4
+      class="pl6 pt4"
     >
       <template #node>
-        <div i-ph-shapes-duotone /> Chunk
-        <span op50 text-xs>({{ info.chunks.length }})</span>
+        <div class="i-ph-shapes-duotone" /> Chunk
+        <span class="op50 text-xs">({{ info.chunks.length }})</span>
       </template>
       <template #container>
         <FlowmapNodeChunkInfo
@@ -320,11 +317,11 @@ function handleSelect(value: RolldownModuleFlowNode | null) {
       :active-start="isSelectedAncestor(info.assets[0])"
       :active-end="isSelectedAncestor(info.assets.at(-1))"
       :show-tail="false"
-      pl6 pt4
+      class="pl6 pt4"
     >
       <template #node>
-        <div i-ph-package-duotone /> Assets
-        <span op50 text-xs>({{ info.assets.length }})</span>
+        <div class="i-ph-package-duotone" /> Assets
+        <span class="op50 text-xs">({{ info.assets.length }})</span>
       </template>
       <template #container>
         <FlowmapNodeAssetInfo
diff --git a/packages/rolldown/src/app/components/flowmap/NodeAssetInfo.vue b/packages/rolldown/src/app/components/flowmap/NodeAssetInfo.vue
index 25e04518..2a1861b0 100644
--- a/packages/rolldown/src/app/components/flowmap/NodeAssetInfo.vue
+++ b/packages/rolldown/src/app/components/flowmap/NodeAssetInfo.vue
@@ -18,16 +18,16 @@ const emit = defineEmits<{
     :lines="{ top: true }"
     :active="active"
     class-node-inline="gap-2 items-center"
-    pl6
+    class="pl6"
   >
     <template #inner>
       <button
-        px3 py1 hover="bg-active" flex="~ inline gap-2 items-center"
+        class="px3 py1 hover:bg-active flex flex-inline gap-2 items-center"
         @click="emit('select', item)"
       >
         <slot name="button">
-          <div flex="~ col gap-1 items-start" p1>
-            <div flex="~ gap-2 items-center">
+          <div class="flex flex-col gap-1 items-start p1">
+            <div class="flex gap-2 items-center">
               <DisplayModuleId :id="item.filename" :session />
             </div>
           </div>
@@ -35,7 +35,7 @@ const emit = defineEmits<{
       </button>
     </template>
     <template #inline-after>
-      <DisplayFileSizeBadge :bytes="item.size" text-sm />
+      <DisplayFileSizeBadge :bytes="item.size" class="text-sm" />
       <DisplayBadge :text="item.type" />
     </template>
   </FlowmapNode>
diff --git a/packages/rolldown/src/app/components/flowmap/NodeChunkInfo.vue b/packages/rolldown/src/app/components/flowmap/NodeChunkInfo.vue
index cce27882..8bb8e745 100644
--- a/packages/rolldown/src/app/components/flowmap/NodeChunkInfo.vue
+++ b/packages/rolldown/src/app/components/flowmap/NodeChunkInfo.vue
@@ -18,23 +18,23 @@ const emit = defineEmits<{
     :lines="{ top: true }"
     :active="active"
     class-node-inline="gap-2 items-center"
-    pl6
+    class="pl6"
   >
     <template #inner>
       <button
-        px3 py1 hover="bg-active" flex="~ inline gap-2 items-center"
+        class="px3 py1 hover:bg-active flex flex-inline gap-2 items-center"
         @click="emit('select', item)"
       >
         <slot name="button">
-          <div flex="~ col gap-1 items-start" p1>
-            <div flex="~ gap-2 items-center">
+          <div class="flex flex-col gap-1 items-start p1">
+            <div class="flex gap-2 items-center">
               <DisplayBadge :text="item.name || '<unnamed chunk>'" />
-              <div flex-auto />
-              <div :title="`Chunk ID: ${item.chunk_id}`" op50 font-mono text-sm>
+              <div class="flex-auto" />
+              <div :title="`Chunk ID: ${item.chunk_id}`" class="op50 font-mono text-sm">
                 #{{ item.chunk_id }}
               </div>
             </div>
-            <div text-sm>
+            <div class="text-sm">
               {{ item.modules.length }} modules
             </div>
           </div>
diff --git a/packages/rolldown/src/app/components/flowmap/NodeModuleInfo.vue b/packages/rolldown/src/app/components/flowmap/NodeModuleInfo.vue
index edb2f632..a447db4c 100644
--- a/packages/rolldown/src/app/components/flowmap/NodeModuleInfo.vue
+++ b/packages/rolldown/src/app/components/flowmap/NodeModuleInfo.vue
@@ -46,40 +46,40 @@ const importerModule = computed(() => {
 </script>
 
 <template>
-  <div v-if="item.type === 'no_changes_collapsed'" pl10>
+  <div v-if="item.type === 'no_changes_collapsed'" class="pl10">
     <div
-      flex="~ gap-2 items-center" text-sm border="l" py1
+      class="flex gap-2 items-center text-sm border-l py1"
       :class="active ? 'border-flow-line-active' : 'border-flow-line'"
     >
       <div
-        w-2 h-2 border="4" rounded-full ml--1 translate-x--0.5px
+        class="w-2 h-2 border-4 rounded-full ml--1 translate-x--0.5px"
         :class="active ? 'border-flow-line-active' : 'border-flow-line'"
       />
-      <span op50>{{ item.count }} plugins did not change the content but cost</span>
-      <DisplayDuration :duration="item.duration" :color="true" :factor="5" text-xs />
-      <span op50 flex-shrink-0>in total</span>
+      <span class="op50">{{ item.count }} plugins did not change the content but cost</span>
+      <DisplayDuration :duration="item.duration" :color="true" :factor="5" class="text-xs" />
+      <span class="op50 flex-shrink-0">in total</span>
       <button
-        border="~ base rounded-full" px2 py-px op50 hover="op100"
+        class="border border-base rounded-full px2 py-px op50 hover:op100"
         @click="emit('toggleShowAll', item)"
       >
         Expand
       </button>
     </div>
   </div>
-  <div v-else-if="item.type === 'no_changes_hide'" pl10>
+  <div v-else-if="item.type === 'no_changes_hide'" class="pl10">
     <div
-      flex="~ gap-2 items-center" text-sm border="l" py1
+      class="flex gap-2 items-center text-sm border-l py1"
       :class="active ? 'border-flow-line-active' : 'border-flow-line'"
     >
       <div
-        w-2 h-2 border="4" rounded-full ml--1 translate-x--0.5px
+        class="w-2 h-2 border-4 rounded-full ml--1 translate-x--0.5px"
         :class="active ? 'border-flow-line-active' : 'border-flow-line'"
       />
-      <span op50>{{ item.count }} plugins did not change the content but cost</span>
-      <DisplayDuration :duration="item.duration" :color="true" :factor="5" text-xs />
-      <span op50 flex-shrink-0>in total</span>
+      <span class="op50">{{ item.count }} plugins did not change the content but cost</span>
+      <DisplayDuration :duration="item.duration" :color="true" :factor="5" class="text-xs" />
+      <span class="op50 flex-shrink-0">in total</span>
       <button
-        border="~ base rounded-full" px2 py-px op50 hover="op100"
+        class="border border-base rounded-full px2 py-px op50 hover:op100"
         @click="emit('toggleShowAll', item)"
       >
         Hide
@@ -92,12 +92,12 @@ const importerModule = computed(() => {
     :class-node-outer="isDashed ? 'border-dashed' : ''"
     :active="active"
     class-node-inline="gap-2 items-center"
-    pl6
+    class="pl6"
     @pointerenter="enter"
   >
     <template #inner>
       <button
-        px3 py1 hover="bg-active" flex="~ inline gap-2 items-center"
+        class="px3 py1 hover:bg-active flex flex-inline gap-2 items-center"
         @click="emit('select', item)"
         @pointerdown="down"
       >
@@ -117,16 +117,16 @@ const importerModule = computed(() => {
         :duration="item.duration"
         :color="true"
         :factor="5"
-        text-xs flex-shrink-0
+        class="text-xs flex-shrink-0"
       />
       <template v-if="item.type === 'transform'">
-        <div v-if="item.content_from === item.content_to" text-xs op25>
+        <div v-if="item.content_from === item.content_to" class="text-xs op25">
           no changes
         </div>
         <div v-else>
-          <div font-mono text-xs flex="~ gap-1 items-center">
-            <span text-green>+{{ item.diff_added }}</span>
-            <span text-red>-{{ item.diff_removed }}</span>
+          <div class="font-mono text-xs flex gap-1 items-center">
+            <span class="text-green">+{{ item.diff_added }}</span>
+            <span class="text-red">-{{ item.diff_removed }}</span>
           </div>
         </div>
       </template>
@@ -136,17 +136,17 @@ const importerModule = computed(() => {
       #after
     >
       <div
-        p3 ml4 border="l" flex="~ col gap-1"
+        class="p3 ml4 border-l flex flex-col gap-1"
         :class="active ? 'border-flow-line-active' : 'border-flow-line'"
       >
-        <div flex="~ gap-2 items-center">
-          <div i-ph-arrow-elbow-left-down text-base op50 flex-none ml0.8 />
+        <div class="flex gap-2 items-center">
+          <div class="i-ph-arrow-elbow-left-down text-base op50 flex-none ml0.8" />
           <DisplayModuleId
             :id="item.importer"
             :session="session"
             :link="importerModule ? true : false"
             :class="importerModule ? 'hover:bg-active' : ''"
-            px2 py1 rounded
+            class="px2 py1 rounded"
           />
         </div>
         <DisplayModuleId
diff --git a/packages/rolldown/src/app/components/flowmap/PluginFlow.vue b/packages/rolldown/src/app/components/flowmap/PluginFlow.vue
index 6a201519..742ad467 100644
--- a/packages/rolldown/src/app/components/flowmap/PluginFlow.vue
+++ b/packages/rolldown/src/app/components/flowmap/PluginFlow.vue
@@ -98,47 +98,46 @@ function toggleShowType() {
 </script>
 
 <template>
-  <div p2 h-full w-full>
-    <div flex="~" border="~ base" rounded-2 h-full relative of-hidden>
-      <div v-if="expanded" of-hidden border="r base">
+  <div class="p2 h-full w-full">
+    <div class="flex border border-base rounded-2 h-full relative of-hidden">
+      <div v-if="expanded" class="of-hidden border-r border-base">
         <FlowmapPluginFlowTimeline
           :session="session"
           :build-metrics="buildMetrics"
         >
           <template #header>
-            <div px2 h10 border="b base" bg-base rounded-t-2 flex="~ items-center justify-end">
-              <button w8 h8 rounded-full cursor-pointer hover="bg-active" flex="~ items-center justify-center" @click="toggleExpanded(false)">
-                <i i-ph-sidebar-simple-duotone inline-flex op50 />
+            <div class="px2 h10 border-b border-base bg-base rounded-t-2 flex items-center justify-end">
+              <button class="w8 h8 rounded-full cursor-pointer hover:bg-active flex items-center justify-center" @click="toggleExpanded(false)">
+                <i class="i-ph-sidebar-simple-duotone inline-flex op50" />
               </button>
             </div>
           </template>
         </FlowmapPluginFlowTimeline>
       </div>
-      <div flex-1 h-full min-h-0 flex="~ col">
-        <div flex="~ items-center justify-between" border="b base" px2 h10 bg-base rounded-t-2 of-x-auto ws-nowrap>
-          <div flex="~ items-center" h-full>
-            <button v-if="!expanded" w8 h8 rounded-full cursor-pointer mr1 hover="bg-active" flex="~ items-center justify-center" @click="toggleExpanded(true)">
-              <i i-ph-sidebar-duotone inline-flex op50 />
+      <div class="flex-1 h-full min-h-0 flex flex-col">
+        <div class="flex items-center justify-between border-b border-base px2 h10 bg-base rounded-t-2 of-x-auto ws-nowrap">
+          <div class="flex items-center h-full">
+            <button v-if="!expanded" class="w8 h8 rounded-full cursor-pointer mr1 hover:bg-active flex items-center justify-center" @click="toggleExpanded(true)">
+              <i class="i-ph-sidebar-duotone inline-flex op50" />
             </button>
             <DataSearchPanel
-              v-model="searchValue"
-              h-full border-none selected-container-class="px0! py1 border-none bg-none flex-nowrap! h-full"
+              v-model="searchValue" selected-container-class="px0! py1 border-none bg-none flex-nowrap! h-full"
               :rules="tableFieldFilterRules"
-              class="[&_[icon-catppuccin]]:(filter-none!)"
+              class="[&_[icon-catppuccin]]:(filter-none!) h-full border-none"
             />
           </div>
-          <div v-if="showUnchangedInfo" flex="~ items-center justify-center gap1" h-full text-xs py1>
-            <p class="op50" flex="~ items-center gap-1">
+          <div v-if="showUnchangedInfo" class="flex items-center justify-center gap1 h-full text-xs py1">
+            <p class="op50 flex items-center gap-1">
               <DisplayNumberBadge :number="unchangedInfo.count" /> module unchanged, but cost <DisplayDuration :duration="unchangedInfo.duration" />
             </p>
-            <button rounded-md px2 py1 select-none h-full border="~ base rounded-lg" hover="bg-active" :title="showTypeText" @click="toggleShowType">
+            <button class="rounded-md px2 py1 select-none h-full border border-base rounded-lg hover:bg-active" :title="showTypeText" @click="toggleShowType">
               <div class="text-xs op50">
                 {{ showTypeText }}
               </div>
             </button>
           </div>
         </div>
-        <div flex-1 min-h-0 overscroll-contain>
+        <div class="flex-1 min-h-0 overscroll-contain">
           <DataPluginDetailsTable
             :session="session"
             :build-metrics="buildMetrics"
diff --git a/packages/rolldown/src/app/components/flowmap/PluginFlowTimeline.vue b/packages/rolldown/src/app/components/flowmap/PluginFlowTimeline.vue
index 80b9cce9..12e43d31 100644
--- a/packages/rolldown/src/app/components/flowmap/PluginFlowTimeline.vue
+++ b/packages/rolldown/src/app/components/flowmap/PluginFlowTimeline.vue
@@ -51,16 +51,16 @@ const endTime = computed(() => {
 </script>
 
 <template>
-  <div flex="~ col w-full">
+  <div class="flex flex-col">
     <slot name="header" />
-    <div select-none h-full of-auto ws-nowrap w-auto of-visible p4 flex="~ col">
-      <div flex="~">
+    <div class="select-none h-full of-auto ws-nowrap w-auto of-visible p4 flex flex-col">
+      <div class="flex">
         <FlowmapNode
           :active="false"
           class-node-inner="w60"
         >
           <template #content>
-            <div p2 w-full text-center @click="settings.pluginDetailSelectedHook = ''">
+            <div class="p2 w-full text-center" @click="settings.pluginDetailSelectedHook = ''">
               <DisplayPluginName
                 :name="buildMetrics.plugin_name"
                 class="font-mono text-sm ws-nowrap text-ellipsis line-clamp-1"
@@ -69,19 +69,15 @@ const endTime = computed(() => {
           </template>
         </FlowmapNode>
       </div>
-      <div flex="~ items-center justify-center" relative w-60 h14>
+      <div class="flex items-center justify-center relative w-60 h14">
         <div
-          class="border-flow-line left-50% translate-x--1/2"
-          absolute top-0 border="r" z-flowmap-line
-          h4
+          class="border-flow-line left-50% translate-x--1/2 absolute top-0 border-r z-flowmap-line h4"
         />
         <div
-          class="border-flow-line left-50% translate-x--1/2"
-          absolute top-10 border="r" z-flowmap-line
-          h4
+          class="border-flow-line left-50% translate-x--1/2 absolute top-10 border-r z-flowmap-line h4"
         />
-        <span op50 text-xs flex="~ items-center justify-center gap-1" h6>
-          <i i-ph-airplane-takeoff-thin text-4 inline-flex />
+        <span class="op50 text-xs flex items-center justify-center gap-1 h6">
+          <i class="i-ph-airplane-takeoff-thin text-4 inline-flex" />
           <time v-if="startTime" :datetime="new Date(startTime).toISOString()">{{ new Date(startTime).toLocaleString() }}</time>
         </span>
       </div>
@@ -89,14 +85,14 @@ const endTime = computed(() => {
         class-node-inner="w60"
         :class-node-outer="`${!resolveIdMetricsInfo.modules && !resolveIdMetricsInfo.calls ? `b-dashed!` : ''}`"
         class-line-bottom="left-50%! translate-x--1/2"
-        pb4 w60
+        class="pb4 w60"
         :lines="{ bottom: true }"
         :active="settings.pluginDetailSelectedHook === 'resolve'"
       >
         <template #content>
-          <div flex="~ col gap1" w-full @click="settings.pluginDetailSelectedHook = 'resolve'">
-            <span flex="~ items-center justify-center gap-1">
-              <i i-ph-magnifying-glass-duotone /> Resolve Id
+          <div class="flex flex-col gap1 w-full" @click="settings.pluginDetailSelectedHook = 'resolve'">
+            <span class="flex items-center justify-center gap-1">
+              <i class="i-ph-magnifying-glass-duotone" /> Resolve Id
             </span>
             <div>
               <FlowmapNodePluginInfo
@@ -114,13 +110,13 @@ const endTime = computed(() => {
         class-node-inner="w60"
         :class-node-outer="`${!loadMetricsInfo.modules && !loadMetricsInfo.calls ? `b-dashed!` : ''}`"
         class-line-bottom="left-50%! translate-x--1/2"
-        pb4 w60
+        class="pb4 w60"
         :lines="{ bottom: true }"
       >
         <template #content>
-          <div flex="~ col gap1" w-full @click="settings.pluginDetailSelectedHook = 'load'">
-            <span flex="~ items-center justify-center gap-1">
-              <i i-ph-upload-simple-duotone /> Load
+          <div class="flex flex-col gap1 w-full" @click="settings.pluginDetailSelectedHook = 'load'">
+            <span class="flex items-center justify-center gap-1">
+              <i class="i-ph-upload-simple-duotone" /> Load
             </span>
             <div>
               <FlowmapNodePluginInfo
@@ -139,9 +135,9 @@ const endTime = computed(() => {
         :class-node-outer="`${!transformMetricsInfo.modules && !transformMetricsInfo.calls ? `b-dashed!` : ''}`"
       >
         <template #content>
-          <div flex="~ col gap1" w-full @click="settings.pluginDetailSelectedHook = 'transform'">
-            <span flex="~ items-center justify-center gap-1">
-              <i i-ph-magic-wand-duotone /> Transform
+          <div class="flex flex-col gap1 w-full" @click="settings.pluginDetailSelectedHook = 'transform'">
+            <span class="flex items-center justify-center gap-1">
+              <i class="i-ph-magic-wand-duotone" /> Transform
             </span>
             <div>
               <FlowmapNodePluginInfo
@@ -153,23 +149,18 @@ const endTime = computed(() => {
           </div>
         </template>
       </FlowmapNode>
-      <div flex="~ items-center justify-center" relative w-60 h14>
+      <div class="flex items-center justify-center relative w-60 h14">
         <div
-          class="border-flow-line left-50% translate-x--1/2"
-          absolute top-0 border="r" z-flowmap-line
-          h4
+          class="border-flow-line left-50% translate-x--1/2 absolute top-0 border-r z-flowmap-line h4"
         />
         <div
-          class="border-flow-line left-50% translate-x--1/2"
-          absolute top-10 border="r" z-flowmap-line
-          h4
+          class="border-flow-line left-50% translate-x--1/2 absolute top-10 border-r z-flowmap-line h4"
         />
         <div
-          class="border-flow-line left-50% translate-x--1/2"
-          absolute top-14 w-2 h-2 border="4" rounded-full
+          class="border-flow-line left-50% translate-x--1/2 absolute top-14 w-2 h-2 border-4 rounded-full"
         />
-        <span op50 text-xs flex="~ items-center justify-center gap-1" h6>
-          <i i-ph-airplane-landing-thin text-4 inline-flex />
+        <span class="op50 text-xs flex items-center justify-center gap-1 h6">
+          <i class="i-ph-airplane-landing-thin text-4 inline-flex" />
           <time v-if="endTime" :datetime="new Date(endTime).toISOString()">{{ new Date(endTime).toLocaleString() }}</time>
         </span>
       </div>
diff --git a/packages/rolldown/src/app/components/modules/BuildMetrics.vue b/packages/rolldown/src/app/components/modules/BuildMetrics.vue
index 22568a36..ca8364fa 100644
--- a/packages/rolldown/src/app/components/modules/BuildMetrics.vue
+++ b/packages/rolldown/src/app/components/modules/BuildMetrics.vue
@@ -43,37 +43,37 @@ const transformedCodeSize = computed(() => {
 </script>
 
 <template>
-  <div text-xs font-mono flex="~ items-center gap-3" ml2>
+  <div class="text-xs font-mono flex items-center gap-3 ml2">
     <DisplayDuration
-      :duration="durations.resolveIds" flex="~ gap-1 items-center"
+      :duration="durations.resolveIds" class="flex gap-1 items-center"
       :title="`Resolve Id hooks cost: ${formatDuration(durations.resolveIds, true)}`"
     >
-      <span i-ph-magnifying-glass-duotone inline-block />
+      <span class="i-ph-magnifying-glass-duotone inline-block" />
     </DisplayDuration>
     <DisplayDuration
-      :duration="durations.loads" flex="~ gap-1 items-center"
+      :duration="durations.loads" class="flex gap-1 items-center"
       :title="`Load hooks cost: ${formatDuration(durations.loads, true)}`"
     >
-      <span i-ph-upload-simple-duotone inline-block />
+      <span class="i-ph-upload-simple-duotone inline-block" />
     </DisplayDuration>
     <DisplayDuration
-      :duration="durations.transforms" flex="~ gap-1 items-center"
+      :duration="durations.transforms" class="flex gap-1 items-center"
       :title="`Transform hooks cost: ${formatDuration(durations.transforms, true)}`"
     >
-      <span i-ph-magic-wand-duotone inline-block />
+      <span class="i-ph-magic-wand-duotone inline-block" />
     </DisplayDuration>
-    <span op40>|</span>
+    <span class="op40">|</span>
     <DisplayDuration
-      :duration="durations.total" flex="~ gap-1 items-center"
+      :duration="durations.total" class="flex gap-1 items-center"
       :title="`Total build cost: ${formatDuration(durations.total, true)}`"
     >
-      <span i-ph-clock-duotone inline-block />
+      <span class="i-ph-clock-duotone inline-block" />
     </DisplayDuration>
     <template v-if="sourceCodeSize && transformedCodeSize">
-      <span op40>|</span>
-      <div flex="~ gap-1 items-center">
+      <span class="op40">|</span>
+      <div class="flex gap-1 items-center">
         <DisplayFileSizeBadge title="Source code size" :bytes="sourceCodeSize" />
-        <span i-ph-arrow-right-duotone op50 />
+        <span class="i-ph-arrow-right-duotone op50" />
         <DisplayFileSizeBadge title="Transformed code size" :bytes="transformedCodeSize" />
       </div>
     </template>
diff --git a/packages/rolldown/src/app/components/modules/DetailedList.vue b/packages/rolldown/src/app/components/modules/DetailedList.vue
index eac83989..dd80c259 100644
--- a/packages/rolldown/src/app/components/modules/DetailedList.vue
+++ b/packages/rolldown/src/app/components/modules/DetailedList.vue
@@ -36,7 +36,7 @@ function isLastFilteredTransform(mod: ModuleListItem, index: number) {
 </script>
 
 <template>
-  <div flex="~ col gap-2" p4>
+  <div class="flex flex-col gap-2 p4">
     <DataVirtualList
       :items="modules"
       key-prop="id"
@@ -46,30 +46,29 @@ function isLastFilteredTransform(mod: ModuleListItem, index: number) {
       :scroller="scroller"
     >
       <template #default="{ item }">
-        <div flex pb2>
+        <div class="flex pb2">
           <DisplayModuleId
             :id="item.id"
             :session
-            hover="bg-active" block px2 p1 w-full
-            border="~ base rounded"
+            class="hover:bg-active block px2 p1 w-full border border-base rounded"
             :link="true"
           >
             <template #detail>
-              <div flex="~ gap-1 wrap" text-xs>
-                <ul flex="~ auto text-xs wrap">
+              <div class="flex gap-1 flex-wrap text-xs">
+                <ul class="flex flex-auto flex-wrap">
                   <template v-for="(p, i) of getFilteredTransforms(item)" :key="i">
-                    <li flex="~ items-center">
+                    <li class="flex items-center">
                       <DisplayPluginName
                         :name="p.plugin_name"
                         class="font-mono ws-nowrap op-50"
                       />
-                      <span v-if="!isLastFilteredTransform(item, i)" op20>|</span>
+                      <span v-if="!isLastFilteredTransform(item, i)" class="op20">|</span>
                     </li>
                   </template>
                 </ul>
 
-                <div flex="~ auto gap-1" of-hidden />
-                <div flex="~ none gap-1 wrap justify-end">
+                <div class="flex flex-auto gap-1 of-hidden" />
+                <div class="flex flex-none gap-1 flex-wrap justify-end">
                   <span>
                     <ModulesBuildMetrics v-if="item.buildMetrics" :metrics="item.buildMetrics" />
                   </span>
diff --git a/packages/rolldown/src/app/components/modules/FlatList.vue b/packages/rolldown/src/app/components/modules/FlatList.vue
index e39a62b5..1e0d8b35 100644
--- a/packages/rolldown/src/app/components/modules/FlatList.vue
+++ b/packages/rolldown/src/app/components/modules/FlatList.vue
@@ -23,7 +23,7 @@ const emit = defineEmits<{
 </script>
 
 <template>
-  <div flex="~ col gap-2" p4>
+  <div class="flex flex-col gap-2 p4">
     <DataVirtualList
       :items="modules"
       key-prop="id"
@@ -32,12 +32,11 @@ const emit = defineEmits<{
       :scroller="scroller"
     >
       <template #default="{ item }">
-        <div flex pb2 @click="emit('select', item)">
+        <div class="flex pb2" @click="emit('select', item)">
           <DisplayModuleId
             :id="item.id"
             :session
-            hover="bg-active" block px2 p1 w-full
-            border="~ base rounded"
+            class="hover:bg-active block px2 p1 w-full border border-base rounded"
             :link="link"
             :disable-tooltip="disableTooltip"
           />
diff --git a/packages/rolldown/src/app/components/modules/Folder.vue b/packages/rolldown/src/app/components/modules/Folder.vue
index c2c0a8da..b1133429 100644
--- a/packages/rolldown/src/app/components/modules/Folder.vue
+++ b/packages/rolldown/src/app/components/modules/Folder.vue
@@ -87,7 +87,7 @@ const moduleTreeRoots = computed(() => {
 
 <template>
   <DisplayVirtualTree
-    relative
+    class="relative"
     :roots="moduleTreeRoots"
     :link="true"
   />
diff --git a/packages/rolldown/src/app/components/modules/Graph.vue b/packages/rolldown/src/app/components/modules/Graph.vue
index aca9095d..f8b14ebb 100644
--- a/packages/rolldown/src/app/components/modules/Graph.vue
+++ b/packages/rolldown/src/app/components/modules/Graph.vue
@@ -181,7 +181,7 @@ createModuleGraph<ModuleListItem, ModuleImport>({
         :link="true"
         :session="session"
         :minimal="true"
-        flex="1"
+        class="flex-1"
       />
     </template>
     <template #link="{ link, d, linkClass }">
diff --git a/packages/rolldown/src/app/components/packages/Duplicated.vue b/packages/rolldown/src/app/components/packages/Duplicated.vue
index edd2f803..5192b4fc 100644
--- a/packages/rolldown/src/app/components/packages/Duplicated.vue
+++ b/packages/rolldown/src/app/components/packages/Duplicated.vue
@@ -17,14 +17,14 @@ const groupedDuplicatePackages = computed(() =>
 </script>
 
 <template>
-  <div v-if="duplicatePackages.length" min-w-max flex="~ col gap-3">
+  <div v-if="duplicatePackages.length" class="min-w-max flex flex-col gap-3">
     <div v-for="(p, i) of groupedDuplicatePackages" :key="i">
       <PackagesTable :packages="p" :session="session" group-view disable-size-sort show-used-badge />
     </div>
   </div>
   <template v-else>
-    <div p4>
-      <div w-full h-48 flex="~ items-center justify-center" op50 italic>
+    <div class="p4">
+      <div class="w-full h-48 flex items-center justify-center op50 italic">
         No duplicate packages
       </div>
     </div>
diff --git a/packages/rolldown/src/app/components/packages/Importers.vue b/packages/rolldown/src/app/components/packages/Importers.vue
index f8551a1e..77b69545 100644
--- a/packages/rolldown/src/app/components/packages/Importers.vue
+++ b/packages/rolldown/src/app/components/packages/Importers.vue
@@ -19,20 +19,20 @@ const importers = computed(() => {
 </script>
 
 <template>
-  <div flex="~ row gap-1" of-hidden>
-    <div v-if="importers[0]" flex="~ row gap-1" ws-nowrap>
+  <div class="flex flex-row gap-1 of-hidden">
+    <div v-if="importers[0]" class="flex flex-row gap-1 ws-nowrap">
       <DisplayModuleId :id="importers[0].path" :session="session" link />
       <DisplayBadge v-if="importers[0].version && showVersion" :text="importers[0].version" as="span" />
     </div>
     <span v-else>
       -
     </span>
-    <VMenu v-if="importers.length > 1" :delay="{ show: 200, hide: 0 }" flex-none>
+    <VMenu v-if="importers.length > 1" :delay="{ show: 200, hide: 0 }" class="flex-none">
       <DisplayBadge :text="`+${importers.length}`" :color="100" class="text-xs rounded px1" />
       <template #popper>
-        <div p2 flex="~ col gap-1">
-          <div v-for="importer of importers" :key="importer.path" flex="~ row gap-1 items-center nowrap" w-max>
-            <DisplayModuleId :id="importer.path" :session="session" ws-nowrap flex-1 disable-tooltip link />
+        <div class="p2 flex flex-col gap-1">
+          <div v-for="importer of importers" :key="importer.path" class="flex flex-row gap-1 items-center flex-nowrap w-max">
+            <DisplayModuleId :id="importer.path" :session="session" class="ws-nowrap flex-1" disable-tooltip link />
             <DisplayBadge v-if="importer.version && showVersion" :text="`v${importer.version}`" as="span" />
           </div>
         </div>
diff --git a/packages/rolldown/src/app/components/packages/Table.vue b/packages/rolldown/src/app/components/packages/Table.vue
index fbb2a1bf..a3b7ac1d 100644
--- a/packages/rolldown/src/app/components/packages/Table.vue
+++ b/packages/rolldown/src/app/components/packages/Table.vue
@@ -39,9 +39,8 @@ function toggleSizeSortType() {
 <template>
   <DataVirtualList
     v-if="packages.length"
-    class="packages-table"
+    class="packages-table min-w-max h-full min-h-0 border border-base rounded-xl"
     role="table"
-    min-w-max h-full min-h-0 border="~ base rounded-xl"
     :items="packages"
     key-prop="id"
     :item-size="itemSize"
@@ -49,10 +48,10 @@ function toggleSizeSortType() {
     :scroller="scroller"
   >
     <template #before>
-      <div role="row" class="border-b border-base bg-base" flex="~ row">
-        <div :title="groupView ? 'Package' : 'Bundled packages'" role="columnheader" rounded-tl-2 flex-none ws-nowrap py1.5 px2 font-600 :class="[groupView ? 'min-w40' : 'min-w80']">
+      <div role="row" class="border-b border-base bg-base flex flex-row">
+        <div :title="groupView ? 'Package' : 'Bundled packages'" role="columnheader" class="rounded-tl-2 flex-none ws-nowrap py1.5 px2 font-600" :class="[groupView ? 'min-w40' : 'min-w80']">
           <template v-if="groupView">
-            <div font-mono>
+            <div class="font-mono">
               <DisplayHighlightedPackageName :name="packages?.[0]?.name!" />
             </div>
           </template>
@@ -60,18 +59,18 @@ function toggleSizeSortType() {
             Package
           </template>
         </div>
-        <div v-if="!groupView" title="Package version" role="columnheader" rounded-tr-2 flex-none min-w40 ws-nowrap text-left py1.5 px2 font-600>
+        <div v-if="!groupView" title="Package version" role="columnheader" class="rounded-tr-2 flex-none min-w40 ws-nowrap text-left py1.5 px2 font-600">
           Version
         </div>
-        <div title="Transformed code size" role="columnheader" rounded-tr-2 flex-none ws-nowrap py1.5 font-600 min-w40 :class="[groupView ? 'px2' : 'pl2']">
-          <button flex="~ row gap1 items-center justify-end" w-full relative pr2>
+        <div title="Transformed code size" role="columnheader" class="rounded-tr-2 flex-none ws-nowrap py1.5 font-600 min-w40" :class="[groupView ? 'px2' : 'pl2']">
+          <button class="flex flex-row gap1 items-center justify-end w-full relative pr2">
             Size
-            <span v-if="!disableSizeSort" w-6 h-6 rounded-full cursor-pointer hover="bg-active" flex="~ items-center justify-center" @click="toggleSizeSortType">
-              <i text-xs :class="[sizeSortType !== 'asc' ? 'i-ph-arrow-down-duotone' : 'i-ph-arrow-up-duotone', sizeSortType ? 'op100 text-primary' : 'op50']" />
+            <span v-if="!disableSizeSort" class="w-6 h-6 rounded-full cursor-pointer hover:bg-active flex items-center justify-center" @click="toggleSizeSortType">
+              <i class="text-xs" :class="[sizeSortType !== 'asc' ? 'i-ph-arrow-down-duotone' : 'i-ph-arrow-up-duotone', sizeSortType ? 'op100 text-primary' : 'op50']" />
             </span>
           </button>
         </div>
-        <div title="Importers" role="columnheader" rounded-tr-2 flex-none ws-nowrap py1.5 pl20 pr2 font-600 min-w50>
+        <div title="Importers" role="columnheader" class="rounded-tr-2 flex-none ws-nowrap py1.5 pl20 pr2 font-600 min-w50">
           Importers
         </div>
       </div>
@@ -80,9 +79,7 @@ function toggleSizeSortType() {
     <template #default="{ item, index }">
       <NuxtLink
         role="row"
-        flex="~ row items-center"
-        h-9
-        class="border-base border-b-1 border-dashed"
+        class="border-base border-b-1 border-dashed flex flex-row items-center h-9"
         :class="[index === packages.length - 1 ? 'border-b-0' : '']"
         :to="{ path: route.path, query: { package: item.id } }"
       >
@@ -92,18 +89,17 @@ function toggleSizeSortType() {
           :disabled="item.name.length < 30"
         >
           <div
-            v-if="!groupView" role="cell" font-mono flex-none w80 py1.5 px2 ws-nowrap text-sm overflow-hidden
-            truncate
+            v-if="!groupView" role="cell" class="font-mono flex-none w80 py1.5 px2 ws-nowrap text-sm overflow-hidden truncate"
           >
             <DisplayHighlightedPackageName :name="item.name" />
           </div>
           <template #popper>
-            <span font-mono text-sm>
+            <span class="font-mono text-sm">
               {{ item.name }}
             </span>
           </template>
         </Tooltip>
-        <div role="cell" flex="~ items-center gap-1" text-left flex-none font-mono py1.5 px2 text-sm min-w40 op80 :class="{ 'text-primary': item.duplicated }">
+        <div role="cell" class="flex items-center gap-1 text-left flex-none font-mono py1.5 px2 text-sm min-w40 op80" :class="{ 'text-primary': item.duplicated }">
           <span>{{ item.version }}</span>
           <DisplayBadge
             v-if="showUsedBadge && item.isUsed === false"
@@ -112,31 +108,31 @@ function toggleSizeSortType() {
             as="span"
           />
         </div>
-        <div role="cell" flex="~ items-center justify-end" flex-none font-mono py1.5 px2 text-sm min-w40 op80>
+        <div role="cell" class="flex items-center justify-end flex-none font-mono py1.5 px2 text-sm min-w40 op80">
           <VMenu v-if="item.transformedCodeSize > 0" :delay="{ show: 200, hide: 0 }">
             <DisplayFileSizeBadge :bytes="item.transformedCodeSize" />
             <template #popper>
-              <div p2 flex="~ col gap-1">
-                <div v-for="file of item.files.filter(f => !!f.transformedCodeSize)" :key="file.path" flex="~ row gap-1 items-center nowrap" w-max>
-                  <span w24 inline-flex>
+              <div class="p2 flex flex-col gap-1">
+                <div v-for="file of item.files.filter(f => !!f.transformedCodeSize)" :key="file.path" class="flex flex-row gap-1 items-center flex-nowrap w-max">
+                  <span class="w24 inline-flex">
                     <DisplayFileSizeBadge :bytes="file.transformedCodeSize" />
                   </span>
-                  <DisplayModuleId :id="file.path" :session="session" ws-nowrap flex-1 disable-tooltip link :cwd="item.dir" />
+                  <DisplayModuleId :id="file.path" :session="session" class="ws-nowrap flex-1" disable-tooltip link :cwd="item.dir" />
                 </div>
               </div>
             </template>
           </VMenu>
-          <span v-else op50 ws-nowrap>-</span>
+          <span v-else class="op50 ws-nowrap">-</span>
         </div>
-        <div role="cell" flex="~ items-center" flex-1 font-mono py1.5 pl20 pr2 text-sm op80>
+        <div role="cell" class="flex items-center flex-1 font-mono py1.5 pl20 pr2 text-sm op80">
           <PackagesImporters :package="item" :session="session" :show-version="groupView" />
         </div>
       </NuxtLink>
     </template>
   </DataVirtualList>
-  <div v-else role="table" min-w-max border="~ base rounded-xl">
-    <div p4>
-      <div w-full h-48 flex="~ items-center justify-center" op50 italic>
+  <div v-else role="table" class="min-w-max border border-base rounded-xl">
+    <div class="p4">
+      <div class="w-full h-48 flex items-center justify-center op50 italic">
         <p>
           No data
         </p>
diff --git a/packages/rolldown/src/app/components/panel/SessionSelector.vue b/packages/rolldown/src/app/components/panel/SessionSelector.vue
index 38c82fa9..585485ee 100644
--- a/packages/rolldown/src/app/components/panel/SessionSelector.vue
+++ b/packages/rolldown/src/app/components/panel/SessionSelector.vue
@@ -60,48 +60,45 @@ function select(session: BuildInfo) {
 </script>
 
 <template>
-  <div flex="~ col gap-3">
+  <div class="flex flex-col gap-3">
     <details
       v-for="group of sessionGroups"
       :key="group.key"
       :open="isGroupOpen(group)"
       @toggle="e => toggleGroup(group, (e.target as HTMLDetailsElement)?.open)"
     >
-      <summary cursor-default select-none flex="~ gap-1 items-center" px1 py1 rounded hover="bg-active">
+      <summary class="cursor-default select-none flex gap-1 items-center px1 py1 rounded hover:bg-active">
         <div class="i-ph-caret-right-duotone transition op50" :class="isGroupOpen(group) ? 'rotate-90' : ''" />
-        <span op70 text-sm>{{ group.label }}</span>
-        <span op40 text-xs font-mono>{{ group.items.length }}</span>
+        <span class="op70 text-sm">{{ group.label }}</span>
+        <span class="op40 text-xs font-mono">{{ group.items.length }}</span>
       </summary>
 
-      <div flex="~ col gap-2" pt2>
-        <div v-for="{ session, primaryInput, additionalInputCount } of group.items" :key="session.id" flex="~ row gap-2" relative>
+      <div class="flex flex-col gap-2 pt2">
+        <div v-for="{ session, primaryInput, additionalInputCount } of group.items" :key="session.id" class="flex flex-row gap-2 relative">
           <component
             :is="sessionMode === 'list' ? NuxtLink : 'button'"
             :to="`/session/${session.id}`"
             v-bind="sessionMode !== 'list' ? { type: 'button' } : {}"
             :aria-label="`Session ${session.id}`"
-            border="~ rounded-md"
+            class="border rounded-md appearance-none bg-transparent color-base text-left flex flex-col gap-1 px4 py3 w-full"
             :class="sessionMode === 'list' ? ['hover:bg-active', 'border-base'] : [selectedSessionIds.includes(session.id) ? 'border-active' : 'border-base', checkIsDifferentEntry(session) || (selectedSessions.length === 2 && !selectedSessionIds.includes(session.id)) ? 'op50' : 'hover:bg-active']"
-            appearance-none bg-transparent color-base text-left
-            flex="~ col gap-1"
-            px4 py3 w-full
             @click="select(session)"
           >
-            <div flex="~ gap-1 items-center" font-mono op50 text-sm>
-              <div i-ph-hash-duotone />
+            <div class="flex gap-1 items-center font-mono op50 text-sm">
+              <div class="i-ph-hash-duotone" />
               {{ session.id }}
             </div>
-            <div font-mono font-sm>
+            <div class="font-mono" font-sm>
               {{ session.meta.cwd }}
             </div>
-            <div v-if="primaryInput" flex="~ gap-1 items-center">
+            <div v-if="primaryInput" class="flex gap-1 items-center">
               <DisplayModuleId :id="primaryInput.filename" :cwd="session.meta.cwd" />
               <DisplayBadge :text="primaryInput.name || 'entry'" />
-              <span v-if="additionalInputCount > 0" op50 text-xs border="~ base rounded-md" px1 font-mono>
+              <span v-if="additionalInputCount > 0" class="op50 text-xs border border-base rounded-md px1 font-mono">
                 +{{ additionalInputCount }}
               </span>
             </div>
-            <DisplayTimestamp :timestamp="session.timestamp" pt2 text-sm op50 />
+            <DisplayTimestamp :timestamp="session.timestamp" class="pt2 text-sm op50" />
           </component>
         </div>
       </div>
diff --git a/packages/rolldown/src/app/pages/compare/[sessions].vue b/packages/rolldown/src/app/pages/compare/[sessions].vue
index 758e80f4..1d99f97c 100644
--- a/packages/rolldown/src/app/pages/compare/[sessions].vue
+++ b/packages/rolldown/src/app/pages/compare/[sessions].vue
@@ -88,12 +88,12 @@ onMounted(async () => {
 
 <template>
   <VisualLoading v-if="isLoading" />
-  <div v-else grid="~ cols-[max-content_1fr]" h-screen w-screen max-w-screen max-h-screen of-hidden>
+  <div v-else class="grid grid-cols-[max-content_1fr] h-screen w-screen max-w-screen max-h-screen of-hidden">
     <PanelSideNav />
-    <div of-auto h-screen max-h-screen relative p6 flex="~ col gap-4">
-      <div flex="~ gap-2 items-center">
-        <NuxtLink btn-action :to="{ path: `/` }">
-          <div i-ph-arrow-bend-up-left-duotone />
+    <div class="of-auto h-screen max-h-screen relative p6 flex flex-col gap-4">
+      <div class="flex gap-2 items-center">
+        <NuxtLink class="btn-action" :to="{ path: `/` }">
+          <div class="i-ph-arrow-bend-up-left-duotone" />
           Re-select Session
         </NuxtLink>
       </div>
diff --git a/packages/rolldown/src/app/pages/index.vue b/packages/rolldown/src/app/pages/index.vue
index e40e094d..18e08715 100644
--- a/packages/rolldown/src/app/pages/index.vue
+++ b/packages/rolldown/src/app/pages/index.vue
@@ -58,32 +58,32 @@ function selectSession(session: BuildInfo) {
 </script>
 
 <template>
-  <div p4 flex="~ col gap-4" items-center justify-center relative>
+  <div class="p4 flex flex-col gap-4 items-center justify-center relative">
     <BannerRolldownDevTools />
-    <p v-if="sessions.length" op50>
+    <p v-if="sessions.length" class="op50">
       {{ sessionMode === 'list' ? 'Select a build session to get started:' : 'Select 2 build sessions to compare:' }}
     </p>
-    <div v-else flex="~ col gap-3" items-center max-w-140>
-      <p m0 op50 text-center>
+    <div v-else class="flex flex-col gap-3 items-center max-w-140">
+      <p class="m0 op50 text-center">
         No sessions yet.
         <br>
         Enable devtools output in your Rolldown config, then run a build:
       </p>
-      <div relative w-full>
-        <pre m0 p3 pr10 rounded-lg border="~ base" bg-code font-mono text-sm of-auto text-left><code>{{ ENABLE_DEVTOOLS_SNIPPET }}</code></pre>
+      <div class="relative w-full">
+        <pre class="m0 p3 pr10 rounded-lg border border-base bg-code font-mono text-sm of-auto text-left"><code>{{ ENABLE_DEVTOOLS_SNIPPET }}</code></pre>
         <DisplayIconButton
-          absolute top2 right2
+          class="absolute" top2 right2
           title="Copy snippet"
           class-icon="i-ph-copy-duotone"
           :active="copied"
           @click="copy()"
         />
       </div>
-      <p m0 op40 text-sm text-center>
-        See <a href="https://github.com/vitejs/devtools/blob/main/docs/errors/RDDT0001.md" target="_blank" rel="noopener" hover="op100 underline">RDDT0001</a> for details.
+      <p class="m0 op40 text-sm text-center">
+        See <a href="https://github.com/vitejs/devtools/blob/main/docs/errors/RDDT0001.md" target="_blank" rel="noopener" class="hover:op100 hover:underline">RDDT0001</a> for details.
       </p>
     </div>
-    <div relative flex="~ col gap3 items-center">
+    <div class="relative flex flex-col gap3 items-center">
       <PanelSessionSelector
         :session-mode="sessionMode"
         :sessions="sessions"
@@ -92,20 +92,20 @@ function selectSession(session: BuildInfo) {
         @select="selectSession"
       />
     </div>
-    <div v-if="sessions.length" fixed top-5 right-5 flex="~ col gap2">
-      <div flex="~ row justify-around" w20 h8 border="~ base rounded-8" of-hidden>
-        <button v-for="mode in modeList" :key="mode.value" :title="mode.label" flex-1 op50 flex="~ items-center justify-center" :class="{ 'bg-active text-base op100!': sessionMode === mode.value }" hover="bg-active text-base op100!" @click="sessionMode = mode.value">
+    <div v-if="sessions.length" class="fixed top-5 right-5 flex flex-col gap2">
+      <div class="flex flex-row justify-around w20 h8 border border-base rounded-8 of-hidden">
+        <button v-for="mode in modeList" :key="mode.value" :title="mode.label" class="flex-1 op50 flex items-center justify-center hover:bg-active hover:text-base hover:op100!" :class="{ 'bg-active text-base op100!': sessionMode === mode.value }" @click="sessionMode = mode.value">
           <span :class="mode.icon" class="text-sm" />
         </button>
       </div>
     </div>
-    <div v-if="selectedSessions.length > 0 && sessionMode === 'compare'" fixed bottom-5 right-5 border="~ base rounded-2" w100 max-lg:w85 bg-glass z-panel-content>
+    <div v-if="selectedSessions.length > 0 && sessionMode === 'compare'" class="fixed bottom-5 right-5 border border-base rounded-2 w100 max-lg:w85 bg-glass z-panel-content">
       <CompareSessionMeta :sessions="normalizedSelectedSessions" class="flex-col gap0 [&>div]:border-none! [&>first-child]:border-b!" />
-      <div flex="~ justify-center" p2>
-        <NuxtLink v-if="selectedSessions.length === 2" tag="button" :to="`/compare/${selectedSessionIds.join(',')}`" btn-action rounded-8 text-3 flex="~ justify-center" w30 h8>
+      <div class="flex justify-center p2">
+        <NuxtLink v-if="selectedSessions.length === 2" tag="button" :to="`/compare/${selectedSessionIds.join(',')}`" class="btn-action rounded-8 text-3 flex justify-center w30 h8">
           Compare
         </NuxtLink>
-        <div v-else op80 text-sm>
+        <div v-else class="op80 text-sm">
           Select one more session to compare.
         </div>
       </div>
diff --git a/packages/rolldown/src/app/pages/session/[session].vue b/packages/rolldown/src/app/pages/session/[session].vue
index 26d96d62..1112bb1d 100644
--- a/packages/rolldown/src/app/pages/session/[session].vue
+++ b/packages/rolldown/src/app/pages/session/[session].vue
@@ -102,22 +102,20 @@ onMounted(async () => {
 
 <template>
   <VisualLoading v-if="isLoading" />
-  <div v-else grid="~ cols-[max-content_1fr]" h-screen w-screen max-w-screen max-h-screen of-hidden>
+  <div v-else class="grid grid-cols-[max-content_1fr] h-screen w-screen max-w-screen max-h-screen of-hidden">
     <PanelSideNav />
-    <div of-auto h-screen max-h-screen relative>
+    <div class="of-auto h-screen max-h-screen relative">
       <NuxtPage :session="session" />
     </div>
 
     <div
-      v-if="currentPanelType" fixed inset-0
-      backdrop-blur-8 backdrop-brightness-95 z-panel-content
+      v-if="currentPanelType" class="fixed inset-0 backdrop-blur-8 backdrop-brightness-95 z-panel-content"
       @click.self="closeCurrentPanel"
     >
       <div
         v-if="currentPanelType === 'module'"
         :key="(route.query.module as string)"
-        fixed right-0 bottom-0 top-20 left-20 z-panel-content
-        bg-glass border="l t base rounded-tl-xl"
+        class="fixed right-0 bottom-0 top-20 left-20 z-panel-content bg-glass border-l border-t border-base rounded-tl-xl"
       >
         <DataModuleDetailsLoader
           :module="(route.query.module as string)"
@@ -128,9 +126,7 @@ onMounted(async () => {
       <div
         v-if="currentPanelType === 'asset'"
         :key="(route.query.asset as string)"
-        fixed right-0 bottom-0 top-30 z-panel-content of-hidden
-        bg-glass border="l t base rounded-tl-xl"
-        class="left-20 xl:left-100 2xl:left-150"
+        class="left-20 xl:left-100 2xl:left-150 fixed right-0 bottom-0 top-30 z-panel-content of-hidden bg-glass border-l border-t border-base rounded-tl-xl"
       >
         <DataAssetDetailsLoader
           :asset="(route.query.asset as string)"
@@ -141,8 +137,7 @@ onMounted(async () => {
       <div
         v-if="currentPanelType === 'plugin'"
         :key="(route.query.plugin as string)"
-        fixed right-0 bottom-0 top-20 left-20 z-panel-content
-        bg-glass border="l t base rounded-tl-xl"
+        class="fixed right-0 bottom-0 top-20 left-20 z-panel-content bg-glass border-l border-t border-base rounded-tl-xl"
       >
         <DataPluginDetailsLoader
           :plugin="(route.query.plugin as string)"
@@ -153,9 +148,7 @@ onMounted(async () => {
       <div
         v-if="currentPanelType === 'chunk'"
         :key="(route.query.chunk as string)"
-        fixed right-0 bottom-0 top-20 z-panel-content
-        bg-glass border="l t base rounded-tl-xl"
-        class="left-20 xl:left-100 2xl:left-150"
+        class="left-20 xl:left-100 2xl:left-150 fixed right-0 bottom-0 top-20 z-panel-content bg-glass border-l border-t border-base rounded-tl-xl"
       >
         <DataChunkDetailsLoader
           :chunk="(Number(route.query.chunk))"
@@ -166,9 +159,7 @@ onMounted(async () => {
       <div
         v-if="currentPanelType === 'package'"
         :key="(route.query.package as string)"
-        fixed right-0 bottom-0 top-20 z-panel-content
-        bg-glass border="l t base rounded-tl-xl"
-        class="left-20 xl:left-100 2xl:left-150"
+        class="left-20 xl:left-100 2xl:left-150 fixed right-0 bottom-0 top-20 z-panel-content bg-glass border-l border-t border-base rounded-tl-xl"
       >
         <DataPackageDetailsLoader
           :package="(route.query.package as string)"
diff --git a/packages/rolldown/src/app/pages/session/[session]/assets.vue b/packages/rolldown/src/app/pages/session/[session]/assets.vue
index db74188c..683e3ee6 100644
--- a/packages/rolldown/src/app/pages/session/[session]/assets.vue
+++ b/packages/rolldown/src/app/pages/session/[session]/assets.vue
@@ -138,15 +138,15 @@ watch(() => settings.value.assetViewType, () => {
 
 <template>
   <VisualLoading v-if="isLoading" />
-  <div v-else relative>
-    <div sticky left-4 right-4 top-4 z-panel-nav p-4>
+  <div v-else class="relative">
+    <div class="sticky left-4 right-4 top-4 z-panel-nav p-4">
       <DataSearchPanel v-model="searchValue" :rules="[]">
-        <div flex="~ wrap gap-2 items-center" p2 border="t base">
-          <span op50 pl2 text-sm>View as</span>
+        <div class="flex flex-wrap gap-2 items-center p2 border-t border-base">
+          <span class="op50 pl2 text-sm">View as</span>
           <button
             v-for="viewType of assetViewTypes"
             :key="viewType.value"
-            btn-action
+            class="btn-action"
             :class="settings.assetViewType === viewType.value ? 'bg-active' : 'grayscale op50'"
             @click="toggleDisplay(viewType.value)"
           >
@@ -159,9 +159,9 @@ watch(() => settings.value.assetViewType, () => {
     <template v-if="settings.assetViewType === 'list'">
       <AssetsList v-if="searched?.length" :assets="searched" :session="session" />
       <div
-        fixed bottom-4 py-1 px-2 bg-glass left="1/2" translate-x="-1/2" border="~ base rounded-full" text="center xs"
+        class="fixed bottom-4 py-1 px-2 bg-glass left-1/2 translate-x--1/2 border border-base rounded-full text-center text-xs"
       >
-        <span op50>{{ searched.length }} of {{ assets?.length || 0 }}</span>
+        <span class="op50">{{ searched.length }} of {{ assets?.length || 0 }}</span>
       </div>
     </template>
     <template v-else-if="settings.assetViewType === 'folder'">
@@ -175,7 +175,7 @@ watch(() => settings.value.assetViewType, () => {
       >
         <template #default="{ selected, options, onSelect }">
           <ChartNavBreadcrumb
-            border="b base" py2 min-h-10
+            class="border-b border-base py2 min-h-10"
             :selected="selected"
             :options="options"
             @select="onSelect"
@@ -198,13 +198,12 @@ watch(() => settings.value.assetViewType, () => {
     <DisplayGraphHoverView :hover-x="mouse.x" :hover-y="mouse.y">
       <div
         v-if="nodeHover?.meta"
-        bg-glass border="~ base rounded" p2 text-sm
-        flex="~ col gap-2"
+        class="bg-glass border border-base rounded p2 text-sm flex flex-col gap-2"
       >
-        <div flex="~ gap-1 items-center">
+        <div class="flex gap-1 items-center">
           {{ nodeHover.text }}
         </div>
-        <div flex="~ gap-1 items-center">
+        <div class="flex gap-1 items-center">
           <DisplayFileSizeBadge :bytes="nodeHover.size" :percent="false" />
         </div>
       </div>
diff --git a/packages/rolldown/src/app/pages/session/[session]/chunks.vue b/packages/rolldown/src/app/pages/session/[session]/chunks.vue
index d19e4942..0824397a 100644
--- a/packages/rolldown/src/app/pages/session/[session]/chunks.vue
+++ b/packages/rolldown/src/app/pages/session/[session]/chunks.vue
@@ -208,8 +208,8 @@ watch(() => settings.value.chunkViewType, () => {
 
 <template>
   <VisualLoading v-if="isLoading" />
-  <div v-else relative :class="{ 'max-h-screen of-hidden': settings.chunkViewType === 'graph' }">
-    <div sticky left-4 right-4 top-4 z-panel-nav p-4>
+  <div v-else class="relative" :class="{ 'max-h-screen of-hidden': settings.chunkViewType === 'graph' }">
+    <div class="sticky left-4 right-4 top-4 z-panel-nav p-4">
       <DataSearchPanel v-model="searchValue" :rules="[]">
         <template v-if="pathSelectorVisible" #search>
           <DataPathSelector :data="searched" import-id-key="chunk_id" :search-keys="['name']" @select="selectPathNodes" @close="togglePathSelector(false)">
@@ -230,22 +230,21 @@ watch(() => settings.value.chunkViewType, () => {
         <template #search-end>
           <div
             v-if="settings.chunkViewType === 'graph'"
-            h10 mr2 flex="~ items-center"
+            class="h10 mr2 flex items-center"
           >
             <button
-              w-8 h-8 rounded-full flex items-center justify-center
-              hover="bg-active op100" op50 title="Graph Path Selector" @click="togglePathSelector(true)"
+              class="w-8 h-8 rounded-full flex items-center justify-center hover:bg-active hover:op100 op50" title="Graph Path Selector" @click="togglePathSelector(true)"
             >
-              <i i-ri:route-line flex />
+              <i class="i-ri:route-line flex" />
             </button>
           </div>
         </template>
-        <div flex="~ wrap gap-2 items-center" p2 border="t base">
-          <span op50 pl2 text-sm>View as</span>
+        <div class="flex flex-wrap gap-2 items-center p2 border-t border-base">
+          <span class="op50 pl2 text-sm">View as</span>
           <button
             v-for="viewType of chunkViewTypes"
             :key="viewType.value"
-            btn-action
+            class="btn-action"
             :class="settings.chunkViewType === viewType.value ? 'bg-active' : 'grayscale op50'"
             @click="toggleDisplay(viewType.value)"
           >
@@ -257,7 +256,7 @@ watch(() => settings.value.chunkViewType, () => {
     </div>
     <div
       v-if="settings.chunkViewType === 'list'"
-      class="px5 pt-4" flex="~ col gap-4"
+      class="px5 pt-4 flex flex-col gap-4"
     >
       <ChunksFlatList
         :session="session"
@@ -267,7 +266,7 @@ watch(() => settings.value.chunkViewType, () => {
     </div>
     <div
       v-else-if="settings.chunkViewType === 'detailed-list'"
-      class="px5 pt-4" flex="~ col gap-4"
+      class="px5 pt-4 flex flex-col gap-4"
     >
       <DataVirtualList
         :items="searched"
@@ -276,10 +275,9 @@ watch(() => settings.value.chunkViewType, () => {
         :min-item-size="220"
       >
         <template #default="{ item }">
-          <div pb4>
+          <div class="pb4">
             <DataChunkDetails
-              border="~ base rounded-lg"
-              p3
+              class="border border-base rounded-lg p3"
               :chunk="item"
               :chunks="searched"
               :session="session"
@@ -297,7 +295,7 @@ watch(() => settings.value.chunkViewType, () => {
     />
     <div
       v-else-if="settings.chunkViewType === 'treemap'"
-      flex="~ col gap-2"
+      class="flex flex-col gap-2"
     >
       <ChartTreemap
         v-if="graph"
@@ -307,7 +305,7 @@ watch(() => settings.value.chunkViewType, () => {
       >
         <template #default="{ selected, options, onSelect }">
           <ChartNavBreadcrumb
-            border="b base" py2 min-h-10
+            class="border-b border-base py2 min-h-10"
             :selected="selected"
             :options="options"
             @select="onSelect"
@@ -317,7 +315,7 @@ watch(() => settings.value.chunkViewType, () => {
     </div>
     <div
       v-else-if="settings.chunkViewType === 'sunburst'"
-      flex="~ col gap-2" pt-4
+      class="flex flex-col gap-2 pt-4"
     >
       <ChunksSunburst
         v-if="graph"
@@ -328,7 +326,7 @@ watch(() => settings.value.chunkViewType, () => {
     </div>
     <div
       v-else-if="settings.chunkViewType === 'flamegraph'"
-      flex="~ col gap-2" pt-4
+      class="flex flex-col gap-2 pt-4"
     >
       <ChunksFlamegraph
         v-if="graph" :graph="graph"
@@ -338,24 +336,21 @@ watch(() => settings.value.chunkViewType, () => {
     <DisplayGraphHoverView :hover-x="mouse.x" :hover-y="mouse.y">
       <div
         v-if="nodeHover?.meta"
-        border="~ base rounded-lg" bg-base p2
-        flex="~ col gap-2"
-        min-w-50
-        shadow-lg
+        class="border border-base rounded-lg bg-base p2 flex flex-col gap-2 min-w-50 shadow-lg"
       >
-        <div flex="~ gap-2 items-center">
-          <i i-ph-shapes-duotone flex-none />
-          <span truncate>{{ nodeHover.meta.name || '[unnamed]' }}</span>
+        <div class="flex gap-2 items-center">
+          <i class="i-ph-shapes-duotone flex-none" />
+          <span class="truncate">{{ nodeHover.meta.name || '[unnamed]' }}</span>
         </div>
-        <div flex="~ gap-2 items-center">
-          <span op50 text-xs>Size:</span>
-          <DisplayFileSizeBadge :bytes="nodeHover.meta.size" text-xs />
+        <div class="flex gap-2 items-center">
+          <span class="op50 text-xs">Size:</span>
+          <DisplayFileSizeBadge :bytes="nodeHover.meta.size" class="text-xs" />
         </div>
-        <div v-if="nodeHover.meta.modules?.length" flex="~ gap-2 items-center">
-          <span op50 text-xs>Modules:</span>
-          <span text-xs>{{ nodeHover.meta.modules?.length }}</span>
+        <div v-if="nodeHover.meta.modules?.length" class="flex gap-2 items-center">
+          <span class="op50 text-xs">Modules:</span>
+          <span class="text-xs">{{ nodeHover.meta.modules?.length }}</span>
         </div>
-        <div v-if="nodeHover.meta.is_initial" flex="~ gap-2 items-center">
+        <div v-if="nodeHover.meta.is_initial" class="flex gap-2 items-center">
           <DisplayBadge text="initial" />
         </div>
       </div>
diff --git a/packages/rolldown/src/app/pages/session/[session]/graph/index.vue b/packages/rolldown/src/app/pages/session/[session]/graph/index.vue
index fe473d26..7e754fce 100644
--- a/packages/rolldown/src/app/pages/session/[session]/graph/index.vue
+++ b/packages/rolldown/src/app/pages/session/[session]/graph/index.vue
@@ -136,8 +136,8 @@ function toggleDisplay(type: ClientSettings['moduleGraphViewType']) {
 </script>
 
 <template>
-  <div relative :class="{ 'max-h-screen of-hidden': settings.moduleGraphViewType === 'graph' }">
-    <div sticky left-4 right-4 top-4 z-panel-nav p-4>
+  <div class="relative" :class="{ 'max-h-screen of-hidden': settings.moduleGraphViewType === 'graph' }">
+    <div class="sticky left-4 right-4 top-4 z-panel-nav p-4">
       <DataSearchPanel v-model="searchValue" :rules="searchFilterTypes">
         <template v-if="pathSelectorVisible" #search>
           <DataPathSelector :data="searched" import-id-key="module_id" :search-keys="['id']" @select="selectPathNodes" @close="togglePathSelector(false)">
@@ -155,7 +155,7 @@ function toggleDisplay(type: ClientSettings['moduleGraphViewType']) {
               <DisplayModuleId
                 :id="id"
                 :session="session"
-                block text-nowrap
+                class="block text-nowrap"
                 :link="false"
                 :disable-tooltip="true"
               />
@@ -163,21 +163,20 @@ function toggleDisplay(type: ClientSettings['moduleGraphViewType']) {
           </DataPathSelector>
         </template>
         <template #search-end>
-          <div v-if="settings.moduleGraphViewType === 'graph'" h10 mr2 flex="~ items-center">
+          <div v-if="settings.moduleGraphViewType === 'graph'" class="h10 mr2 flex items-center">
             <button
-              w-8 h-8 rounded-full flex items-center justify-center
-              hover="bg-active op100" op50 title="Graph Path Selector" @click="togglePathSelector(true)"
+              class="w-8 h-8 rounded-full flex items-center justify-center hover:bg-active hover:op100 op50" title="Graph Path Selector" @click="togglePathSelector(true)"
             >
-              <i i-ri:route-line flex />
+              <i class="i-ri:route-line flex" />
             </button>
           </div>
         </template>
-        <div flex="~ wrap gap-2 items-center" p2 border="t base">
-          <span op50 pl2 text-sm>View as</span>
+        <div class="flex flex-wrap gap-2 items-center p2 border-t border-base">
+          <span class="op50 pl2 text-sm">View as</span>
           <button
             v-for="viewType of moduleViewTypes"
             :key="viewType.value"
-            btn-action
+            class="btn-action"
             :class="settings.moduleGraphViewType === viewType.value ? 'bg-active' : 'grayscale op50'"
             @click="toggleDisplay(viewType.value)"
           >
@@ -211,9 +210,9 @@ function toggleDisplay(type: ClientSettings['moduleGraphViewType']) {
     />
     <div
       v-if="settings.moduleGraphViewType === 'list' || settings.moduleGraphViewType === 'detailed-list'"
-      fixed bottom-4 py-1 px-2 bg-glass left="1/2" translate-x="-1/2" border="~ base rounded-full" text="center xs"
+      class="fixed bottom-4 py-1 px-2 bg-glass left-1/2 translate-x--1/2 border border-base rounded-full text-center text-xs"
     >
-      <span op50>{{ searched.length }} of {{ session.modulesList.length }}</span>
+      <span class="op50">{{ searched.length }} of {{ session.modulesList.length }}</span>
     </div>
   </div>
 </template>
diff --git a/packages/rolldown/src/app/pages/session/[session]/index.vue b/packages/rolldown/src/app/pages/session/[session]/index.vue
index 52577c92..b6dd8fb8 100644
--- a/packages/rolldown/src/app/pages/session/[session]/index.vue
+++ b/packages/rolldown/src/app/pages/session/[session]/index.vue
@@ -68,50 +68,50 @@ const dataTable = computed<DataTableItem[]>(() => {
 </script>
 
 <template>
-  <div flex="~ col gap-2" p6>
-    <div flex="~ gap-2">
-      <NuxtLink btn-action :to="{ path: `/` }">
-        <div i-ph-arrow-bend-up-left-duotone />
+  <div class="flex flex-col gap-2 p6">
+    <div class="flex gap-2">
+      <NuxtLink class="btn-action" :to="{ path: `/` }">
+        <div class="i-ph-arrow-bend-up-left-duotone" />
         Re-select Session
       </NuxtLink>
     </div>
 
-    <div op50 mt-10>
+    <div class="op50 mt-10">
       Meta Info
     </div>
-    <div border="~ base rounded" p4 grid="~ cols-[max-content_160px_2fr] gap-2 items-center">
+    <div class="border border-base rounded p4 grid grid-cols-[max-content_160px_2fr] gap-2 items-center">
       <template v-for="item of dataTable" :key="item.title">
         <div :class="item.icon" />
         <div>
           {{ item.title }}
         </div>
-        <div font-mono truncate>
+        <div class="font-mono truncate">
           <time v-if="(item.value instanceof Date)" :datetime="item.value.toISOString()">{{ item.value.toLocaleString() }}</time>
-          <DisplayBadge v-else-if="item.type === 'badge'" :text="String(item.value)" py1 />
+          <DisplayBadge v-else-if="item.type === 'badge'" :text="String(item.value)" class="py1" />
           <DisplayDuration v-else-if="item.type === 'duration'" :duration="+item.value" />
-          <DisplayNumberBadge v-else-if="typeof item.value === 'number'" :number="item.value" py1 rounded-full inline-block text-sm />
+          <DisplayNumberBadge v-else-if="typeof item.value === 'number'" :number="item.value" class="py1 rounded-full inline-block text-sm" />
           <span v-else>{{ item.value }}</span>
         </div>
       </template>
     </div>
 
-    <div op50 mt-4>
+    <div class="op50 mt-4">
       Build Entries
     </div>
-    <div border="~ base rounded" p4 grid="~ cols-[max-content_1fr] gap-2 items-center">
+    <div class="border border-base rounded p4 grid grid-cols-[max-content_1fr] gap-2 items-center">
       <template v-for="input of props.session.meta.inputs" :key="input">
         <DisplayBadge :text="input.name || ''" />
         <DisplayModuleId :id="input.filename || ''" :session="session" :link="true" />
       </template>
     </div>
 
-    <div op50 mt-4>
+    <div class="op50 mt-4">
       Views
     </div>
-    <div flex="~ wrap gap-2">
+    <div class="flex flex-wrap gap-2">
       <template v-for="item of sideNavItems" :key="item.to">
-        <NuxtLink v-if="item.category === 'session'" btn-action :to="{ path: item.to }" flex="~ col" min-w-40 p4>
-          <div :class="item.icon" text-2xl />
+        <NuxtLink v-if="item.category === 'session'" class="btn-action flex flex-col min-w-40 p4" :to="{ path: item.to }">
+          <div :class="item.icon" class="text-2xl" />
           {{ item.title }}
         </NuxtLink>
       </template>
diff --git a/packages/rolldown/src/app/pages/session/[session]/packages.vue b/packages/rolldown/src/app/pages/session/[session]/packages.vue
index f5dab8a9..16a469ba 100644
--- a/packages/rolldown/src/app/pages/session/[session]/packages.vue
+++ b/packages/rolldown/src/app/pages/session/[session]/packages.vue
@@ -170,23 +170,23 @@ watch(() => settings.value.packageViewType, () => {
 
 <template>
   <VisualLoading v-if="isLoading" />
-  <div v-else-if="!isSupported" h-full flex="~ col gap-2 items-center justify-center" p4 text-center>
-    <p m0 op50>
+  <div v-else-if="!isSupported" class="h-full flex flex-col gap-2 items-center justify-center p4 text-center">
+    <p class="m0 op50">
       Package graph is not available for this build
     </p>
-    <p m0 op40 text-sm>
+    <p class="m0 op40 text-sm">
       Rebuild with Rolldown 1.0.2 or later to generate it.
     </p>
   </div>
-  <div v-else relative h-full min-h-0 flex="~ col">
-    <div sticky left-4 right-4 top-4 z-panel-nav p-4>
+  <div v-else class="relative h-full min-h-0 flex flex-col">
+    <div class="sticky left-4 right-4 top-4 z-panel-nav p-4">
       <DataSearchPanel v-model="searchValue" :rules="packageTypeRules">
-        <div flex="~ wrap gap-2 items-center" p2 border="t base">
-          <span op50 pl2 text-sm>View as</span>
+        <div class="flex flex-wrap gap-2 items-center p2 border-t border-base">
+          <span class="op50 pl2 text-sm">View as</span>
           <button
             v-for="viewType of packageViewTypes"
             :key="viewType.value"
-            btn-action
+            class="btn-action"
             :class="settings.packageViewType === viewType.value ? 'bg-active' : 'grayscale op50'"
             @click="toggleDisplay(viewType.value)"
           >
@@ -197,16 +197,15 @@ watch(() => settings.value.packageViewType, () => {
       </DataSearchPanel>
     </div>
     <div
-      flex="~ col gap-2"
-      flex-1 min-h-0 pt4 px4 pb4 overflow-x-auto
+      class="flex flex-col gap-2 flex-1 min-h-0 pt4 px4 pb4 overflow-x-auto"
       :class="settings.packageViewType === 'table' ? 'overflow-y-hidden' : 'overflow-y-auto'"
     >
       <template v-if="settings.packageViewType === 'table'">
         <PackagesTable :packages="normalizedPackages" :session="session" />
         <div
-          fixed bottom-4 py-1 px-2 bg-glass left="1/2" translate-x="-1/2" border="~ base rounded-full" text="center xs"
+          class="fixed bottom-4 py-1 px-2 bg-glass left-1/2 translate-x--1/2 border border-base rounded-full text-center text-xs"
         >
-          <span op50>{{ normalizedPackages.length }} of {{ packages.length }}</span>
+          <span class="op50">{{ normalizedPackages.length }} of {{ packages.length }}</span>
         </div>
       </template>
       <template v-else-if="settings.packageViewType === 'treemap'">
@@ -218,14 +217,14 @@ watch(() => settings.value.packageViewType, () => {
         >
           <template #default="{ selected, options, onSelect }">
             <ChartNavBreadcrumb
-              border="b base" py2 min-h-10
+              class="border-b border-base py2 min-h-10"
               :selected="selected"
               :options="options"
               @select="onSelect"
             />
           </template>
         </ChartTreemap>
-        <span v-else w-full h-48 flex="~ items-center justify-center" op50 italic>
+        <span v-else class="w-full h-48 flex items-center justify-center op50 italic">
           No Data
         </span>
       </template>
@@ -236,13 +235,12 @@ watch(() => settings.value.packageViewType, () => {
     <DisplayGraphHoverView :hover-x="mouse.x" :hover-y="mouse.y">
       <div
         v-if="nodeHover?.meta"
-        bg-glass border="~ base rounded" p2 text-sm
-        flex="~ col gap-2"
+        class="bg-glass border border-base rounded p2 text-sm flex flex-col gap-2"
       >
-        <div flex="~ gap-1 items-center">
+        <div class="flex gap-1 items-center">
           {{ nodeHover.text }}
         </div>
-        <div flex="~ gap-1 items-center">
+        <div class="flex gap-1 items-center">
           <DisplayFileSizeBadge :bytes="nodeHover.size" :percent="false" />
         </div>
       </div>
diff --git a/packages/rolldown/src/app/pages/session/[session]/plugins.vue b/packages/rolldown/src/app/pages/session/[session]/plugins.vue
index 1b0b144f..9eae5d0b 100644
--- a/packages/rolldown/src/app/pages/session/[session]/plugins.vue
+++ b/packages/rolldown/src/app/pages/session/[session]/plugins.vue
@@ -78,15 +78,15 @@ watchDebounced(
 </script>
 
 <template>
-  <div relative min-h-screen>
-    <div sticky left-4 right-4 top-4 z-panel-nav p-4>
+  <div class="relative min-h-screen">
+    <div class="sticky left-4 right-4 top-4 z-panel-nav p-4">
       <DataSearchPanel v-model="searchValue" :rules="searchFilterTypes" />
     </div>
     <PluginsFlatList :plugins="searched ?? []" scroller="window" />
     <div
-      fixed bottom-4 py-1 px-2 bg-glass left="1/2" translate-x="-1/2" border="~ base rounded-full" text="center xs"
+      class="fixed bottom-4 py-1 px-2 bg-glass left-1/2 translate-x--1/2 border border-base rounded-full text-center text-xs"
     >
-      <span op50>{{ searched.length }} of {{ session?.meta?.plugins?.length || 0 }}</span>
+      <span class="op50">{{ searched.length }} of {{ session?.meta?.plugins?.length || 0 }}</span>
     </div>
   </div>
 </template>
diff --git a/packages/ui/src/components/Chart/ChartNavBreadcrumb.vue b/packages/ui/src/components/Chart/ChartNavBreadcrumb.vue
index e0e2c838..371a0d7d 100644
--- a/packages/ui/src/components/Chart/ChartNavBreadcrumb.vue
+++ b/packages/ui/src/components/Chart/ChartNavBreadcrumb.vue
@@ -22,11 +22,11 @@ const parentStack = computed(() => {
 </script>
 
 <template>
-  <div flex="~ gap-1 items-center wrap">
+  <div class="flex gap-1 items-center flex-wrap">
     <template v-for="node, idx of parentStack" :key="node.id">
-      <div v-if="idx > 0" i-ph-arrow-right-bold text-sm op-fade />
+      <div v-if="idx > 0" class="i-ph-arrow-right-bold text-sm op-fade" />
       <button
-        hover="bg-active" rounded px1
+        class="hover:bg-active rounded px1"
         @click="emit('select', node)"
       >
         <span>{{ node.text || node.id }}</span>
diff --git a/packages/ui/src/components/Code/CodeDiffEditor.vue b/packages/ui/src/components/Code/CodeDiffEditor.vue
index bd0be95e..278d7d7c 100644
--- a/packages/ui/src/components/Code/CodeDiffEditor.vue
+++ b/packages/ui/src/components/Code/CodeDiffEditor.vue
@@ -248,10 +248,10 @@ onBeforeUnmount(() => {
 <template>
   <Splitpanes @resize="onUpdate">
     <Pane v-show="!oneColumn" min-size="10" :size="leftPanelSize">
-      <div ref="fromEl" h-inherit />
+      <div ref="fromEl" class="h-inherit" />
     </Pane>
     <Pane min-size="10" :size="100 - leftPanelSize">
-      <div ref="toEl" h-inherit />
+      <div ref="toEl" class="h-inherit" />
     </Pane>
   </Splitpanes>
 </template>
diff --git a/packages/ui/src/components/Container/ContainerCard.vue b/packages/ui/src/components/Container/ContainerCard.vue
index 10a8ddae..73085079 100644
--- a/packages/ui/src/components/Container/ContainerCard.vue
+++ b/packages/ui/src/components/Container/ContainerCard.vue
@@ -6,12 +6,12 @@
 </script>
 
 <template>
-  <div bg-base border="~ base rounded-lg" of-hidden>
-    <div v-if="$slots.header" px4 py2 border="b base">
+  <div class="bg-base border border-base rounded-lg of-hidden">
+    <div v-if="$slots.header" class="px4 py2 border-b border-base">
       <slot name="header" />
     </div>
     <slot />
-    <div v-if="$slots.footer" px6 py4 border="t base">
+    <div v-if="$slots.footer" class="px6 py4 border-t border-base">
       <slot name="footer" />
     </div>
   </div>
diff --git a/packages/ui/src/components/Data/DataPathSelector.vue b/packages/ui/src/components/Data/DataPathSelector.vue
index 05ff5c21..be7ce82b 100644
--- a/packages/ui/src/components/Data/DataPathSelector.vue
+++ b/packages/ui/src/components/Data/DataPathSelector.vue
@@ -102,8 +102,8 @@ function close() {
 </script>
 
 <template>
-  <div h10 px4 p1 relative flex="~ gap2 items-center">
-    <div flex="~ items-center gap2" class="flex-1 h-full" min-w-0>
+  <div class="h10 px4 p1 relative flex gap2 items-center">
+    <div class="flex-1 h-full flex items-center gap2 min-w-0">
       <DataPathSelectorItem
         v-model:search="startSelector.state.value.search"
         placeholder="Start"
@@ -118,7 +118,7 @@ function close() {
           <slot :id="startSelector.state.value.selected!" name="item" />
         </template>
       </DataPathSelectorItem>
-      <div class="i-carbon-arrow-right op50" flex-shrink-0 />
+      <div class="i-carbon-arrow-right op50 flex-shrink-0" />
 
       <DataPathSelectorItem
         v-model:search="endSelector.state.value.search"
@@ -134,8 +134,8 @@ function close() {
           <slot :id="endSelector.state.value.selected!" name="item" />
         </template>
         <template #empty>
-          <div flex="~ items-center justify-center" w-full h-20>
-            <span italic op50>
+          <div class="flex items-center justify-center w-full h-20">
+            <span class="italic op50">
               {{ startSelector.state.value.selected ? 'No modules' : 'Select a start module to get end modules' }}
             </span>
           </div>
diff --git a/packages/ui/src/components/Data/DataPathSelectorItem.vue b/packages/ui/src/components/Data/DataPathSelectorItem.vue
index 7152142f..f5482a82 100644
--- a/packages/ui/src/components/Data/DataPathSelectorItem.vue
+++ b/packages/ui/src/components/Data/DataPathSelectorItem.vue
@@ -31,21 +31,21 @@ const search = defineModel<string>('search', { required: true })
 </script>
 
 <template>
-  <div flex-1 w-0 h-full>
-    <div v-if="selector.state.value.selected" w-full overflow-hidden flex="~ items-center" border="~ base rounded" p1 relative>
-      <div overflow-hidden text-ellipsis pr6 w-0 flex-1>
+  <div class="flex-1 w-0 h-full">
+    <div v-if="selector.state.value.selected" class="w-full overflow-hidden flex items-center border border-base rounded p1 relative">
+      <div class="overflow-hidden text-ellipsis pr6 w-0 flex-1">
         <slot name="item" />
       </div>
-      <button i-carbon-clean text-4 hover="op100" op50 title="Clear" absolute right-2 @click="emit('clear')" />
+      <button class="i-carbon-clean text-4 hover:op100 op50 absolute right-2" title="Clear" @click="emit('clear')" />
     </div>
     <VMenu v-else :distance="15" :triggers="['click']" :auto-hide="false" :delay="{ show: 300, hide: 150 }" class="h-full">
       <input
         v-model="search"
-        py1 px4 w-full h-full border="~ base rounded-1" style="outline: none" :placeholder="placeholder"
+        class="py1 px4 w-full h-full border border-base rounded-1" style="outline: none" :placeholder="placeholder"
         @blur="hideAllPoppers"
       >
       <template #popper>
-        <div class="p2 w100" flex="~ col gap2">
+        <div class="p2 w100 flex flex-col gap2">
           <slot v-if="data?.length" name="list" />
           <slot v-else name="empty" />
         </div>
diff --git a/packages/ui/src/components/Data/DataSearchPanel.vue b/packages/ui/src/components/Data/DataSearchPanel.vue
index 7cec63b1..cbb7e4b9 100644
--- a/packages/ui/src/components/Data/DataSearchPanel.vue
+++ b/packages/ui/src/components/Data/DataSearchPanel.vue
@@ -77,60 +77,51 @@ function unselectToggle() {
 </script>
 
 <template>
-  <div flex="col gap-2" min-w-30vw border="~ base rounded-xl" bg-glass>
+  <div class="flex-col gap-2 min-w-30vw border border-base rounded-xl bg-glass">
     <slot name="search">
       <div v-if="modelValue.search !== false" class="flex items-center">
         <input
           v-model="model.search"
-          p2 px4
-          w-full
+          class="p2 px4 w-full"
           style="outline: none"
           placeholder="Search"
         >
         <slot name="search-end" />
       </div>
     </slot>
-    <div v-if="rules.length" :class="selectedContainerClass" flex="~ gap-2 wrap" p2 border="t base">
+    <div v-if="rules.length" :class="selectedContainerClass" class="flex gap-2 flex-wrap p2 border-t border-base">
       <label
         v-for="rule of rules"
         :key="rule.name"
-        border="~ base rounded-md" px2 py1
-        flex="~ items-center gap-1"
-        select-none
+        class="border border-base rounded-md px2 py1 flex items-center gap-1 select-none"
         :title="rule.description"
         :class="isRuleSelected(rule) ? 'bg-active' : 'grayscale op50'"
       >
         <input
           type="checkbox"
-          mr1
+          class="mr1"
           :checked="isRuleSelected(rule)"
           @change="toggleRule(rule)"
         >
-        <div :class="rule.icon" icon-catppuccin />
-        <div text-sm>
+        <div :class="rule.icon" class="icon-catppuccin" />
+        <div class="text-sm">
           {{ rule.description || rule.name }}
         </div>
       </label>
       <button
-        rounded-md p1
-        flex="~ items-center gap-1"
-        select-none
-        hover="bg-active"
+        class="rounded-md p1 flex items-center gap-1 select-none hover:bg-active"
         title="Reverse Selection"
         @click="reverseSelect"
       >
-        <div op75 i-ph-selection-background-duotone />
+        <div class="op75 i-ph-selection-background-duotone" />
       </button>
       <button
-        rounded-md p1
-        flex="~ items-center gap-1"
-        select-none
-        hover="bg-active"
+        class="rounded-md p1 flex items-center gap-1 select-none hover:bg-active"
         :title="model.selected?.length === 0 ? 'Select All' : 'Unselect All'"
         @click="unselectToggle"
       >
-        <div v-if="model.selected?.length === 0" op75 i-ph-selection-slash-duotone />
-        <div v-else op75 i-ph-selection-plus-duotone />
+        <div v-if="model.selected?.length === 0" class="op75 i-ph-selection-slash-duotone" />
+        <div v-else class="op75 i-ph-selection-plus-duotone" />
       </button>
     </div>
     <slot />
diff --git a/packages/ui/src/components/Display/DisplayBadge.vue b/packages/ui/src/components/Display/DisplayBadge.vue
index 59fe2865..86e54f13 100644
--- a/packages/ui/src/components/Display/DisplayBadge.vue
+++ b/packages/ui/src/components/Display/DisplayBadge.vue
@@ -40,7 +40,7 @@ const sizeClasses = computed(() => {
 </script>
 
 <template>
-  <component :is="as || 'span'" ws-nowrap rounded :class="sizeClasses" :style>
+  <component :is="as || 'span'" class="ws-nowrap rounded" :class="sizeClasses" :style>
     <slot>
       <span v-text="props.text" />
     </slot>
diff --git a/packages/ui/src/components/Display/DisplayCloseButton.vue b/packages/ui/src/components/Display/DisplayCloseButton.vue
index 31e29206..35efd97e 100644
--- a/packages/ui/src/components/Display/DisplayCloseButton.vue
+++ b/packages/ui/src/components/Display/DisplayCloseButton.vue
@@ -1,10 +1,9 @@
 <template>
   <button
     type="button"
-    w-8 h-8 rounded-full flex items-center justify-center
-    hover="bg-active op100" op50 title="Close"
+    class="w-8 h-8 rounded-full flex items-center justify-center hover:bg-active hover:op100 op50" title="Close"
     aria-label="Close"
   >
-    <div i-ph-x />
+    <div class="i-ph-x" />
   </button>
 </template>
diff --git a/packages/ui/src/components/Display/DisplayFileIcon.vue b/packages/ui/src/components/Display/DisplayFileIcon.vue
index 80144747..e9af113e 100644
--- a/packages/ui/src/components/Display/DisplayFileIcon.vue
+++ b/packages/ui/src/components/Display/DisplayFileIcon.vue
@@ -11,7 +11,7 @@ const info = computed(() => getFileTypeFromModuleId(props.filename))
 
 <template>
   <div
-    flex-none icon-catppuccin
+    class="flex-none icon-catppuccin"
     :title="info.description || info.name"
     :class="[info.icon]"
   />
diff --git a/packages/ui/src/components/Display/DisplayFileSizeBadge.vue b/packages/ui/src/components/Display/DisplayFileSizeBadge.vue
index fa972639..42879c63 100644
--- a/packages/ui/src/components/Display/DisplayFileSizeBadge.vue
+++ b/packages/ui/src/components/Display/DisplayFileSizeBadge.vue
@@ -49,9 +49,9 @@ const formatted = computed(() => bytesToHumanSize(props.bytes || 0, props.digits
 <template>
   <div v-if="bytes" :class="color" class="px-0.4em py-0.2em font-mono line-height-none bg-gray:5 dark:bg-gray:4 flex items-center">
     <div v-if="icon" :class="icon" class="mr-1" />
-    {{ formatted[0] }}<span text-xs op75 ml-0.4>{{ formatted[1] }}</span>
+    {{ formatted[0] }}<span class="text-xs op75 ml-0.4">{{ formatted[1] }}</span>
     <slot name="after">
-      <span v-if="percent && ratio > percentRatio" text-xs ml1 op-fade border="l base" pl1>{{ +(ratio.toFixed(1)) }}%</span>
+      <span v-if="percent && ratio > percentRatio" class="text-xs ml1 op-fade border-l border-base pl1">{{ +(ratio.toFixed(1)) }}%</span>
     </slot>
   </div>
 </template>
diff --git a/packages/ui/src/components/Display/DisplayGraphHoverView.vue b/packages/ui/src/components/Display/DisplayGraphHoverView.vue
index c2e8e945..d65edf69 100644
--- a/packages/ui/src/components/Display/DisplayGraphHoverView.vue
+++ b/packages/ui/src/components/Display/DisplayGraphHoverView.vue
@@ -46,7 +46,7 @@ watch([hoverX, hoverY], ([x, y]) => {
 
 <template>
   <Teleport to="body">
-    <div ref="hoverElement" fixed z-panel-content pointer-events-none :style="{ left: `${left}px`, top: `${top}px` }">
+    <div ref="hoverElement" class="fixed z-panel-content pointer-events-none" :style="{ left: `${left}px`, top: `${top}px` }">
       <slot />
     </div>
   </Teleport>
diff --git a/packages/ui/src/components/Display/DisplayIconButton.vue b/packages/ui/src/components/Display/DisplayIconButton.vue
index 95508070..18f50347 100644
--- a/packages/ui/src/components/Display/DisplayIconButton.vue
+++ b/packages/ui/src/components/Display/DisplayIconButton.vue
@@ -9,9 +9,8 @@ const props = defineProps<{
 <template>
   <button
     type="button"
-    w-8 h-8 rounded-full flex items-center justify-center
-    :class="props.active ? 'bg-active op90 text-green-400' : ''"
-    hover="bg-active op100" op50 :title="props.title"
+    class="w-8 h-8 rounded-full flex items-center justify-center hover:bg-active hover:op100 op50"
+    :class="props.active ? 'bg-active op90 text-green-400' : ''" :title="props.title"
     :aria-label="props.title"
     :aria-pressed="props.active"
   >
diff --git a/packages/ui/src/components/Display/DisplayModuleGraph.vue b/packages/ui/src/components/Display/DisplayModuleGraph.vue
index 3af16b09..32aadafb 100644
--- a/packages/ui/src/components/Display/DisplayModuleGraph.vue
+++ b/packages/ui/src/components/Display/DisplayModuleGraph.vue
@@ -101,7 +101,7 @@ onMounted(() => {
 <template>
   <div
     ref="container"
-    w-full h-screen of-scroll relative select-none
+    class="w-full h-screen of-scroll relative select-none"
     :class="isGrabbing ? 'cursor-grabbing' : ''"
   >
     <div
@@ -111,18 +111,17 @@ onMounted(() => {
       }"
     >
       <div
-        flex="~ items-center justify-center"
+        class="flex items-center justify-center"
         :style="{ transform: `scale(${scale})`, transformOrigin: '0 0' }"
       >
         <div
-          absolute left-0 top-0
           :style="{
             width: `${width}px`,
             height: `${height}px`,
           }"
-          class="bg-dots"
+          class="bg-dots absolute left-0 top-0"
         />
-        <svg pointer-events-none absolute left-0 top-0 z-graph-link :width="width" :height="height">
+        <svg class="pointer-events-none absolute left-0 top-0 z-graph-link" :width="width" :height="height">
           <g>
             <template v-for="link of links" :key="link.id">
               <slot v-if="link.target" name="link" :link="link" :d="generateModuleGraphLink<T, I>(link, spacing)!" :link-class="getModuleGraphLinkColor<T, I>(link)">
@@ -142,8 +141,7 @@ onMounted(() => {
         >
           <template v-if="node.data.module.id !== '~root'">
             <div
-              absolute
-              class="group z-graph-node flex gap-1 items-center"
+              class="group z-graph-node flex gap-1 items-center absolute"
               :style="{
                 left: `${node.x}px`,
                 top: `${node.y}px`,
@@ -151,10 +149,7 @@ onMounted(() => {
               }"
             >
               <div
-                flex="~ items-center gap-1"
-                bg-glass
-                border="~ base rounded"
-                class="group-hover:bg-active block px2 p1"
+                class="group-hover:bg-active block px2 p1 flex items-center gap-1 bg-glass border border-base rounded"
                 :style="{
                   minWidth: `${unref(spacing.width)}px`,
                   maxWidth: `${unref(spacing.width)}px`,
@@ -170,24 +165,17 @@ onMounted(() => {
               <div class="w-4">
                 <button
                   v-if="node.data.hasChildren"
-                  w-4
-                  h-4
-                  rounded-full
-                  flex="items-center justify-center"
-                  text-xs
-                  border="~ active"
-                  class="flex cursor-pointer z-graph-node-active bg-base"
+                  class="flex cursor-pointer z-graph-node-active bg-base w-4 h-4 rounded-full items-center justify-center text-xs border border-active"
                   :disabled="isGraphNodeToggling"
                   :class="{ 'cursor-not-allowed': isGraphNodeToggling, 'hover:bg-active': !isGraphNodeToggling }"
                   :title="node.data.expanded ? 'Collapse' : 'Expand'"
                   @click.stop="toggleNode(node.data.module.id)"
                 >
                   <div
-                    class="text-primary h-4"
+                    class="text-primary h-4 transition-transform transition-duration-200"
                     :class="[
                       node.data.expanded ? 'i-ph-minus' : 'i-ph-plus',
                     ]"
-                    transition="transform duration-200"
                   />
                 </button>
               </div>
@@ -197,18 +185,17 @@ onMounted(() => {
       </div>
     </div>
     <div
-      fixed right-6 bottom-6 z-panel-nav flex="~ col gap-2 items-center"
+      class="fixed right-6 bottom-6 z-panel-nav flex flex-col gap-2 items-center"
     >
-      <div w-10 flex="~ items-center justify-center">
+      <div class="w-10 flex items-center justify-center">
         <DisplayTimeoutView :content="`${Math.round(scale * 100)}%`" class="text-sm" />
       </div>
 
-      <div bg-glass rounded-full border border-base shadow flex="~ col gap-1 p1">
+      <div class="bg-glass rounded-full border border-base shadow flex flex-col gap-1">
         <template v-if="expandControls">
           <button
             v-tooltip.left="'Expand All'"
-            w-10 h-10 rounded-full hover:bg-active op-fade
-            hover:op100 flex="~ items-center justify-center"
+            class="w-10 h-10 rounded-full hover:bg-active op-fade hover:op100 flex items-center justify-center"
             :disabled="isGraphNodeToggling"
             :class="{ 'op50 cursor-not-allowed': isGraphNodeToggling, 'hover:bg-active': !isGraphNodeToggling }"
             title="Expand All"
@@ -218,8 +205,7 @@ onMounted(() => {
           </button>
           <button
             v-tooltip.left="'Collapse All'"
-            w-10 h-10 rounded-full hover:bg-active op-fade
-            hover:op100 flex="~ items-center justify-center"
+            class="w-10 h-10 rounded-full hover:bg-active op-fade hover:op100 flex items-center justify-center"
             :disabled="isGraphNodeToggling"
             :class="{ 'op50 cursor-not-allowed': isGraphNodeToggling, 'hover:bg-active': !isGraphNodeToggling }"
             title="Collapse All"
@@ -228,31 +214,26 @@ onMounted(() => {
             <div class="i-ph-arrows-in-simple-duotone" />
           </button>
 
-          <div border="t base" my1 />
+          <div class="border-t border-base my1" />
         </template>
 
         <button
           v-tooltip.left="'Zoom In (Ctrl + =)'"
           :disabled="scale >= ZOOM_MAX"
-          w-10 h-10 rounded-full hover:bg-active op-fade
-          hover:op100 disabled:op20 disabled:bg-none
-          disabled:cursor-not-allowed
-          flex="~ items-center justify-center"
+          class="w-10 h-10 rounded-full hover:bg-active op-fade hover:op100 disabled:op20 disabled:bg-none disabled:cursor-not-allowed flex items-center justify-center"
           title="Zoom In (Ctrl + =)"
           @click="zoomIn()"
         >
-          <div i-ph-magnifying-glass-plus-duotone />
+          <div class="i-ph-magnifying-glass-plus-duotone" />
         </button>
         <button
           v-tooltip.left="'Zoom Out (Ctrl + -)'"
           :disabled="scale <= ZOOM_MIN"
-          w-10 h-10 rounded-full hover:bg-active op-fade hover:op100
-          disabled:op20 disabled:bg-none disabled:cursor-not-allowed
-          flex="~ items-center justify-center"
+          class="w-10 h-10 rounded-full hover:bg-active op-fade hover:op100 disabled:op20 disabled:bg-none disabled:cursor-not-allowed flex items-center justify-center"
           title="Zoom Out (Ctrl + -)"
           @click="zoomOut()"
         >
-          <div i-ph-magnifying-glass-minus-duotone />
+          <div class="i-ph-magnifying-glass-minus-duotone" />
         </button>
       </div>
     </div>
diff --git a/packages/ui/src/components/Display/DisplayNumberWithUnit.vue b/packages/ui/src/components/Display/DisplayNumberWithUnit.vue
index 8dd48f5c..b2fd888b 100644
--- a/packages/ui/src/components/Display/DisplayNumberWithUnit.vue
+++ b/packages/ui/src/components/Display/DisplayNumberWithUnit.vue
@@ -8,6 +8,6 @@ defineProps<{
 <template>
   <div>
     <slot />
-    <span>{{ number }}</span><span ml-0.4 text-xs op75>{{ unit }}</span>
+    <span>{{ number }}</span><span class="ml-0.4 text-xs op75">{{ unit }}</span>
   </div>
 </template>
diff --git a/packages/ui/src/components/Display/DisplayTimestamp.vue b/packages/ui/src/components/Display/DisplayTimestamp.vue
index 0db728b8..b7b74552 100644
--- a/packages/ui/src/components/Display/DisplayTimestamp.vue
+++ b/packages/ui/src/components/Display/DisplayTimestamp.vue
@@ -7,7 +7,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <span v-if="timestamp" font-mono>
+  <span v-if="timestamp" class="font-mono">
     {{ formatTimeAgo(new Date(props.timestamp)) }}
   </span>
 </template>
diff --git a/packages/ui/src/components/Flowmap/FlowmapExpandable.vue b/packages/ui/src/components/Flowmap/FlowmapExpandable.vue
index 8c536f0a..c6467ca2 100644
--- a/packages/ui/src/components/Flowmap/FlowmapExpandable.vue
+++ b/packages/ui/src/components/Flowmap/FlowmapExpandable.vue
@@ -17,7 +17,7 @@ const expanded = defineModel<boolean>('expanded', { required: false, default: tr
 <template>
   <FlowmapNode
     v-model:expanded="expanded"
-    :lines="{ top: true, bottom: !expandable || !expanded }" pl6 pt4
+    :lines="{ top: true, bottom: !expandable || !expanded }" class="pl6 pt4"
     :class-node-outer="classRootNode"
     :active="activeStart"
   >
@@ -27,17 +27,17 @@ const expanded = defineModel<boolean>('expanded', { required: false, default: tr
 
     <template v-if="expandable" #inline-before>
       <button
-        w-6 h-6 mr1 ml--7 mya rounded-full hover="bg-active" flex="~ items-center justify-center" cursor-pointer
+        class="w-6 h-6 mr1 ml--7 mya rounded-full hover:bg-active flex items-center justify-center cursor-pointer"
         @click="expanded = !expanded"
       >
-        <div i-ph-caret-right text-sm op50 transition duration-300 :class="{ 'rotate-90': expanded }" />
+        <div class="i-ph-caret-right text-sm op50 transition duration-300" :class="{ 'rotate-90': expanded }" />
       </button>
     </template>
 
     <template v-if="expandable && expanded" #after>
       <div>
         <svg
-          ml-1em w-27px h-30px
+          class="ml-1em w-27px h-30px"
           viewBox="0 0 27 30" fill="none" xmlns="http://www.w3.org/2000/svg"
           :class="activeStart ? 'fg-flow-line-active' : 'fg-flow-line'"
         >
@@ -45,12 +45,12 @@ const expanded = defineModel<boolean>('expanded', { required: false, default: tr
             <path d="M0.5 0C0.5 18 26.5 12 26.5 30" stroke="currentColor" stroke-width="1px" />
           </g>
         </svg>
-        <div ml-2px>
+        <div class="ml-2px">
           <slot name="container" />
         </div>
         <svg
           v-if="showTail"
-          ml-1em w-27px h-30px
+          class="ml-1em w-27px h-30px"
           style="transform: scaleX(-1)" viewBox="0 0 27 30" fill="none"
           xmlns="http://www.w3.org/2000/svg"
           :class="activeEnd ? 'fg-flow-line-active' : 'fg-flow-line'"
diff --git a/packages/ui/src/components/Flowmap/FlowmapNode.vue b/packages/ui/src/components/Flowmap/FlowmapNode.vue
index 1d70d36c..980342c8 100644
--- a/packages/ui/src/components/Flowmap/FlowmapNode.vue
+++ b/packages/ui/src/components/Flowmap/FlowmapNode.vue
@@ -16,30 +16,30 @@ const expanded = defineModel<boolean>('expanded', { required: false, default: tr
 </script>
 
 <template>
-  <div flex="~ col" relative>
+  <div class="flex flex-col relative">
     <div
-      v-if="props.lines?.top" absolute top-0 left-10 border="r" h="1/2" max-h-4 z-flowmap-line
+      v-if="props.lines?.top" class="absolute top-0 left-10 border-r h-1/2 max-h-4 z-flowmap-line"
       :class="[active ? 'border-flow-line-active' : 'border-flow-line', props.classLineTop]"
       :style="typeof props.lines?.top === 'number' ? `height: ${props.lines.top}px` : ''"
     />
     <div
-      v-if="props.lines?.bottom" absolute bottom-0 left-10 border="r" h="1/2" max-h-4 z-flowmap-line
+      v-if="props.lines?.bottom" class="absolute bottom-0 left-10 border-r h-1/2 max-h-4 z-flowmap-line"
       :class="[active ? 'border-flow-line-active' : 'border-flow-line', props.classLineBottom]"
       :style="typeof props.lines?.bottom === 'number' ? `height: ${props.lines.bottom}px` : ''"
     />
     <slot name="before" />
-    <div flex="~" w-max :class="props.classNodeInline" class="flowmap-node-inline">
+    <div :class="props.classNodeInline" class="flowmap-node-inline flex w-max">
       <slot name="inline-before" />
       <div
         :class="[
           props.classNodeOuter,
           active ? 'border-flow-active' : 'border-flow',
         ]"
-        border="~ rounded-2xl" bg-base of-hidden cursor-pointer
+        class="border rounded-2xl bg-base of-hidden cursor-pointer"
         @click="expanded = !expanded"
       >
         <slot name="inner">
-          <div px3 py1 :class="props.classNodeInner" flex="~ inline gap-2 items-center">
+          <div class="px3 py1 flex flex-inline gap-2 items-center" :class="props.classNodeInner">
             <slot name="content" />
           </div>
         </slot>
diff --git a/packages/ui/src/components/Flowmap/FlowmapNodePluginInfo.vue b/packages/ui/src/components/Flowmap/FlowmapNodePluginInfo.vue
index a72976ad..210e79a9 100644
--- a/packages/ui/src/components/Flowmap/FlowmapNodePluginInfo.vue
+++ b/packages/ui/src/components/Flowmap/FlowmapNodePluginInfo.vue
@@ -11,24 +11,24 @@ defineProps<{
 </script>
 
 <template>
-  <span op50 text-xs flex justify-center items-center>
+  <span class="op50 text-xs flex justify-center items-center">
     <DisplayNumberBadge
       :number="modules" icon="i-catppuccin-java-class-abstract"
       color="transparent color-scale-neutral"
       :title="`Module processed: ${modules}`"
     />
-    <span op40>|</span>
+    <span class="op40">|</span>
     <DisplayNumberBadge
       :number="calls" icon="i-ph-arrow-counter-clockwise"
       color="transparent color-scale-neutral"
       :title="`Total calls: ${calls}`"
     />
-    <span op40>|</span>
+    <span class="op40">|</span>
     <DisplayDuration
-      :duration="duration" flex="~ gap-1 items-center" px1
+      :duration="duration" class="flex gap-1 items-center px1"
       :title="`Total build cost: ${formatDuration(duration, true)}`"
     >
-      <span i-ph-clock-duotone inline-block />
+      <span class="i-ph-clock-duotone inline-block" />
     </DisplayDuration>
   </span>
 </template>
diff --git a/packages/ui/src/components/Form/FormCheckbox.vue b/packages/ui/src/components/Form/FormCheckbox.vue
index 8e22e6f6..2fecadc0 100644
--- a/packages/ui/src/components/Form/FormCheckbox.vue
+++ b/packages/ui/src/components/Form/FormCheckbox.vue
@@ -10,13 +10,13 @@ const model = defineModel<boolean>({ default: false })
 </script>
 
 <template>
-  <label inline-flex items-center gap-2 cursor-pointer select-none>
+  <label class="inline-flex items-center gap-2 cursor-pointer select-none">
     <input
       v-model="model"
       type="checkbox"
-      w-4 h-4 accent-primary-500 cursor-pointer
+      class="w-4 h-4 accent-primary-500 cursor-pointer"
     >
-    <span v-if="label" text-sm>{{ label }}</span>
+    <span v-if="label" class="text-sm">{{ label }}</span>
     <slot />
   </label>
 </template>
diff --git a/packages/ui/src/components/Overlay/OverlayModal.vue b/packages/ui/src/components/Overlay/OverlayModal.vue
index 90a43496..37c17481 100644
--- a/packages/ui/src/components/Overlay/OverlayModal.vue
+++ b/packages/ui/src/components/Overlay/OverlayModal.vue
@@ -43,28 +43,27 @@ onBeforeUnmount(() => {
     >
       <div
         v-if="open"
-        fixed inset-0 z-100 flex items-center justify-center p4
+        class="fixed inset-0 z-100 flex items-center justify-center p4"
         @click.self="close"
       >
-        <div absolute inset-0 bg-black:50 @click="close" />
+        <div class="absolute inset-0 bg-black:50" @click="close" />
         <div
-          relative max-h="85vh" of-auto bg-base border="~ base rounded-lg" shadow-xl
-          flex="~ col"
+          class="relative max-h-85vh of-auto bg-base border border-base rounded-lg shadow-xl flex flex-col"
         >
-          <div v-if="$slots.title" flex="~ items-center justify-between gap-4" px4 py3 border="b base">
-            <div font-medium>
+          <div v-if="$slots.title" class="flex items-center justify-between gap-4 px4 py3 border-b border-base">
+            <div class="font-medium">
               <slot name="title" />
             </div>
             <button
               type="button"
-              w-7 h-7 rounded-full flex items-center justify-center op50 hover="bg-active op100"
+              class="w-7 h-7 rounded-full flex items-center justify-center op50 hover:bg-active hover:op100"
               aria-label="Close"
               @click="close"
             >
-              <div i-ph-x />
+              <div class="i-ph-x" />
             </button>
           </div>
-          <div p4 of-auto>
+          <div class="p4 of-auto">
             <slot />
           </div>
         </div>
diff --git a/packages/ui/src/components/Panel/PanelSideNav.vue b/packages/ui/src/components/Panel/PanelSideNav.vue
index 33e917ca..e5de71de 100644
--- a/packages/ui/src/components/Panel/PanelSideNav.vue
+++ b/packages/ui/src/components/Panel/PanelSideNav.vue
@@ -15,10 +15,10 @@ const items = computed<SideNavItem[]>(() => {
 </script>
 
 <template>
-  <div w12 flex-none>
+  <div class="w12 flex-none">
     <Teleport to="body">
       <div
-        border="r y base rounded-r-xl" flex="~ col gap-1" p1 of-y-auto max-h-96vh bg-glass
+        class="border-r border-y border-base rounded-r-xl flex flex-col gap-1 p1 of-y-auto max-h-96vh bg-glass"
         style="position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 64"
       >
         <template v-for="item in items" :key="item.title">
@@ -28,13 +28,11 @@ const items = computed<SideNavItem[]>(() => {
             v-tooltip="{ placement: 'right', content: item.title }"
             :title="item.title"
             :aria-label="item.title"
-            rounded-full
-            p2 hover:bg-active op-fade hover:op100
-            flex="~ items-center justify-center"
+            class="rounded-full p2 hover:bg-active op-fade hover:op100 flex items-center justify-center"
             exact-active-class="text-primary op100!"
             @click="item.action?.()"
           >
-            <div :class="item.icon" text-lg />
+            <div :class="item.icon" class="text-lg" />
           </component>
         </template>
       </div>
diff --git a/packages/ui/src/components/Plugins/PluginsFlatList.vue b/packages/ui/src/components/Plugins/PluginsFlatList.vue
index 4bd1be44..c810981d 100644
--- a/packages/ui/src/components/Plugins/PluginsFlatList.vue
+++ b/packages/ui/src/components/Plugins/PluginsFlatList.vue
@@ -18,7 +18,7 @@ const route = useRoute()
 </script>
 
 <template>
-  <div flex="~ col gap-2" p4>
+  <div class="flex flex-col gap-2 p4">
     <DataVirtualList
       :items="plugins"
       key-prop="plugin_id"
@@ -27,12 +27,12 @@ const route = useRoute()
       :scroller="scroller"
     >
       <template #default="{ item }">
-        <div flex pb2>
-          <NuxtLink :to="{ path: route.path, query: { plugin: item.plugin_id } }" font-mono border="~ rounded base" w-full px2 py1 text-sm hover="bg-active" flex="~ gap-4 items-center">
-            <div w-8 text-right text-xs op50>
+        <div class="flex pb2">
+          <NuxtLink :to="{ path: route.path, query: { plugin: item.plugin_id } }" class="font-mono border rounded border-base w-full px2 py1 text-sm hover:bg-active flex gap-4 items-center">
+            <div class="w-8 text-right text-xs op50">
               #{{ item.plugin_id }}
             </div>
-            <span overflow-hidden text-ellipsis break-all line-clamp-2>
+            <span class="overflow-hidden text-ellipsis break-all line-clamp-2">
               <DisplayPluginName :name="item.name" />
             </span>
           </NuxtLink>
diff --git a/packages/ui/src/components/Plugins/PluginsSunburst.vue b/packages/ui/src/components/Plugins/PluginsSunburst.vue
index 5d9a9c32..eb873c77 100644
--- a/packages/ui/src/components/Plugins/PluginsSunburst.vue
+++ b/packages/ui/src/components/Plugins/PluginsSunburst.vue
@@ -29,25 +29,24 @@ function getColor(child: T) {
 </script>
 
 <template>
-  <div grid="~ cols-[max-content_1fr] gap-2" p4>
-    <div ref="el" w-500px />
-    <div flex="~ col gap-4">
+  <div class="grid grid-cols-[max-content_1fr] gap-2 p4">
+    <div ref="el" class="w-500px" />
+    <div class="flex flex-col gap-4">
       <ChartNavBreadcrumb
-        border="b base" py2
+        class="border-b border-base py2"
         :selected="selected"
         :options="graph.options"
         @select="emit('select', $event)"
       />
-      <div v-if="selected" grid="~ cols-[300px_1fr] gap-1">
+      <div v-if="selected" class="grid grid-cols-[300px_1fr] gap-1">
         <template v-for="child of selected.children" :key="child.id">
           <button
-            ws-nowrap text-nowrap text-left overflow-hidden text-ellipsis text-sm
-            hover="bg-active" rounded px2
+            class="ws-nowrap text-nowrap text-left overflow-hidden text-ellipsis text-sm hover:bg-active rounded px2"
             @click="emit('select', child)"
           >
-            <div v-if="child.meta?.type === 'hook'" hover="bg-active" class="flex gap2 items-center pl2">
+            <div v-if="child.meta?.type === 'hook'" class="flex gap2 items-center pl2 hover:bg-active">
               <i class="i-ph-function-duotone inline-flex" />
-              <span font-mono text-sm>
+              <span class="font-mono text-sm">
                 {{ child.text }}
               </span>
             </div>
@@ -57,23 +56,22 @@ function getColor(child: T) {
           </button>
 
           <button
-            relative flex="~ gap-1 items-center"
-            hover="bg-active" rounded
+            class="relative flex gap-1 items-center hover:bg-active rounded"
             @click="emit('select', child)"
           >
             <div
-              h-5 rounded shadow border="~ base"
+              class="h-5 rounded shadow border border-base"
               :style="{
                 background: getColor(child),
                 width: `${child.size / selected.size * 100}%`,
               }"
             />
-            <DisplayDuration :duration="child.size" text-xs />
+            <DisplayDuration :duration="child.size" class="text-xs" />
             <div
               v-if="child.children.length > 0 && child.meta?.type !== 'hook'"
               v-tooltip="`${child.children.length} dependencies`"
               :title="`${child.children.length} dependencies`"
-              text-xs op-fade
+              class="text-xs op-fade"
             >
               ({{ child.children.length }})
             </div>
diff --git a/packages/ui/src/components/Visual/VisualEmptyState.vue b/packages/ui/src/components/Visual/VisualEmptyState.vue
index cb77729a..60d458a4 100644
--- a/packages/ui/src/components/Visual/VisualEmptyState.vue
+++ b/packages/ui/src/components/Visual/VisualEmptyState.vue
@@ -10,12 +10,12 @@ defineProps<{
 </script>
 
 <template>
-  <div flex="~ col" items-center justify-center gap-3 py12 text-center>
-    <div v-if="icon" :class="icon" text-4xl op-fade />
-    <div v-if="title" text-lg font-medium>
+  <div class="flex flex-col items-center justify-center gap-3 py12 text-center">
+    <div v-if="icon" :class="icon" class="text-4xl op-fade" />
+    <div v-if="title" class="text-lg font-medium">
       {{ title }}
     </div>
-    <p v-if="description" text-sm op-fade>
+    <p v-if="description" class="text-sm op-fade">
       {{ description }}
     </p>
     <slot name="description" />
diff --git a/packages/ui/src/components/Visual/VisualLoading.vue b/packages/ui/src/components/Visual/VisualLoading.vue
index 22a7c4d9..eae5995d 100644
--- a/packages/ui/src/components/Visual/VisualLoading.vue
+++ b/packages/ui/src/components/Visual/VisualLoading.vue
@@ -5,10 +5,10 @@ defineProps<{
 </script>
 
 <template>
-  <div p10 h-full flex="~ col" items-center justify-center>
+  <div class="p10 h-full flex flex-col items-center justify-center">
     <slot name="banner" />
-    <div flex="~ gap-2" animate-pulse items-center justify-center>
-      <div i-svg-spinners-8-dots-rotate />
+    <div class="flex gap-2 animate-pulse items-center justify-center">
+      <div class="i-svg-spinners-8-dots-rotate" />
       <span>{{ text ?? 'Loading...' }}</span>
     </div>
   </div>
diff --git a/packages/ui/src/unocss/index.ts b/packages/ui/src/unocss/index.ts
index 70abd561..748911ab 100644
--- a/packages/ui/src/unocss/index.ts
+++ b/packages/ui/src/unocss/index.ts
@@ -3,7 +3,6 @@ import type { Theme } from '@unocss/preset-wind4'
 import {
   definePreset,
   mergeDeep,
-  presetAttributify,
   presetIcons,
   presetTypography,
   presetWebFonts,
@@ -28,7 +27,6 @@ export const presetDevToolsUI = definePreset<PresetDevToolsUIOptions, Theme>((op
     },
     presets: [
       presetWind4(),
-      presetAttributify(),
       presetIcons({
         scale: 1.2,
       }),
diff --git a/packages/vite/src/app/app.vue b/packages/vite/src/app/app.vue
index da40266b..334c2c2f 100644
--- a/packages/vite/src/app/app.vue
+++ b/packages/vite/src/app/app.vue
@@ -37,16 +37,16 @@ useSideNav(() => {
 </script>
 
 <template>
-  <div v-if="rpcConnectionState.error" text-red>
+  <div v-if="rpcConnectionState.error" class="text-red">
     {{ rpcConnectionState.error }}
   </div>
   <VisualLoading
     v-else-if="!rpcConnectionState.connected"
     text="Connecting..."
   />
-  <div v-else grid="~ cols-[max-content_1fr]" h-screen w-screen max-w-screen max-h-screen of-hidden>
+  <div v-else class="grid grid-cols-[max-content_1fr] h-screen w-screen max-w-screen max-h-screen of-hidden">
     <PanelSideNav />
-    <div of-auto h-screen max-h-screen relative>
+    <div class="of-auto h-screen max-h-screen relative">
       <NuxtPage />
     </div>
   </div>
diff --git a/packages/vite/src/app/components/chart/ModuleFlamegraph.vue b/packages/vite/src/app/components/chart/ModuleFlamegraph.vue
index db4a3b05..b2827c97 100644
--- a/packages/vite/src/app/components/chart/ModuleFlamegraph.vue
+++ b/packages/vite/src/app/components/chart/ModuleFlamegraph.vue
@@ -184,41 +184,38 @@ watch(() => props.flowNodeSelected, async () => {
 </script>
 
 <template>
-  <div relative border="t base" pb10 py1 mt4>
+  <div class="relative border-t border-base pb10 py1 mt4">
     <DisplayGraphHoverView :hover-x="hoverX" :hover-y="hoverY">
       <div
         v-if="hoverNode"
-        border="~ base" rounded-lg shadow-lg px3 py2
-        bg-glass pointer-events-none text-sm max-w-80
+        class="border border-base rounded-lg shadow-lg px3 py2 bg-glass pointer-events-none text-sm max-w-80"
       >
-        <div font-semibold font-mono text-base mb2>
+        <div class="font-semibold font-mono text-base mb2">
           {{ hoverNode.plugin_name }}
         </div>
-        <div v-if="hoverNode.meta" border="t base" pt2 flex="~ col gap-1.5" min-w-48>
-          <div flex="~ justify-between items-center" py1>
-            <label text-xs opacity-70>Start Time</label>
+        <div v-if="hoverNode.meta" class="border-t border-base pt2 flex flex-col gap-1.5 min-w-48">
+          <div class="flex justify-between items-center py1">
+            <label class="text-xs opacity-70">Start Time</label>
             <time
               :datetime="new Date(hoverNode.meta.timestamp_start).toISOString()"
-              font-mono text="xs"
+              class="font-mono text-xs px1.5 py0.5 rounded"
               bg="base/10"
-              px1.5 py0.5 rounded
             >
               {{ normalizeTimestamp(hoverNode.meta.timestamp_start) }}
             </time>
           </div>
-          <div flex="~ justify-between items-center" py1>
-            <label text-xs opacity-70>End Time</label>
+          <div class="flex justify-between items-center py1">
+            <label class="text-xs opacity-70">End Time</label>
             <time
               :datetime="new Date(hoverNode.meta.timestamp_end).toISOString()"
-              font-mono text="xs"
+              class="font-mono text-xs px1.5 py0.5 rounded"
               bg="base/10"
-              px1.5 py0.5 rounded
             >
               {{ normalizeTimestamp(hoverNode.meta.timestamp_end) }}
             </time>
           </div>
-          <div flex="~ justify-between items-center" py1 border="t base dashed" pt2>
-            <label text="xs" op70>Duration</label>
+          <div class="flex justify-between items-center py1 border-t border-base border-dashed pt2">
+            <label class="text-xs op70">Duration</label>
             <DisplayDuration :duration="hoverNode.duration" />
           </div>
         </div>
@@ -227,6 +224,6 @@ watch(() => props.flowNodeSelected, async () => {
         </div>
       </div>
     </DisplayGraphHoverView>
-    <div ref="el" min-h-30 />
+    <div ref="el" class="min-h-30" />
   </div>
 </template>
diff --git a/packages/vite/src/app/components/data/ModuleDetailsLoader.vue b/packages/vite/src/app/components/data/ModuleDetailsLoader.vue
index ae239df3..b9675ddf 100644
--- a/packages/vite/src/app/components/data/ModuleDetailsLoader.vue
+++ b/packages/vite/src/app/components/data/ModuleDetailsLoader.vue
@@ -72,57 +72,46 @@ function selectFlowNode(v: boolean) {
 </script>
 
 <template>
-  <div v-if="info" relative h-full w-full>
+  <div v-if="info" class="relative h-full w-full">
     <DisplayCloseButton
-      absolute right-2 top-1.5 bg-glass z-panel-content
+      class="absolute right-2 top-1.5 bg-glass z-panel-content"
       @click="emit('close')"
     />
     <div
-      bg-glass absolute left-2 top-2 z-panel-content p2
-      border="~ base rounded-lg"
-      flex="~ col gap-2"
+      class="bg-glass absolute left-2 top-2 z-panel-content p2 border border-base rounded-lg flex flex-col gap-2"
     >
-      <DisplayModuleId :id="module" px2 pt1 :cwd="root" />
-      <div text-xs font-mono flex="~ items-center gap-3" ml2>
+      <DisplayModuleId :id="module" class="px2 pt1" :cwd="root" />
+      <div class="text-xs font-mono flex items-center gap-3 ml2">
         <ModulesBuildMetrics v-if="info.buildMetrics" :metrics="info.buildMetrics" />
       </div>
-      <div flex="~ gap-2">
+      <div class="flex gap-2">
         <button
           :class="settings.moduleDetailsViewType === 'flow' ? 'text-primary' : ''"
-          flex="~ gap-2 items-center justify-center"
-          px2 py1 w-40
-          border="~ base rounded-lg"
-          hover="bg-active"
+          class="flex gap-2 items-center justify-center px2 py1 w-40 border border-base rounded-lg hover:bg-active"
           @click="settings.moduleDetailsViewType = 'flow'"
         >
-          <div i-ph-git-branch-duotone rotate-180 />
+          <div class="i-ph-git-branch-duotone rotate-180" />
           Build Flow
         </button>
         <button
           :class="settings.moduleDetailsViewType === 'charts' ? 'text-primary' : ''"
-          flex="~ gap-2 items-center justify-center"
-          px2 py1 w-40
-          border="~ base rounded-lg"
-          hover="bg-active"
+          class="flex gap-2 items-center justify-center px2 py1 w-40 border border-base rounded-lg hover:bg-active"
           @click="settings.moduleDetailsViewType = 'charts'"
         >
-          <div i-ph-chart-donut-duotone />
+          <div class="i-ph-chart-donut-duotone" />
           Charts
         </button>
         <button
           :class="settings.moduleDetailsViewType === 'imports' ? 'text-primary' : ''"
-          flex="~ gap-2 items-center justify-center"
-          px2 py1 w-40
-          border="~ base rounded-lg"
-          hover="bg-active"
+          class="flex gap-2 items-center justify-center px2 py1 w-40 border border-base rounded-lg hover:bg-active"
           @click="settings.moduleDetailsViewType = 'imports'"
         >
-          <div i-ph-graph-duotone />
+          <div class="i-ph-graph-duotone" />
           Imports
         </button>
       </div>
     </div>
-    <div of-auto h-full pt-30>
+    <div class="of-auto h-full pt-30">
       <FlowmapModuleFlow
         v-if="settings.moduleDetailsViewType === 'flow'"
         :module="info"
diff --git a/packages/vite/src/app/components/data/ModuleImportRelationships.vue b/packages/vite/src/app/components/data/ModuleImportRelationships.vue
index b24cb166..29033273 100644
--- a/packages/vite/src/app/components/data/ModuleImportRelationships.vue
+++ b/packages/vite/src/app/components/data/ModuleImportRelationships.vue
@@ -142,15 +142,15 @@ onMounted(() => {
 <template>
   <div
     ref="container"
-    w-full relative select-none mt4
+    class="w-full relative select-none mt4"
   >
     <template v-if="importers?.length || module.imports?.length">
       <!-- nodes -->
-      <div flex px2>
+      <div class="flex px2">
         <!-- importers -->
         <div
           v-if="importers?.length"
-          py1
+          class="py1"
           :style="{
             width: `${SPACING.width}px`,
             marginTop: `${importersVerticalOffset}px`,
@@ -159,9 +159,7 @@ onMounted(() => {
           <template v-for="(importer, i) of importers" :key="importer.id">
             <DisplayModuleId
               :id="importer.id"
-              hover="bg-active" block px2 p1 bg-base ws-nowrap
-              z-graph-node
-              border="~ base rounded"
+              class="hover:bg-active block px2 p1 bg-base ws-nowrap z-graph-node border border-base rounded"
               :link="true"
               :cwd="root"
               :minimal="true"
@@ -176,7 +174,7 @@ onMounted(() => {
         </div>
         <!-- dot: current module -->
         <div
-          bg-base rounded-full border-3 font-mono border-active flex-shrink-0 :style="{
+          class="bg-base rounded-full border-3 font-mono border-active flex-shrink-0" :style="{
             margin: dotNodeMargin,
             width: `${SPACING.dot}px`,
             height: `${SPACING.dot}px`,
@@ -185,7 +183,7 @@ onMounted(() => {
         <!-- imports -->
         <div
           v-if="module.imports?.length"
-          py1
+          class="py1"
           :style="{
             width: `${SPACING.width}px`,
             marginTop: `${importsVerticalOffset}px`,
@@ -194,9 +192,7 @@ onMounted(() => {
           <template v-for="(_import, i) of module.imports" :key="_import.module_id">
             <DisplayModuleId
               :id="_import!.module_id"
-              hover="bg-active" block px2 p1 bg-base ws-nowrap
-              z-graph-node
-              border="~ base rounded"
+              class="hover:bg-active block px2 p1 bg-base ws-nowrap z-graph-node border border-base rounded"
               :link="true"
               :cwd="root"
               :minimal="true"
@@ -213,7 +209,7 @@ onMounted(() => {
 
       <!-- links -->
       <svg
-        pointer-events-none absolute left-0 top-0 z-graph-link w-full
+        class="pointer-events-none absolute left-0 top-0 z-graph-link w-full"
         :style="{
           height: `${nodesHeight}px`,
         }"
@@ -230,7 +226,7 @@ onMounted(() => {
         </g>
       </svg>
     </template>
-    <div v-else w-full h-48 flex="~ items-center justify-center" op50 italic>
+    <div v-else class="w-full h-48 flex items-center justify-center op50 italic">
       <p>
         No data
       </p>
diff --git a/packages/vite/src/app/components/data/PluginDetailsLoader.vue b/packages/vite/src/app/components/data/PluginDetailsLoader.vue
index 79e26757..d0107014 100644
--- a/packages/vite/src/app/components/data/PluginDetailsLoader.vue
+++ b/packages/vite/src/app/components/data/PluginDetailsLoader.vue
@@ -248,76 +248,68 @@ watch(() => settings.value.pluginDetailsViewType, () => {
 
 <template>
   <VisualLoading v-if="isLoading" />
-  <div v-else-if="state?.calls?.length" relative h-full w-full>
+  <div v-else-if="state?.calls?.length" class="relative h-full w-full">
     <DisplayCloseButton
-      absolute right-2 top-1.5
+      class="absolute right-2 top-1.5"
       @click="emit('close')"
     />
     <div
-      bg-glass absolute left-2 top-2 z-panel-content p2
-      border="~ base rounded-lg"
-      flex="~ col gap-2"
+      class="bg-glass absolute left-2 top-2 z-panel-content p2 border border-base rounded-lg flex flex-col gap-2"
     >
-      <div font-mono px1>
+      <div class="font-mono px1">
         <DisplayPluginName :name="state?.plugin_name!" />
       </div>
-      <div text-xs font-mono flex="~ items-center gap-3" ml2>
+      <div class="text-xs font-mono flex items-center gap-3 ml2">
         <DisplayDuration
-          :duration="hookResolveIdDuration" flex="~ gap-1 items-center"
+          :duration="hookResolveIdDuration" class="flex gap-1 items-center"
           :title="`Resolve Id hooks cost: ${formatDuration(hookResolveIdDuration, true)}`"
         >
-          <span i-ph-magnifying-glass-duotone inline-block />
+          <span class="i-ph-magnifying-glass-duotone inline-block" />
         </DisplayDuration>
         <DisplayDuration
-          :duration="hookLoadDuration" flex="~ gap-1 items-center"
+          :duration="hookLoadDuration" class="flex gap-1 items-center"
           :title="`Load hooks cost: ${formatDuration(hookLoadDuration, true)}`"
         >
-          <span i-ph-upload-simple-duotone inline-block />
+          <span class="i-ph-upload-simple-duotone inline-block" />
         </DisplayDuration>
         <DisplayDuration
-          :duration="hookTransformDuration" flex="~ gap-1 items-center"
+          :duration="hookTransformDuration" class="flex gap-1 items-center"
           :title="`Transform hooks cost: ${formatDuration(hookTransformDuration, true)}`"
         >
-          <span i-ph-magic-wand-duotone inline-block />
+          <span class="i-ph-magic-wand-duotone inline-block" />
         </DisplayDuration>
-        <span op40>|</span>
+        <span class="op40">|</span>
         <DisplayDuration
-          :duration="totalDuration" flex="~ gap-1 items-center"
+          :duration="totalDuration" class="flex gap-1 items-center"
           :title="`Total build cost: ${formatDuration(totalDuration, true)}`"
         >
-          <span i-ph-clock-duotone inline-block />
+          <span class="i-ph-clock-duotone inline-block" />
         </DisplayDuration>
-        <span op40>|</span>
+        <span class="op40">|</span>
         <DisplayNumberBadge
           :number="processedModules.length" icon="i-catppuccin-java-class-abstract"
           color="transparent color-scale-neutral"
           :title="`Module processed: ${processedModules.length}`"
         />
-        <span op40>|</span>
+        <span class="op40">|</span>
         <DisplayNumberBadge
           :number="state?.calls?.length ?? 0" icon="i-ph-arrow-counter-clockwise"
           color="transparent color-scale-neutral"
           :title="`Total calls: ${state?.calls?.length ?? 0}`"
         />
       </div>
-      <div flex="~ gap-2">
+      <div class="flex gap-2">
         <button
           :class="settings.pluginDetailsViewType === 'flow' ? 'text-primary' : ''"
-          flex="~ gap-2 items-center justify-center"
-          px2 py1 w-40
-          border="~ base rounded-lg"
-          hover="bg-active"
+          class="flex gap-2 items-center justify-center px2 py1 w-40 border border-base rounded-lg hover:bg-active"
           @click="settings.pluginDetailsViewType = 'flow'"
         >
-          <div i-ph-git-branch-duotone rotate-180 />
+          <div class="i-ph-git-branch-duotone rotate-180" />
           Build Flow
         </button>
         <button
           :class="settings.pluginDetailsViewType === 'sunburst' ? 'text-primary' : ''"
-          flex="~ gap-2 items-center justify-center"
-          px2 py1 w-40
-          border="~ base rounded-lg"
-          hover="bg-active"
+          class="flex gap-2 items-center justify-center px2 py1 w-40 border border-base rounded-lg hover:bg-active"
           @click="settings.pluginDetailsViewType = 'sunburst'"
         >
           <div i-ph-chart-sunburst-duotone />
@@ -325,7 +317,7 @@ watch(() => settings.value.pluginDetailsViewType, () => {
         </button>
       </div>
     </div>
-    <div of-auto h-full pt-30>
+    <div class="of-auto h-full pt-30">
       <FlowmapPluginFlow
         v-if="settings.pluginDetailsViewType === 'flow'"
         :modules="modules"
@@ -341,60 +333,55 @@ watch(() => settings.value.pluginDetailsViewType, () => {
         <template #module="{ child }">
           <DisplayModuleId
             :id="child.text!"
-            w-full border-none ws-nowrap
+            class="w-full border-none ws-nowrap hover:bg-active border border-base rounded block px2 py1"
             :cwd="root"
             :link="getModuleGraphLink(child.meta?.graphModuleId)"
-            hover="bg-active"
-            border="~ base rounded" block px2 py1
           />
         </template>
       </PluginsSunburst>
     </div>
   </div>
-  <div v-else flex="~ items-center justify-center" w-full h-full>
-    <span italic op50>
+  <div v-else class="flex items-center justify-center w-full h-full">
+    <span class="italic op50">
       No data
     </span>
   </div>
   <DisplayGraphHoverView :hover-x="mouse.x" :hover-y="mouse.y">
     <div
       v-if="nodeHover"
-      border="~ base" rounded-lg shadow-lg px3 py2
-      bg-glass pointer-events-none text-sm max-w-80
+      class="border border-base rounded-lg shadow-lg px3 py2 bg-glass pointer-events-none text-sm max-w-80"
     >
-      <div v-if="nodeHover.meta?.title" flex="~ items-center gap2">
+      <div v-if="nodeHover.meta?.title" class="flex items-center gap2">
         {{ nodeHover.meta.title }}
         <DisplayDuration :duration="nodeHover.meta.duration" />
       </div>
       <template v-else>
-        <div v-if="nodeHover.meta?.module" flex="~" font-semibold font-mono text-base mb2>
+        <div v-if="nodeHover.meta?.module" class="flex font-semibold font-mono text-base mb2">
           <DisplayModuleId :id="nodeHover.meta.module" :cwd="root" :link="false" />
         </div>
-        <div v-if="nodeHover.meta?.module" border="t base" pt2 flex="~ col gap-1.5" min-w-48>
-          <div flex="~ justify-between items-center" py1>
-            <label text-xs opacity-70>Start Time</label>
+        <div v-if="nodeHover.meta?.module" class="border-t border-base pt2 flex flex-col gap-1.5 min-w-48">
+          <div class="flex justify-between items-center py1">
+            <label class="text-xs opacity-70">Start Time</label>
             <time
               :datetime="new Date(nodeHover.meta.timestamp_start).toISOString()"
-              font-mono text="xs"
+              class="font-mono text-xs px1.5 py0.5 rounded"
               bg="base/10"
-              px1.5 py0.5 rounded
             >
               {{ normalizeTimestamp(nodeHover.meta.timestamp_start) }}
             </time>
           </div>
-          <div flex="~ justify-between items-center" py1>
-            <label text-xs opacity-70>End Time</label>
+          <div class="flex justify-between items-center py1">
+            <label class="text-xs opacity-70">End Time</label>
             <time
               :datetime="new Date(nodeHover.meta.timestamp_end).toISOString()"
-              font-mono text="xs"
+              class="font-mono text-xs px1.5 py0.5 rounded"
               bg="base/10"
-              px1.5 py0.5 rounded
             >
               {{ normalizeTimestamp(nodeHover.meta.timestamp_end) }}
             </time>
           </div>
-          <div flex="~ justify-between items-center" py1 border="t base dashed" pt2>
-            <label text="xs" op70>Duration</label>
+          <div class="flex justify-between items-center py1 border-t border-base border-dashed pt2">
+            <label class="text-xs op70">Duration</label>
             <DisplayDuration :duration="nodeHover.meta.duration" />
           </div>
         </div>
diff --git a/packages/vite/src/app/components/data/PluginDetailsTable.vue b/packages/vite/src/app/components/data/PluginDetailsTable.vue
index 5ec696e7..d83e18f7 100644
--- a/packages/vite/src/app/components/data/PluginDetailsTable.vue
+++ b/packages/vite/src/app/components/data/PluginDetailsTable.vue
@@ -107,9 +107,8 @@ function getModuleGraphLink(moduleId: string | undefined): string | false {
 <template>
   <DataVirtualList
     v-if="filtered.length && selectedFields.length"
-    class="plugin-details-table"
+    class="plugin-details-table min-w-max h-full min-h-0"
     role="table"
-    min-w-max h-full min-h-0
     :items="filtered"
     key-prop="id"
     :page-mode="false"
@@ -117,54 +116,51 @@ function getModuleGraphLink(moduleId: string | undefined): string | false {
     :item-size="36"
   >
     <template #before>
-      <div role="row" class="border-b border-base bg-base" flex="~ row">
-        <div v-if="selectedFields.includes('hookName')" role="columnheader" bg-base flex-none w32 ws-nowrap p1 text-center font-600>
+      <div role="row" class="border-b border-base bg-base flex flex-row">
+        <div v-if="selectedFields.includes('hookName')" role="columnheader" class="bg-base flex-none w32 ws-nowrap p1 text-center font-600">
           Hook name
         </div>
-        <div v-if="selectedFields.includes('module')" role="columnheader" bg-base flex-1 min-w100 ws-nowrap p1 text-left font-600>
-          <button flex="~ row gap1 items-center" w-full>
+        <div v-if="selectedFields.includes('module')" role="columnheader" class="bg-base flex-1 min-w100 ws-nowrap p1 text-left font-600">
+          <button class="flex flex-row gap1 items-center w-full">
             Module
             <VMenu>
-              <span w-6 h-6 rounded-full cursor-pointer hover="bg-active" flex="~ items-center justify-center">
-                <i text-xs class="i-ph-funnel-duotone" :class="filterModuleTypes.length !== searchFilterTypes.length ? 'text-primary op100' : 'op50'" />
+              <span class="w-6 h-6 rounded-full cursor-pointer hover:bg-active flex items-center justify-center">
+                <i class="i-ph-funnel-duotone text-xs" :class="filterModuleTypes.length !== searchFilterTypes.length ? 'text-primary op100' : 'op50'" />
               </span>
               <template #popper>
-                <div class="p2" flex="~ col gap2">
+                <div class="p2 flex flex-col gap2">
                   <label
                     v-for="rule of searchFilterTypes"
                     :key="rule.name"
-                    border="~ base rounded-md" px2 py1
-                    flex="~ items-center gap-1"
-                    select-none
                     :title="rule.description"
-                    class="cursor-pointer module-type-filter"
+                    class="cursor-pointer module-type-filter border border-base rounded-md px2 py1 flex items-center gap-1 select-none"
                   >
                     <input
                       type="checkbox"
-                      mr1
+                      class="mr1"
                       :checked="filterModuleTypes?.includes(rule.name)"
                       @change="toggleModuleType(rule)"
                     >
-                    <div :class="rule.icon" icon-catppuccin />
-                    <div text-sm>{{ rule.description || rule.name }}</div>
+                    <div :class="rule.icon" class="icon-catppuccin" />
+                    <div class="text-sm">{{ rule.description || rule.name }}</div>
                   </label>
                 </div>
               </template>
             </VMenu>
           </button>
         </div>
-        <div v-if="selectedFields.includes('duration')" role="columnheader" rounded-tr-2 bg-base flex-none ws-nowrap p1 text-center font-600 w-27>
-          <button flex="~ row gap1 items-center justify-center" w-full @click="toggleDurationSortType">
+        <div v-if="selectedFields.includes('duration')" role="columnheader" class="rounded-tr-2 bg-base flex-none ws-nowrap p1 text-center font-600 w-27">
+          <button class="flex flex-row gap1 items-center justify-center w-full" @click="toggleDurationSortType">
             Duration
-            <span w-6 h-6 rounded-full cursor-pointer hover="bg-active" flex="~ items-center justify-center">
-              <i text-xs :class="[durationSortType !== 'asc' ? 'i-ph-arrow-down-duotone' : 'i-ph-arrow-up-duotone', durationSortType ? 'op100 text-primary' : 'op50']" />
+            <span class="w-6 h-6 rounded-full cursor-pointer hover:bg-active flex items-center justify-center">
+              <i class="text-xs" :class="[durationSortType !== 'asc' ? 'i-ph-arrow-down-duotone' : 'i-ph-arrow-up-duotone', durationSortType ? 'op100 text-primary' : 'op50']" />
             </span>
           </button>
         </div>
-        <div v-if="selectedFields.includes('startTime')" role="columnheader" rounded-tr-2 bg-base flex-none min-w52 ws-nowrap p1 text-center font-600>
+        <div v-if="selectedFields.includes('startTime')" role="columnheader" class="rounded-tr-2 bg-base flex-none min-w52 ws-nowrap p1 text-center font-600">
           Start Time
         </div>
-        <div v-if="selectedFields.includes('endTime')" role="columnheader" rounded-tr-2 bg-base flex-none min-w52 ws-nowrap p1 text-center font-600>
+        <div v-if="selectedFields.includes('endTime')" role="columnheader" class="rounded-tr-2 bg-base flex-none min-w52 ws-nowrap p1 text-center font-600">
           End Time
         </div>
       </div>
@@ -173,39 +169,35 @@ function getModuleGraphLink(moduleId: string | undefined): string | false {
     <template #default="{ item, index }">
       <div
         role="row"
-        flex="~ row"
-        h-9
-        class="border-base border-b border-dashed"
+        class="border-base border-b border-dashed flex flex-row h-9"
         :class="[index === filtered.length - 1 ? 'border-b-0' : '']"
       >
-        <div v-if="selectedFields.includes('hookName')" role="cell" flex="~ items-center justify-center" flex-none w32 ws-nowrap op80>
+        <div v-if="selectedFields.includes('hookName')" role="cell" class="flex items-center justify-center flex-none w32 ws-nowrap op80">
           <DisplayBadge :text="HOOK_NAME_MAP[item.type]" />
         </div>
-        <div v-if="selectedFields.includes('module')" role="cell" flex-1 min-w100 text-left text-ellipsis line-clamp-2>
+        <div v-if="selectedFields.includes('module')" role="cell" class="flex-1 min-w100 text-left text-ellipsis line-clamp-2">
           <DisplayModuleId
             :id="item.module"
-            w-full border-none ws-nowrap
+            class="w-full border-none ws-nowrap hover:bg-active border border-base rounded block px2 py1"
             :cwd="root"
             :link="getModuleGraphLink(item.graphModuleId)"
-            hover="bg-active"
-            border="~ base rounded" block px2 py1
           />
         </div>
-        <div v-if="selectedFields.includes('duration')" role="cell" flex="~ items-center justify-center" flex-none text-center text-sm w-27>
+        <div v-if="selectedFields.includes('duration')" role="cell" class="flex items-center justify-center flex-none text-center text-sm w-27">
           <DisplayDuration :duration="item.duration" />
         </div>
-        <div v-if="selectedFields.includes('startTime')" role="cell" flex="~ items-center justify-center" flex-none text-center font-mono text-sm min-w52 op80>
+        <div v-if="selectedFields.includes('startTime')" role="cell" class="flex items-center justify-center flex-none text-center font-mono text-sm min-w52 op80">
           {{ normalizeTimestamp(item.timestamp_start) }}
         </div>
-        <div v-if="selectedFields.includes('endTime')" role="cell" flex="~ items-center justify-center" flex-none text-center font-mono text-sm min-w52 op80>
+        <div v-if="selectedFields.includes('endTime')" role="cell" class="flex items-center justify-center flex-none text-center font-mono text-sm min-w52 op80">
           {{ normalizeTimestamp(item.timestamp_end) }}
         </div>
       </div>
     </template>
   </DataVirtualList>
-  <div v-else role="table" min-w-max h-full>
-    <div p4>
-      <div w-full h-48 flex="~ items-center justify-center" op50 italic>
+  <div v-else role="table" class="min-w-max h-full">
+    <div class="p4">
+      <div class="w-full h-48 flex items-center justify-center op50 italic">
         <p v-if="!selectedFields.length">
           No columns selected
         </p>
diff --git a/packages/vite/src/app/components/display/ModuleId.vue b/packages/vite/src/app/components/display/ModuleId.vue
index 8adace57..bf24b969 100644
--- a/packages/vite/src/app/components/display/ModuleId.vue
+++ b/packages/vite/src/app/components/display/ModuleId.vue
@@ -52,7 +52,7 @@ const containerClass = computed(() => 'flex items-center')
     :to="link ? (typeof link === 'string' ? link : { path: route.path, query: { ...route.query, module: id, chunk: undefined }, hash: locationHash }) : undefined"
   >
     <Tooltip
-      my-auto text-sm font-mono block w-full
+      class="my-auto text-sm font-mono block w-full"
       :triggers="['hover']"
       :delay="1200"
       :disabled="disableTooltip || (props.id?.length || 0) < 30"
@@ -62,8 +62,8 @@ const containerClass = computed(() => 'flex items-center')
         v-if="id"
         :class="containerClass"
       >
-        <DisplayFileIcon v-if="icon" :filename="id" mr1.5 />
-        <span overflow-hidden text-ellipsis break-all line-clamp-2>
+        <DisplayFileIcon v-if="icon" :filename="id" class="mr1.5" />
+        <span class="overflow-hidden text-ellipsis break-all line-clamp-2">
           <DisplayHighlightedPath :path="relativePath" :minimal="minimal" />
         </span>
         <slot />
@@ -82,7 +82,7 @@ const containerClass = computed(() => 'flex items-center')
         <slot name="detail" />
       </div>
       <template #popper>
-        <span font-mono text-sm>
+        <span class="font-mono text-sm">
           {{ props.id }}
         </span>
       </template>
diff --git a/packages/vite/src/app/components/display/VirtualTree.vue b/packages/vite/src/app/components/display/VirtualTree.vue
index 145d61d5..846b376c 100644
--- a/packages/vite/src/app/components/display/VirtualTree.vue
+++ b/packages/vite/src/app/components/display/VirtualTree.vue
@@ -175,7 +175,7 @@ function select(node: ViteModuleDest) {
 </script>
 
 <template>
-  <div p4>
+  <div class="p4">
     <DataVirtualList
       :items="rows"
       key-prop="key"
@@ -184,18 +184,14 @@ function select(node: ViteModuleDest) {
       :scroller="scroller"
     >
       <template #default="{ item: row }">
-        <div v-if="row.type === 'divider'" h-7 flex items-center>
-          <div w-full border="t base" />
+        <div v-if="row.type === 'divider'" class="h-7 flex items-center">
+          <div class="w-full border-t border-base" />
         </div>
 
         <button
           v-else-if="row.type === 'folder'"
           type="button"
-          h-7 w-full min-w-0
-          cursor-default select-none text-sm truncate
-          flex="~ gap-1 items-center"
-          px2 rounded bg-transparent text-left
-          hover="bg-active"
+          class="h-7 w-full min-w-0 cursor-default select-none text-sm truncate flex gap-1 items-center px2 rounded bg-transparent text-left hover:bg-active"
           :aria-expanded="isFolderOpen(row)"
           :style="{ paddingLeft: `${row.depth + 0.5}rem` }"
           @click="toggleFolder(row)"
@@ -204,8 +200,8 @@ function select(node: ViteModuleDest) {
             class="i-ph-caret-right-duotone transition op50 shrink-0"
             :class="isFolderOpen(row) ? 'rotate-90' : ''"
           />
-          <div :class="isFolderOpen(row) ? row.iconOpen || row.icon : row.icon" inline-block vertical-text-bottom shrink-0 />
-          <div font-mono truncate>
+          <div :class="isFolderOpen(row) ? row.iconOpen || row.icon : row.icon" class="inline-block vertical-text-bottom shrink-0" />
+          <div class="font-mono truncate">
             <DisplayHighlightedPath :path="row.node.name || ''" />
           </div>
         </button>
@@ -214,16 +210,12 @@ function select(node: ViteModuleDest) {
           :is="link ? NuxtLink : 'div'"
           v-else
           :to="link ? getItemLink(row.item) : undefined"
-          h-7 min-w-0
-          text-sm ws-nowrap
-          flex="~ gap-1 items-center"
-          px2 rounded
-          hover="bg-active"
+          class="h-7 min-w-0 text-sm ws-nowrap flex gap-1 items-center px2 rounded hover:bg-active"
           :style="{ paddingLeft: `${row.depth + 2.7}rem` }"
           @click="select(row.item)"
         >
-          <DisplayFileIcon :filename="row.item.full" shrink-0 />
-          <div font-mono min-w-0 truncate>
+          <DisplayFileIcon :filename="row.item.full" class="shrink-0" />
+          <div class="font-mono min-w-0 truncate">
             <DisplayHighlightedPath :path="getItemName(row.item)" />
             <slot name="extra" :node="row.item" />
           </div>
diff --git a/packages/vite/src/app/components/flowmap/ModuleFlow.vue b/packages/vite/src/app/components/flowmap/ModuleFlow.vue
index ce9cb207..75fd69c3 100644
--- a/packages/vite/src/app/components/flowmap/ModuleFlow.vue
+++ b/packages/vite/src/app/components/flowmap/ModuleFlow.vue
@@ -52,8 +52,8 @@ function handleClose() {
     <Pane size="55" min-size="10" max-size="90" class="!h-auto !of-visible ">
       <!-- the origin of the height: -->
       <!-- DialogTopMargin (20) + HandleHeight (30) + padding (4*2) = 58 -->
-      <div v-on-click-outside="[handleClose, { ignore: ['.splitpanes__splitter', '.flowmap-node-inline'] }]" w-full h="[calc(100vh-(var(--spacing)*58))]" pointer-events-auto sticky top-4>
-        <div absolute left-0 top="1/2" translate-x="-1/2" translate-y="-1/2" bg="#DFDFDF dark:#313131" h-10 w-2 rounded-full z-10 cursor-col-resize />
+      <div v-on-click-outside="[handleClose, { ignore: ['.splitpanes__splitter', '.flowmap-node-inline'] }]" class="w-full h-[calc(100vh-(var(--spacing)*58))] pointer-events-auto sticky top-4">
+        <div class="absolute left-0 top-1/2 translate-x--1/2 translate-y--1/2 bg-#DFDFDF dark:bg-#313131 h-10 w-2 rounded-full z-10 cursor-col-resize" />
         <ModuleFlowDetails
           :selected="selected"
           @close="handleClose"
@@ -61,7 +61,7 @@ function handleClose() {
       </div>
     </Pane>
   </Splitpanes>
-  <div p4>
+  <div class="p4">
     <ModuleFlowTimeline
       :module="module"
       :modules="modules"
diff --git a/packages/vite/src/app/components/flowmap/ModuleFlowDetails.vue b/packages/vite/src/app/components/flowmap/ModuleFlowDetails.vue
index 675e749e..93145cdb 100644
--- a/packages/vite/src/app/components/flowmap/ModuleFlowDetails.vue
+++ b/packages/vite/src/app/components/flowmap/ModuleFlowDetails.vue
@@ -45,17 +45,16 @@ function handleClose() {
 
 <template>
   <div
-    bg-glass w-full h-full
+    class="bg-glass w-full h-full border border-base rounded-lg of-hidden flex flex-col"
     :class="codeDisplay?.from && codeDisplay?.to ? '' : 'border-dashed'"
-    border="~ base rounded-lg" of-hidden flex="~ col"
   >
     <template v-if="codeDisplay?.from && codeDisplay?.to">
-      <div pl4 p2 font-mono border="b base" flex="~ items-center gap-2">
+      <div class="pl4 p2 font-mono border-b border-base flex items-center gap-2">
         <PluginName :name="codeDisplay?.plugin_name ?? ''" />
-        <span v-if="codeDisplay?.type" op50 text-xs>
+        <span v-if="codeDisplay?.type" class="op50 text-xs">
           {{ codeDisplay?.type === 'load' ? 'Load' : 'Transform' }}
         </span>
-        <div flex-auto />
+        <div class="flex-auto" />
         <DisplayIconButton
           title="Line Wrapping"
           class-icon="i-ph-arrow-u-down-left-duotone"
@@ -72,7 +71,7 @@ function handleClose() {
       />
     </template>
     <!-- TODO: show more info with selected node -->
-    <span v-else op50 italic ma>
+    <span v-else class="op50 italic ma">
       No data
     </span>
   </div>
diff --git a/packages/vite/src/app/components/flowmap/ModuleFlowTimeline.vue b/packages/vite/src/app/components/flowmap/ModuleFlowTimeline.vue
index 09794a82..a39d9b58 100644
--- a/packages/vite/src/app/components/flowmap/ModuleFlowTimeline.vue
+++ b/packages/vite/src/app/components/flowmap/ModuleFlowTimeline.vue
@@ -226,29 +226,28 @@ function countLineDiff(from?: string | null, to?: string | null) {
 </script>
 
 <template>
-  <div select-none h-full of-auto ws-nowrap w-100vh of-visible>
+  <div class="select-none h-full of-auto ws-nowrap w-100vh of-visible">
     <!-- Importers section -->
-    <div v-if="module.importers?.length" text-sm>
-      <div flex>
+    <div v-if="module.importers?.length" class="text-sm">
+      <div class="flex">
         <VMenu>
           <FlowmapNode class-node-outer="border-dashed">
             <template #inner>
-              <div flex="~ items-center gap-1" text-sm text-blue px3 py1>
-                <div i-ph-arrows-merge-duotone rotate-270 />
+              <div class="flex items-center gap-1 text-sm text-blue px3 py1">
+                <div class="i-ph-arrows-merge-duotone rotate-270" />
                 {{ module.importers?.length }} importers
               </div>
             </template>
           </FlowmapNode>
           <template #popper="{ hide }">
-            <div p2 flex="~ col gap-1">
+            <div class="p2 flex flex-col gap-1">
               <DisplayModuleId
                 v-for="importer of module.importers"
                 :id="importer"
                 :key="importer"
                 :cwd="root"
                 :link="modulesMap.has(importer)"
-                class="hover:bg-active"
-                px2 py1 rounded
+                class="hover:bg-active px2 py1 rounded"
                 @click="hide"
               />
             </div>
@@ -256,19 +255,18 @@ function countLineDiff(from?: string | null, to?: string | null) {
         </VMenu>
       </div>
       <div
-        pl-10 border="r" h-4 w-1px z-flowmap-line
-        class="border-flow-line border-dashed"
+        class="border-flow-line border-dashed pl-10 border-r h-4 w-1px z-flowmap-line"
       />
     </div>
 
     <!-- Main module node -->
-    <div flex="~">
+    <div class="flex">
       <FlowmapNode
         :lines="{ bottom: true }"
         :active="selected != null"
       >
         <template #content>
-          <div p2>
+          <div class="p2">
             <DisplayModuleId
               :id="module.id"
               :cwd="root"
@@ -277,18 +275,18 @@ function countLineDiff(from?: string | null, to?: string | null) {
         </template>
       </FlowmapNode>
       <template v-if="module.imports?.length">
-        <div w-10 border="t base dashed" mya />
-        <VMenu mya>
+        <div class="w-10 border-t border-base border-dashed mya" />
+        <VMenu class="mya">
           <FlowmapNode class-node-outer="border-dashed">
             <template #inner>
-              <div flex="~ items-center gap-1" text-sm text-orange px3 py1>
-                <div i-ph-arrows-split-duotone rotate-270 />
+              <div class="flex items-center gap-1 text-sm text-orange px3 py1">
+                <div class="i-ph-arrows-split-duotone rotate-270" />
                 {{ module.imports?.length }} imports
               </div>
             </template>
           </FlowmapNode>
           <template #popper="{ hide }">
-            <div p2 flex="~ col gap-1">
+            <div class="p2 flex flex-col gap-1">
               <DisplayModuleId
                 v-for="imp of module.imports"
                 :id="imp.module_id"
@@ -296,8 +294,7 @@ function countLineDiff(from?: string | null, to?: string | null) {
                 :kind="imp.kind"
                 :cwd="root"
                 :link="modulesMap.has(imp.module_id)"
-                class="hover:bg-active"
-                px2 py1 rounded
+                class="hover:bg-active px2 py1 rounded"
                 @click="hide"
               />
             </div>
@@ -315,8 +312,8 @@ function countLineDiff(from?: string | null, to?: string | null) {
       :active-end="isSelectedAncestor(loads[0])"
     >
       <template #node>
-        <div i-ph-magnifying-glass-duotone /> Resolve Id
-        <span op50 text-xs>({{ resolveIds.length }})</span>
+        <div class="i-ph-magnifying-glass-duotone" /> Resolve Id
+        <span class="op50 text-xs">({{ resolveIds.length }})</span>
       </template>
       <template #container>
         <div>
@@ -342,8 +339,8 @@ function countLineDiff(from?: string | null, to?: string | null) {
       :active-end="isSelectedAncestor(transforms[0])"
     >
       <template #node>
-        <div i-ph-upload-simple-duotone /> Load
-        <span op50 text-xs>({{ loadNodes.length }})</span>
+        <div class="i-ph-upload-simple-duotone" /> Load
+        <span class="op50 text-xs">({{ loadNodes.length }})</span>
       </template>
       <template #container>
         <div>
@@ -370,9 +367,9 @@ function countLineDiff(from?: string | null, to?: string | null) {
       :active-end="isSelectedAncestor(transforms.at(-1))"
     >
       <template #node>
-        <div i-ph-magic-wand-duotone /> Transform
-        <span v-if="transformsLoading" i-ph-spinner animate-spin />
-        <span v-else op50 text-xs>({{ transformNodes.length }})</span>
+        <div class="i-ph-magic-wand-duotone" /> Transform
+        <span v-if="transformsLoading" class="i-ph-spinner animate-spin" />
+        <span v-else class="op50 text-xs">({{ transformNodes.length }})</span>
       </template>
       <template #container>
         <div>
diff --git a/packages/vite/src/app/components/flowmap/NodeModuleInfo.vue b/packages/vite/src/app/components/flowmap/NodeModuleInfo.vue
index 93991968..a007bafd 100644
--- a/packages/vite/src/app/components/flowmap/NodeModuleInfo.vue
+++ b/packages/vite/src/app/components/flowmap/NodeModuleInfo.vue
@@ -87,40 +87,40 @@ const importerModule = computed(() => {
 </script>
 
 <template>
-  <div v-if="item.type === 'no_changes_collapsed'" pl10>
+  <div v-if="item.type === 'no_changes_collapsed'" class="pl10">
     <div
-      flex="~ gap-2 items-center" text-sm border="l" py1
+      class="flex gap-2 items-center text-sm border-l py1"
       :class="active ? 'border-flow-line-active' : 'border-flow-line'"
     >
       <div
-        w-2 h-2 border="4" rounded-full ml--1 translate-x--0.5px
+        class="w-2 h-2 border-4 rounded-full ml--1 translate-x--0.5px"
         :class="active ? 'border-flow-line-active' : 'border-flow-line'"
       />
-      <span op50>{{ item.count }} plugins did not change the content but cost</span>
-      <DisplayDuration :duration="item.duration" :color="true" :factor="5" text-xs />
-      <span op50 flex-shrink-0>in total</span>
+      <span class="op50">{{ item.count }} plugins did not change the content but cost</span>
+      <DisplayDuration :duration="item.duration" :color="true" :factor="5" class="text-xs" />
+      <span class="op50 flex-shrink-0">in total</span>
       <button
-        border="~ base rounded-full" px2 py-px op50 hover="op100"
+        class="border border-base rounded-full px2 py-px op50 hover:op100"
         @click="emit('toggleShowAll', item)"
       >
         Expand
       </button>
     </div>
   </div>
-  <div v-else-if="item.type === 'no_changes_hide'" pl10>
+  <div v-else-if="item.type === 'no_changes_hide'" class="pl10">
     <div
-      flex="~ gap-2 items-center" text-sm border="l" py1
+      class="flex gap-2 items-center text-sm border-l py1"
       :class="active ? 'border-flow-line-active' : 'border-flow-line'"
     >
       <div
-        w-2 h-2 border="4" rounded-full ml--1 translate-x--0.5px
+        class="w-2 h-2 border-4 rounded-full ml--1 translate-x--0.5px"
         :class="active ? 'border-flow-line-active' : 'border-flow-line'"
       />
-      <span op50>{{ item.count }} plugins did not change the content but cost</span>
-      <DisplayDuration :duration="item.duration" :color="true" :factor="5" text-xs />
-      <span op50 flex-shrink-0>in total</span>
+      <span class="op50">{{ item.count }} plugins did not change the content but cost</span>
+      <DisplayDuration :duration="item.duration" :color="true" :factor="5" class="text-xs" />
+      <span class="op50 flex-shrink-0">in total</span>
       <button
-        border="~ base rounded-full" px2 py-px op50 hover="op100"
+        class="border border-base rounded-full px2 py-px op50 hover:op100"
         @click="emit('toggleShowAll', item)"
       >
         Hide
@@ -133,12 +133,12 @@ const importerModule = computed(() => {
     :class-node-outer="isDashed ? 'border-dashed' : ''"
     :active="active"
     class-node-inline="gap-2 items-center"
-    pl6
+    class="pl6"
     @pointerenter="enter"
   >
     <template #inner>
       <button
-        px3 py1 hover="bg-active" flex="~ inline gap-2 items-center"
+        class="px3 py1 hover:bg-active flex flex-inline gap-2 items-center"
         @click="emit('select', item)"
         @pointerdown="down"
       >
@@ -158,16 +158,16 @@ const importerModule = computed(() => {
         :duration="item.duration"
         :color="true"
         :factor="5"
-        text-xs flex-shrink-0
+        class="text-xs flex-shrink-0"
       />
       <template v-if="item.type === 'transform'">
-        <div v-if="item.content_from === item.content_to" text-xs op25>
+        <div v-if="item.content_from === item.content_to" class="text-xs op25">
           no changes
         </div>
         <div v-else>
-          <div font-mono text-xs flex="~ gap-1 items-center">
-            <span text-green>+{{ item.diff_added ?? 0 }}</span>
-            <span text-red>-{{ item.diff_removed ?? 0 }}</span>
+          <div class="font-mono text-xs flex gap-1 items-center">
+            <span class="text-green">+{{ item.diff_added ?? 0 }}</span>
+            <span class="text-red">-{{ item.diff_removed ?? 0 }}</span>
           </div>
         </div>
       </template>
@@ -177,17 +177,17 @@ const importerModule = computed(() => {
       #after
     >
       <div
-        p3 ml4 border="l" flex="~ col gap-1"
+        class="p3 ml4 border-l flex flex-col gap-1"
         :class="active ? 'border-flow-line-active' : 'border-flow-line'"
       >
-        <div v-if="item.importer" flex="~ gap-2 items-center">
-          <div i-ph-arrow-elbow-left-down text-base op50 flex-none ml0.8 />
+        <div v-if="item.importer" class="flex gap-2 items-center">
+          <div class="i-ph-arrow-elbow-left-down text-base op50 flex-none ml0.8" />
           <DisplayModuleId
             :id="item.importer"
             :cwd="root"
             :link="importerModule ? true : false"
             :class="importerModule ? 'hover:bg-active' : ''"
-            px2 py1 rounded
+            class="px2 py1 rounded"
           />
         </div>
         <DisplayModuleId
diff --git a/packages/vite/src/app/components/flowmap/PluginFlow.vue b/packages/vite/src/app/components/flowmap/PluginFlow.vue
index 73ed4488..c97bd9a5 100644
--- a/packages/vite/src/app/components/flowmap/PluginFlow.vue
+++ b/packages/vite/src/app/components/flowmap/PluginFlow.vue
@@ -100,46 +100,45 @@ function toggleShowType() {
 </script>
 
 <template>
-  <div p2 h-full w-full>
-    <div flex="~" border="~ base" rounded-2 h-full relative of-hidden>
-      <div v-if="expanded" of-hidden border="r base">
+  <div class="p2 h-full w-full">
+    <div class="flex border border-base rounded-2 h-full relative of-hidden">
+      <div v-if="expanded" class="of-hidden border-r border-base">
         <FlowmapPluginFlowTimeline
           :build-metrics="buildMetrics"
         >
           <template #header>
-            <div px2 h10 border="b base" bg-base rounded-t-2 flex="~ items-center justify-end">
-              <button w8 h8 rounded-full cursor-pointer hover="bg-active" flex="~ items-center justify-center" @click="toggleExpanded(false)">
-                <i i-ph-sidebar-simple-duotone inline-flex op50 />
+            <div class="px2 h10 border-b border-base bg-base rounded-t-2 flex items-center justify-end">
+              <button class="w8 h8 rounded-full cursor-pointer hover:bg-active flex items-center justify-center" @click="toggleExpanded(false)">
+                <i class="i-ph-sidebar-simple-duotone inline-flex op50" />
               </button>
             </div>
           </template>
         </FlowmapPluginFlowTimeline>
       </div>
-      <div flex-1 h-full min-h-0 flex="~ col">
-        <div flex="~ items-center justify-between" border="b base" px2 h10 bg-base rounded-t-2 of-x-auto ws-nowrap>
-          <div flex="~ items-center" h-full>
-            <button v-if="!expanded" w8 h8 rounded-full cursor-pointer mr1 hover="bg-active" flex="~ items-center justify-center" @click="toggleExpanded(true)">
-              <i i-ph-sidebar-duotone inline-flex op50 />
+      <div class="flex-1 h-full min-h-0 flex flex-col">
+        <div class="flex items-center justify-between border-b border-base px2 h10 bg-base rounded-t-2 of-x-auto ws-nowrap">
+          <div class="flex items-center h-full">
+            <button v-if="!expanded" class="w8 h8 rounded-full cursor-pointer mr1 hover:bg-active flex items-center justify-center" @click="toggleExpanded(true)">
+              <i class="i-ph-sidebar-duotone inline-flex op50" />
             </button>
             <DataSearchPanel
-              v-model="searchValue"
-              h-full border-none selected-container-class="px0! py1 border-none bg-none flex-nowrap! h-full"
+              v-model="searchValue" selected-container-class="px0! py1 border-none bg-none flex-nowrap! h-full"
               :rules="tableFieldFilterRules"
-              class="[&_[icon-catppuccin]]:(filter-none!)"
+              class="[&_[icon-catppuccin]]:(filter-none!) h-full border-none"
             />
           </div>
-          <div v-if="showUnchangedInfo" flex="~ items-center justify-center gap1" h-full text-xs py1>
-            <p class="op50" flex="~ items-center gap-1">
+          <div v-if="showUnchangedInfo" class="flex items-center justify-center gap1 h-full text-xs py1">
+            <p class="op50 flex items-center gap-1">
               <DisplayNumberBadge :number="unchangedInfo.count" /> module unchanged, but cost <DisplayDuration :duration="unchangedInfo.duration" />
             </p>
-            <button rounded-md px2 py1 select-none h-full border="~ base rounded-lg" hover="bg-active" :title="showTypeText" @click="toggleShowType">
+            <button class="rounded-md px2 py1 select-none h-full border border-base rounded-lg hover:bg-active" :title="showTypeText" @click="toggleShowType">
               <div class="text-xs op50">
                 {{ showTypeText }}
               </div>
             </button>
           </div>
         </div>
-        <div flex-1 min-h-0 overscroll-contain>
+        <div class="flex-1 min-h-0 overscroll-contain">
           <DataPluginDetailsTable
             :modules="modules"
             :build-metrics="buildMetrics"
diff --git a/packages/vite/src/app/components/flowmap/PluginFlowTimeline.vue b/packages/vite/src/app/components/flowmap/PluginFlowTimeline.vue
index 6325c3ef..9a5a4e4c 100644
--- a/packages/vite/src/app/components/flowmap/PluginFlowTimeline.vue
+++ b/packages/vite/src/app/components/flowmap/PluginFlowTimeline.vue
@@ -49,16 +49,16 @@ const endTime = computed(() => {
 </script>
 
 <template>
-  <div flex="~ col w-full">
+  <div class="flex flex-col">
     <slot name="header" />
-    <div select-none h-full of-auto ws-nowrap w-auto of-visible p4 flex="~ col">
-      <div flex="~">
+    <div class="select-none h-full of-auto ws-nowrap w-auto of-visible p4 flex flex-col">
+      <div class="flex">
         <FlowmapNode
           :active="false"
           class-node-inner="w60"
         >
           <template #content>
-            <div p2 w-full text-center @click="settings.pluginDetailSelectedHook = ''">
+            <div class="p2 w-full text-center" @click="settings.pluginDetailSelectedHook = ''">
               <DisplayPluginName
                 :name="buildMetrics.plugin_name"
                 class="font-mono text-sm ws-nowrap text-ellipsis line-clamp-1"
@@ -67,19 +67,15 @@ const endTime = computed(() => {
           </template>
         </FlowmapNode>
       </div>
-      <div flex="~ items-center justify-center" relative w-60 h14>
+      <div class="flex items-center justify-center relative w-60 h14">
         <div
-          class="border-flow-line left-50% translate-x--1/2"
-          absolute top-0 border="r" z-flowmap-line
-          h4
+          class="border-flow-line left-50% translate-x--1/2 absolute top-0 border-r z-flowmap-line h4"
         />
         <div
-          class="border-flow-line left-50% translate-x--1/2"
-          absolute top-10 border="r" z-flowmap-line
-          h4
+          class="border-flow-line left-50% translate-x--1/2 absolute top-10 border-r z-flowmap-line h4"
         />
-        <span op50 text-xs flex="~ items-center justify-center gap-1" h6>
-          <i i-ph-airplane-takeoff-thin text-4 inline-flex />
+        <span class="op50 text-xs flex items-center justify-center gap-1 h6">
+          <i class="i-ph-airplane-takeoff-thin text-4 inline-flex" />
           <time v-if="startTime" :datetime="new Date(startTime).toISOString()">{{ new Date(startTime).toLocaleString() }}</time>
         </span>
       </div>
@@ -87,14 +83,14 @@ const endTime = computed(() => {
         class-node-inner="w60"
         :class-node-outer="`${!resolveIdMetricsInfo.modules && !resolveIdMetricsInfo.calls ? `b-dashed!` : ''}`"
         class-line-bottom="left-50%! translate-x--1/2"
-        pb4 w60
+        class="pb4 w60"
         :lines="{ bottom: true }"
         :active="settings.pluginDetailSelectedHook === 'resolve'"
       >
         <template #content>
-          <div flex="~ col gap1" w-full @click="settings.pluginDetailSelectedHook = 'resolve'">
-            <span flex="~ items-center justify-center gap-1">
-              <i i-ph-magnifying-glass-duotone /> Resolve Id
+          <div class="flex flex-col gap1 w-full" @click="settings.pluginDetailSelectedHook = 'resolve'">
+            <span class="flex items-center justify-center gap-1">
+              <i class="i-ph-magnifying-glass-duotone" /> Resolve Id
             </span>
             <div>
               <FlowmapNodePluginInfo
@@ -112,13 +108,13 @@ const endTime = computed(() => {
         class-node-inner="w60"
         :class-node-outer="`${!loadMetricsInfo.modules && !loadMetricsInfo.calls ? `b-dashed!` : ''}`"
         class-line-bottom="left-50%! translate-x--1/2"
-        pb4 w60
+        class="pb4 w60"
         :lines="{ bottom: true }"
       >
         <template #content>
-          <div flex="~ col gap1" w-full @click="settings.pluginDetailSelectedHook = 'load'">
-            <span flex="~ items-center justify-center gap-1">
-              <i i-ph-upload-simple-duotone /> Load
+          <div class="flex flex-col gap1 w-full" @click="settings.pluginDetailSelectedHook = 'load'">
+            <span class="flex items-center justify-center gap-1">
+              <i class="i-ph-upload-simple-duotone" /> Load
             </span>
             <div>
               <FlowmapNodePluginInfo
@@ -137,9 +133,9 @@ const endTime = computed(() => {
         :class-node-outer="`${!transformMetricsInfo.modules && !transformMetricsInfo.calls ? `b-dashed!` : ''}`"
       >
         <template #content>
-          <div flex="~ col gap1" w-full @click="settings.pluginDetailSelectedHook = 'transform'">
-            <span flex="~ items-center justify-center gap-1">
-              <i i-ph-magic-wand-duotone /> Transform
+          <div class="flex flex-col gap1 w-full" @click="settings.pluginDetailSelectedHook = 'transform'">
+            <span class="flex items-center justify-center gap-1">
+              <i class="i-ph-magic-wand-duotone" /> Transform
             </span>
             <div>
               <FlowmapNodePluginInfo
@@ -151,23 +147,18 @@ const endTime = computed(() => {
           </div>
         </template>
       </FlowmapNode>
-      <div flex="~ items-center justify-center" relative w-60 h14>
+      <div class="flex items-center justify-center relative w-60 h14">
         <div
-          class="border-flow-line left-50% translate-x--1/2"
-          absolute top-0 border="r" z-flowmap-line
-          h4
+          class="border-flow-line left-50% translate-x--1/2 absolute top-0 border-r z-flowmap-line h4"
         />
         <div
-          class="border-flow-line left-50% translate-x--1/2"
-          absolute top-10 border="r" z-flowmap-line
-          h4
+          class="border-flow-line left-50% translate-x--1/2 absolute top-10 border-r z-flowmap-line h4"
         />
         <div
-          class="border-flow-line left-50% translate-x--1/2"
-          absolute top-14 w-2 h-2 border="4" rounded-full
+          class="border-flow-line left-50% translate-x--1/2 absolute top-14 w-2 h-2 border-4 rounded-full"
         />
-        <span op50 text-xs flex="~ items-center justify-center gap-1" h6>
-          <i i-ph-airplane-landing-thin text-4 inline-flex />
+        <span class="op50 text-xs flex items-center justify-center gap-1 h6">
+          <i class="i-ph-airplane-landing-thin text-4 inline-flex" />
           <time v-if="endTime" :datetime="new Date(endTime).toISOString()">{{ new Date(endTime).toLocaleString() }}</time>
         </span>
       </div>
diff --git a/packages/vite/src/app/components/modules/BuildMetrics.vue b/packages/vite/src/app/components/modules/BuildMetrics.vue
index 4cc7b710..90fa73fa 100644
--- a/packages/vite/src/app/components/modules/BuildMetrics.vue
+++ b/packages/vite/src/app/components/modules/BuildMetrics.vue
@@ -31,37 +31,37 @@ const transformedCodeSize = computed(() => {
 </script>
 
 <template>
-  <div text-xs font-mono flex="~ items-center gap-3" ml2>
+  <div class="text-xs font-mono flex items-center gap-3 ml2">
     <DisplayDuration
-      :duration="durations.resolveIds" flex="~ gap-1 items-center"
+      :duration="durations.resolveIds" class="flex gap-1 items-center"
       :title="`Resolve Id hooks cost: ${formatDuration(durations.resolveIds, true)}`"
     >
-      <span i-ph-magnifying-glass-duotone inline-block />
+      <span class="i-ph-magnifying-glass-duotone inline-block" />
     </DisplayDuration>
     <DisplayDuration
-      :duration="durations.loads" flex="~ gap-1 items-center"
+      :duration="durations.loads" class="flex gap-1 items-center"
       :title="`Load hooks cost: ${formatDuration(durations.loads, true)}`"
     >
-      <span i-ph-upload-simple-duotone inline-block />
+      <span class="i-ph-upload-simple-duotone inline-block" />
     </DisplayDuration>
     <DisplayDuration
-      :duration="durations.transforms" flex="~ gap-1 items-center"
+      :duration="durations.transforms" class="flex gap-1 items-center"
       :title="`Transform hooks cost: ${formatDuration(durations.transforms, true)}`"
     >
-      <span i-ph-magic-wand-duotone inline-block />
+      <span class="i-ph-magic-wand-duotone inline-block" />
     </DisplayDuration>
-    <span op40>|</span>
+    <span class="op40">|</span>
     <DisplayDuration
-      :duration="durations.total" flex="~ gap-1 items-center"
+      :duration="durations.total" class="flex gap-1 items-center"
       :title="`Total build cost: ${formatDuration(durations.total, true)}`"
     >
-      <span i-ph-clock-duotone inline-block />
+      <span class="i-ph-clock-duotone inline-block" />
     </DisplayDuration>
     <template v-if="sourceCodeSize && transformedCodeSize">
-      <span op40>|</span>
-      <div flex="~ gap-1 items-center">
+      <span class="op40">|</span>
+      <div class="flex gap-1 items-center">
         <DisplayFileSizeBadge title="Source code size" :bytes="sourceCodeSize" />
-        <span i-ph-arrow-right-duotone op50 />
+        <span class="i-ph-arrow-right-duotone op50" />
         <DisplayFileSizeBadge title="Transformed code size" :bytes="transformedCodeSize" />
       </div>
     </template>
diff --git a/packages/vite/src/app/components/modules/DetailedList.vue b/packages/vite/src/app/components/modules/DetailedList.vue
index 102139c9..e4b1e443 100644
--- a/packages/vite/src/app/components/modules/DetailedList.vue
+++ b/packages/vite/src/app/components/modules/DetailedList.vue
@@ -38,7 +38,7 @@ function hasBuildMetrics(metrics: ViteModuleBuildMetrics | undefined): metrics i
 </script>
 
 <template>
-  <div flex="~ col gap-2" p4>
+  <div class="flex flex-col gap-2 p4">
     <DataVirtualList
       :items="modules"
       key-prop="id"
@@ -48,30 +48,29 @@ function hasBuildMetrics(metrics: ViteModuleBuildMetrics | undefined): metrics i
       :scroller="scroller"
     >
       <template #default="{ item }">
-        <div flex pb2>
+        <div class="flex pb2">
           <DisplayModuleId
             :id="item.id"
             :cwd="root"
-            hover="bg-active" block px2 p1 w-full
-            border="~ base rounded"
+            class="hover:bg-active block px2 p1 w-full border border-base rounded"
             :link="true"
           >
             <template #detail>
-              <div flex="~ gap-1 wrap" text-xs>
-                <ul flex="~ auto text-xs wrap">
+              <div class="flex gap-1 flex-wrap text-xs">
+                <ul class="flex flex-auto flex-wrap">
                   <template v-for="(p, i) of getFilteredTransforms(item)" :key="i">
-                    <li flex="~ items-center">
+                    <li class="flex items-center">
                       <DisplayPluginName
                         :name="p.plugin_name"
                         class="font-mono ws-nowrap op-50"
                       />
-                      <span v-if="!isLastFilteredTransform(item, i)" op20>|</span>
+                      <span v-if="!isLastFilteredTransform(item, i)" class="op20">|</span>
                     </li>
                   </template>
                 </ul>
 
-                <div flex="~ auto gap-1" of-hidden />
-                <div flex="~ none gap-1 wrap justify-end">
+                <div class="flex flex-auto gap-1 of-hidden" />
+                <div class="flex flex-none gap-1 flex-wrap justify-end">
                   <span>
                     <ModulesBuildMetrics v-if="hasBuildMetrics(item.buildMetrics)" :metrics="item.buildMetrics" />
                   </span>
diff --git a/packages/vite/src/app/components/modules/FlatList.vue b/packages/vite/src/app/components/modules/FlatList.vue
index 3db933e6..cea03c54 100644
--- a/packages/vite/src/app/components/modules/FlatList.vue
+++ b/packages/vite/src/app/components/modules/FlatList.vue
@@ -23,7 +23,7 @@ const emit = defineEmits<{
 </script>
 
 <template>
-  <div flex="~ col gap-2" p4>
+  <div class="flex flex-col gap-2 p4">
     <DataVirtualList
       :items="modules"
       key-prop="id"
@@ -32,12 +32,11 @@ const emit = defineEmits<{
       :scroller="scroller"
     >
       <template #default="{ item }">
-        <div flex pb2 @click="emit('select', item)">
+        <div class="flex pb2" @click="emit('select', item)">
           <DisplayModuleId
             :id="item.id"
             :cwd="root"
-            hover="bg-active" block px2 p1 w-full
-            border="~ base rounded"
+            class="hover:bg-active block px2 p1 w-full border border-base rounded"
             :link="link"
             :disable-tooltip="disableTooltip"
           />
diff --git a/packages/vite/src/app/components/modules/Folder.vue b/packages/vite/src/app/components/modules/Folder.vue
index 710e5e65..102ae2ec 100644
--- a/packages/vite/src/app/components/modules/Folder.vue
+++ b/packages/vite/src/app/components/modules/Folder.vue
@@ -85,7 +85,7 @@ const moduleTreeRoots = computed(() => {
 
 <template>
   <DisplayVirtualTree
-    relative
+    class="relative"
     :roots="moduleTreeRoots"
     :link="true"
   />
diff --git a/packages/vite/src/app/components/modules/Graph.vue b/packages/vite/src/app/components/modules/Graph.vue
index 182511b5..40a72d0c 100644
--- a/packages/vite/src/app/components/modules/Graph.vue
+++ b/packages/vite/src/app/components/modules/Graph.vue
@@ -184,7 +184,7 @@ createModuleGraph<ViteModuleListItem, ViteModuleImport>({
         :link="true"
         :cwd="root"
         :minimal="true"
-        flex="1"
+        class="flex-1"
       />
     </template>
     <template #link="{ link, d, linkClass }">
diff --git a/packages/vite/src/app/pages/graph.vue b/packages/vite/src/app/pages/graph.vue
index 1317b5d0..1d51256d 100644
--- a/packages/vite/src/app/pages/graph.vue
+++ b/packages/vite/src/app/pages/graph.vue
@@ -240,18 +240,18 @@ onKeyDown('Escape', (e) => {
     v-if="loading"
     text="Loading modules..."
   />
-  <div v-else-if="error" h-full flex="~ col gap-3 items-center justify-center" p8 text-center>
-    <div i-ph-warning-duotone text-4xl text-amber />
-    <div font-mono text-sm max-w-180 ws-pre-wrap>
+  <div v-else-if="error" class="h-full flex flex-col gap-3 items-center justify-center p8 text-center">
+    <div class="i-ph-warning-duotone text-4xl text-amber" />
+    <div class="font-mono text-sm max-w-180 ws-pre-wrap">
       {{ error.message }}
     </div>
-    <button btn-action @click="load()">
-      <span i-ph-arrow-clockwise-duotone />
+    <button class="btn-action" @click="load()">
+      <span class="i-ph-arrow-clockwise-duotone" />
       Retry
     </button>
   </div>
-  <div v-else relative :class="{ 'max-h-screen of-hidden': settings.moduleGraphViewType === 'graph' }">
-    <div sticky left-4 right-4 top-4 z-panel-nav p-4>
+  <div v-else class="relative" :class="{ 'max-h-screen of-hidden': settings.moduleGraphViewType === 'graph' }">
+    <div class="sticky left-4 right-4 top-4 z-panel-nav p-4">
       <DataSearchPanel v-model="searchValue" :rules="searchFilterTypes">
         <template v-if="pathSelectorVisible" #search>
           <DataPathSelector :data="searched" import-id-key="module_id" :search-keys="['id']" @select="selectPathNodes" @close="togglePathSelector(false)">
@@ -269,7 +269,7 @@ onKeyDown('Escape', (e) => {
               <DisplayModuleId
                 :id="id"
                 :cwd="root"
-                block text-nowrap
+                class="block text-nowrap"
                 :link="false"
                 :disable-tooltip="true"
               />
@@ -277,21 +277,20 @@ onKeyDown('Escape', (e) => {
           </DataPathSelector>
         </template>
         <template #search-end>
-          <div v-if="settings.moduleGraphViewType === 'graph'" h10 mr2 flex="~ items-center">
+          <div v-if="settings.moduleGraphViewType === 'graph'" class="h10 mr2 flex items-center">
             <button
-              w-8 h-8 rounded-full flex items-center justify-center
-              hover="bg-active op100" op50 title="Graph Path Selector" @click="togglePathSelector(true)"
+              class="w-8 h-8 rounded-full flex items-center justify-center hover:bg-active hover:op100 op50" title="Graph Path Selector" @click="togglePathSelector(true)"
             >
-              <i i-ri:route-line flex />
+              <i class="i-ri:route-line flex" />
             </button>
           </div>
         </template>
-        <div flex="~ wrap gap-2 items-center" p2 border="t base">
-          <span op50 pl2 text-sm>View as</span>
+        <div class="flex flex-wrap gap-2 items-center p2 border-t border-base">
+          <span class="op50 pl2 text-sm">View as</span>
           <button
             v-for="viewType of moduleViewTypes"
             :key="viewType.value"
-            btn-action
+            class="btn-action"
             :class="settings.moduleGraphViewType === viewType.value ? 'bg-active' : 'grayscale op50'"
             @click="toggleDisplay(viewType.value)"
           >
@@ -325,20 +324,18 @@ onKeyDown('Escape', (e) => {
     />
     <div
       v-if="settings.moduleGraphViewType === 'list' || settings.moduleGraphViewType === 'detailed-list'"
-      fixed bottom-4 py-1 px-2 bg-glass left="1/2" translate-x="-1/2" border="~ base rounded-full" text="center xs"
+      class="fixed bottom-4 py-1 px-2 bg-glass left-1/2 translate-x--1/2 border border-base rounded-full text-center text-xs"
     >
-      <span op50>{{ searched.length }} of {{ modules.length }}</span>
+      <span class="op50">{{ searched.length }} of {{ modules.length }}</span>
     </div>
 
     <div
-      v-if="selectedModuleQuery && query" fixed inset-0
-      backdrop-blur-8 backdrop-brightness-95 z-panel-content
+      v-if="selectedModuleQuery && query" class="fixed inset-0 backdrop-blur-8 backdrop-brightness-95 z-panel-content"
       @click.self="closeCurrentPanel"
     >
       <div
         :key="selectedModuleQuery"
-        fixed right-0 bottom-0 top-20 left-20 z-panel-content
-        bg-glass border="l t base rounded-tl-xl"
+        class="fixed right-0 bottom-0 top-20 left-20 z-panel-content bg-glass border-l border-t border-base rounded-tl-xl"
       >
         <DataModuleDetailsLoader
           :module="selectedModuleQuery"
diff --git a/packages/vite/src/app/pages/home.vue b/packages/vite/src/app/pages/home.vue
index a41f4c76..f2334767 100644
--- a/packages/vite/src/app/pages/home.vue
+++ b/packages/vite/src/app/pages/home.vue
@@ -120,28 +120,27 @@ const metadata = computed(() => [
     v-if="isLoading"
     text="Connecting..."
   />
-  <div v-else p4 flex="~ col gap-4" items-center justify-center relative>
+  <div v-else class="p4 flex flex-col gap-4 items-center justify-center relative">
     <BannerViteDevTools />
 
-    <div border="~ base rounded" p2 flex="~ col gap-4 justify-center">
+    <div class="border border-base rounded p2 flex flex-col gap-4 justify-center">
       <div
         v-for="section in metadata"
         :key="section.id"
-        p4
-        flex="~ gap-14 items-center"
+        class="p4 flex gap-14 items-center"
       >
         <div class="text-3xl flex ml3" :class="section.icon" />
         <div>
           <div
             v-for="row in section.rows"
             :key="row.id"
-            grid="~ cols-[max-content_80px_2fr] gap-2 items-center"
+            class="grid grid-cols-[max-content_80px_2fr] gap-2 items-center"
           >
             <div :class="row.icon" />
             <div>
               {{ row.label }}
             </div>
-            <div font-mono truncate>
+            <div class="font-mono truncate">
               {{ row.value }}
             </div>
           </div>
diff --git a/packages/vite/src/app/pages/index.vue b/packages/vite/src/app/pages/index.vue
index 4ec001bf..1206b25f 100644
--- a/packages/vite/src/app/pages/index.vue
+++ b/packages/vite/src/app/pages/index.vue
@@ -5,5 +5,5 @@ navigateTo('/home')
 </script>
 
 <template>
-  <div p10 flex="~ col" items-center justify-center />
+  <div class="p10 flex flex-col items-center justify-center" />
 </template>
diff --git a/packages/vite/src/app/pages/plugins.vue b/packages/vite/src/app/pages/plugins.vue
index 0acd32d4..66d81166 100644
--- a/packages/vite/src/app/pages/plugins.vue
+++ b/packages/vite/src/app/pages/plugins.vue
@@ -186,36 +186,34 @@ onKeyDown('Escape', (event) => {
     v-if="loading"
     text="Loading plugins..."
   />
-  <div v-else-if="error" h-full flex="~ col gap-3 items-center justify-center" p8 text-center>
-    <div i-ph-warning-duotone text-4xl text-amber />
-    <div font-mono text-sm max-w-180 ws-pre-wrap>
+  <div v-else-if="error" class="h-full flex flex-col gap-3 items-center justify-center p8 text-center">
+    <div class="i-ph-warning-duotone text-4xl text-amber" />
+    <div class="font-mono text-sm max-w-180 ws-pre-wrap">
       {{ error.message }}
     </div>
-    <button btn-action @click="load()">
-      <span i-ph-arrow-clockwise-duotone />
+    <button class="btn-action" @click="load()">
+      <span class="i-ph-arrow-clockwise-duotone" />
       Retry
     </button>
   </div>
-  <div v-else relative min-h-screen>
-    <div sticky left-4 right-4 top-4 z-panel-nav p-4>
+  <div v-else class="relative min-h-screen">
+    <div class="sticky left-4 right-4 top-4 z-panel-nav p-4">
       <DataSearchPanel v-model="searchValue" :rules="searchFilterTypes" />
     </div>
     <PluginsFlatList :plugins="searched ?? []" scroller="window" />
     <div
-      fixed bottom-4 py-1 px-2 bg-glass left="1/2" translate-x="-1/2" border="~ base rounded-full" text="center xs"
+      class="fixed bottom-4 py-1 px-2 bg-glass left-1/2 translate-x--1/2 border border-base rounded-full text-center text-xs"
     >
-      <span op50>{{ searched.length }} of {{ plugins.length || 0 }}</span>
+      <span class="op50">{{ searched.length }} of {{ plugins.length || 0 }}</span>
     </div>
 
     <div
-      v-if="selectedPluginQuery && query" fixed inset-0
-      backdrop-blur-8 backdrop-brightness-95 z-panel-content
+      v-if="selectedPluginQuery && query" class="fixed inset-0 backdrop-blur-8 backdrop-brightness-95 z-panel-content"
       @click.self="closeCurrentPanel"
     >
       <div
         :key="selectedPluginQuery"
-        fixed right-0 bottom-0 top-20 left-20 z-panel-content
-        bg-glass border="l t base rounded-tl-xl"
+        class="fixed right-0 bottom-0 top-20 left-20 z-panel-content bg-glass border-l border-t border-base rounded-tl-xl"
       >
         <DataPluginDetailsLoader
           :plugin="selectedPluginQuery"