diff --git a/.github/workflows/README.md b/.github/workflows/README.md
index 39f1f248284e..4a4e7ac80d69 100644
--- a/.github/workflows/README.md
+++ b/.github/workflows/README.md
@@ -18,13 +18,21 @@ See below for a summary of this repo's Actions
   - Adds the PR to a GitHub project
   - Makes sure that Wrangler's warning for old Node.js versions works.
 
-### E2E tests (e2e.yml)
+### Wrangler E2E tests (e2e-wrangler.yml)
 
 - Triggers
   - Updates to PRs on the Cloudflare fork.
   - PRs in the merge queue.
 - Actions
-  - Runs the E2E tests for Wrangler & Vite.
+  - Runs the E2E tests for Wrangler.
+
+### Vite Plugin E2E tests (e2e-vite.yml)
+
+- Triggers
+  - Updates to PRs on the Cloudflare fork.
+  - PRs in the merge queue.
+- Actions
+  - Runs the E2E tests for the Vite plugin.
 
 ## Deploy Pages Previews (deploy-pages-preview.yml)
 
diff --git a/.github/workflows/bonk-pr-review.yml b/.github/workflows/bonk-pr-review.yml
index f8a0fb59914f..59c0c0bba88f 100644
--- a/.github/workflows/bonk-pr-review.yml
+++ b/.github/workflows/bonk-pr-review.yml
@@ -35,7 +35,7 @@ jobs:
           } >> "$GITHUB_OUTPUT"
 
       - name: Run Bonk
-        uses: ask-bonk/ask-bonk/github@main
+        uses: ask-bonk/ask-bonk/github@24832587005550860c8ad13fd96519e731ca632a # main
         env:
           CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CF_AI_GATEWAY_ACCOUNT_ID }}
           CLOUDFLARE_GATEWAY_ID: ${{ secrets.CF_AI_GATEWAY_NAME }}
diff --git a/.github/workflows/bonk.yml b/.github/workflows/bonk.yml
index ece433281c2a..92f73c6a4ce4 100644
--- a/.github/workflows/bonk.yml
+++ b/.github/workflows/bonk.yml
@@ -27,7 +27,7 @@ jobs:
           fetch-depth: 1
 
       - name: Run Bonk
-        uses: ask-bonk/ask-bonk/github@main
+        uses: ask-bonk/ask-bonk/github@24832587005550860c8ad13fd96519e731ca632a # main
         env:
           CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CF_AI_GATEWAY_ACCOUNT_ID }}
           CLOUDFLARE_GATEWAY_ID: ${{ secrets.CF_AI_GATEWAY_NAME }}
diff --git a/.github/workflows/e2e-vite.yml b/.github/workflows/e2e-vite.yml
new file mode 100644
index 000000000000..99aaa5ec0f41
--- /dev/null
+++ b/.github/workflows/e2e-vite.yml
@@ -0,0 +1,73 @@
+name: Vite Plugin E2E
+
+on:
+  merge_group:
+  pull_request:
+
+permissions:
+  contents: read
+
+jobs:
+  e2e-vite-plugin-test:
+    name: ${{ format('Vite Plugin E2E ({0})', matrix.description) }}
+    concurrency:
+      group: ${{ github.workflow }}-${{ github.ref }}-${{ matrix.os }}
+      cancel-in-progress: true
+    timeout-minutes: 60
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - os: macos-latest
+            description: macOS
+          - os: windows-latest
+            description: Windows
+          - os: ubuntu-latest
+            description: Linux
+    runs-on: ${{ matrix.os }}
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3
+        id: changes
+        with:
+          filters: |
+            everything_but_markdown:
+              - '!**/*.md'
+
+      - name: Install Dependencies
+        if: steps.changes.outputs.everything_but_markdown == 'true'
+        uses: ./.github/actions/install-dependencies
+        with:
+          turbo-api: ${{ secrets.TURBO_API }}
+          turbo-team: ${{ secrets.TURBO_TEAM }}
+          turbo-token: ${{ secrets.TURBO_TOKEN }}
+          turbo-signature: ${{ secrets.TURBO_REMOTE_CACHE_SIGNATURE_KEY }}
+
+      - name: Bump package versions
+        if: steps.changes.outputs.everything_but_markdown == 'true'
+        run: node .github/changeset-version.js
+        env:
+          GITHUB_TOKEN: ${{ github.token }}
+
+      - name: Run Vite plugin E2E tests
+        if: steps.changes.outputs.everything_but_markdown == 'true'
+        run: pnpm test:e2e -F @cloudflare/vite-plugin --log-order=stream
+        timeout-minutes: 20
+        env:
+          NODE_DEBUG: "vite-plugin:test"
+          # The remote-binding tests need to connect to Cloudflare
+          CLOUDFLARE_API_TOKEN: ${{ secrets.TEST_CLOUDFLARE_API_TOKEN }}
+          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.TEST_CLOUDFLARE_ACCOUNT_ID }}
+          NODE_OPTIONS: "--max_old_space_size=8192"
+          CI_OS: ${{ matrix.os }}
+
+      - name: Upload turbo logs
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: turbo-runs-${{ matrix.os }}
+          path: .turbo/runs
diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e-wrangler.yml
similarity index 56%
rename from .github/workflows/e2e.yml
rename to .github/workflows/e2e-wrangler.yml
index 547cbc12017e..33112e79061a 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e-wrangler.yml
@@ -1,4 +1,4 @@
-name: E2E
+name: Wrangler E2E
 
 on:
   merge_group:
@@ -11,7 +11,7 @@ jobs:
   e2e-wrangler-test:
     name: ${{ format('Wrangler E2E ({0})', matrix.description) }}
     concurrency:
-      group: ${{ github.workflow }}-${{ github.ref }}-${{ matrix.os }}-wrangler
+      group: ${{ github.workflow }}-${{ github.ref }}-${{ matrix.os }}
       cancel-in-progress: true
     timeout-minutes: 60
     strategy:
@@ -82,67 +82,3 @@ jobs:
         with:
           name: turbo-runs-${{ matrix.os }}
           path: .turbo/runs
-
-  e2e-vite-plugin-test:
-    name: ${{ format('Vite Plugin E2E ({0})', matrix.description) }}
-    concurrency:
-      group: ${{ github.workflow }}-${{ github.ref }}-${{ matrix.os }}-vite
-      cancel-in-progress: true
-    timeout-minutes: 60
-    strategy:
-      fail-fast: false
-      matrix:
-        include:
-          - os: macos-latest
-            description: macOS
-          - os: windows-latest
-            description: Windows
-          - os: ubuntu-latest
-            description: Linux
-    runs-on: ${{ matrix.os }}
-    steps:
-      - name: Checkout Repo
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3
-        id: changes
-        with:
-          filters: |
-            everything_but_markdown:
-              - '!**/*.md'
-
-      - name: Install Dependencies
-        if: steps.changes.outputs.everything_but_markdown == 'true'
-        uses: ./.github/actions/install-dependencies
-        with:
-          turbo-api: ${{ secrets.TURBO_API }}
-          turbo-team: ${{ secrets.TURBO_TEAM }}
-          turbo-token: ${{ secrets.TURBO_TOKEN }}
-          turbo-signature: ${{ secrets.TURBO_REMOTE_CACHE_SIGNATURE_KEY }}
-
-      - name: Bump package versions
-        if: steps.changes.outputs.everything_but_markdown == 'true'
-        run: node .github/changeset-version.js
-        env:
-          GITHUB_TOKEN: ${{ github.token }}
-
-      - name: Run Vite plugin E2E tests
-        if: steps.changes.outputs.everything_but_markdown == 'true'
-        run: pnpm test:e2e -F @cloudflare/vite-plugin --log-order=stream
-        timeout-minutes: 20
-        env:
-          NODE_DEBUG: "vite-plugin:test"
-          # The remote-binding tests need to connect to Cloudflare
-          CLOUDFLARE_API_TOKEN: ${{ secrets.TEST_CLOUDFLARE_API_TOKEN }}
-          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.TEST_CLOUDFLARE_ACCOUNT_ID }}
-          NODE_OPTIONS: "--max_old_space_size=8192"
-          CI_OS: ${{ matrix.os }}
-
-      - name: Upload turbo logs
-        if: always()
-        uses: actions/upload-artifact@v4
-        with:
-          name: turbo-runs-${{ matrix.os }}
-          path: .turbo/runs
diff --git a/.prettierrc b/.prettierrc
index cc051c14b0bd..7b5461baa175 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -6,7 +6,8 @@
 	"trailingComma": "es5",
 	"plugins": [
 		"@ianvs/prettier-plugin-sort-imports",
-		"prettier-plugin-packagejson"
+		"prettier-plugin-packagejson",
+		"prettier-plugin-tailwindcss"
 	],
 	"overrides": [
 		{
@@ -53,6 +54,13 @@
 			"options": {
 				"proseWrap": "never"
 			}
+		},
+		{
+			"files": "packages/local-explorer-ui/**/*.{js,jsx,ts,tsx}",
+			"options": {
+				"tailwindStylesheet": "./packages/local-explorer-ui/src/styles/tailwind.css",
+				"tailwindFunctions": ["cn"]
+			}
 		}
 	]
 }
diff --git a/package.json b/package.json
index 31cae1ca62a4..c57cbd99f5c9 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
 	"author": "wrangler@cloudflare.com",
 	"scripts": {
 		"build": "dotenv -- turbo build",
-		"check": "pnpm check:fixtures && pnpm check:private-packages && pnpm check:package-deps && pnpm check:deployments && node lint-turbo.mjs && dotenv -- turbo check:lint check:type check:format type:tests",
+		"check": "pnpm check:fixtures && pnpm check:private-packages && pnpm check:package-deps && pnpm check:deployments && pnpm check:workflows && node lint-turbo.mjs && dotenv -- turbo check:lint check:type check:format type:tests",
 		"check:deployments": "node -r esbuild-register tools/deployments/deploy-non-npm-packages.ts check",
 		"check:fixtures": "node -r esbuild-register tools/deployments/validate-fixtures.ts",
 		"check:format": "prettier . --check --ignore-unknown --cache",
@@ -19,6 +19,7 @@
 		"check:package-deps": "node -r esbuild-register tools/deployments/validate-package-dependencies.ts",
 		"check:private-packages": "node -r esbuild-register tools/deployments/validate-private-packages.ts",
 		"check:type": "dotenv -- turbo check:type type:tests",
+		"check:workflows": "node -r esbuild-register tools/github-workflow-helpers/validate-action-pinning.ts",
 		"dev": "dotenv -- turbo dev",
 		"fix": "dotenv -- turbo check:lint -- --fix && pnpm run prettify",
 		"prettify": "prettier . --write --ignore-unknown --cache",
@@ -45,6 +46,7 @@
 		"jsonc-parser": "catalog:default",
 		"prettier": "^3.2.5",
 		"prettier-plugin-packagejson": "^2.2.18",
+		"prettier-plugin-tailwindcss": "^0.7.2",
 		"tree-kill": "^1.2.2",
 		"turbo": "^2.7.2",
 		"typescript": "catalog:default",
diff --git a/packages/local-explorer-ui/eslint.config.mjs b/packages/local-explorer-ui/eslint.config.mjs
index 5cd441d044d1..95e0a0454d7d 100644
--- a/packages/local-explorer-ui/eslint.config.mjs
+++ b/packages/local-explorer-ui/eslint.config.mjs
@@ -1,4 +1,7 @@
+import { dirname } from "node:path";
+import { fileURLToPath } from "node:url";
 import sharedConfig from "@cloudflare/eslint-config-shared/react";
+import tailwind from "eslint-plugin-tailwindcss";
 import { defineConfig } from "eslint/config";
 
 export default defineConfig([
@@ -6,4 +9,14 @@ export default defineConfig([
 		ignores: ["src/api/generated/**", "src/routeTree.gen.ts"],
 	},
 	sharedConfig,
+	...tailwind.configs["flat/recommended"],
+	{
+		settings: {
+			tailwindcss: {
+				callees: ["cn"],
+				config:
+					dirname(fileURLToPath(import.meta.url)) + "/src/styles/tailwind.css",
+			},
+		},
+	},
 ]);
diff --git a/packages/local-explorer-ui/package.json b/packages/local-explorer-ui/package.json
index c17e145d182f..3dbb098284d9 100644
--- a/packages/local-explorer-ui/package.json
+++ b/packages/local-explorer-ui/package.json
@@ -51,6 +51,7 @@
 		"@types/react-dom": "^19.2.0",
 		"@vitejs/plugin-react": "^4.4.1",
 		"concurrently": "^9.0.0",
+		"eslint-plugin-tailwindcss": "^4.0.0-beta.0",
 		"typescript": "catalog:default",
 		"vite": "catalog:default",
 		"vite-plugin-svgr": "^4.3.0",
diff --git a/packages/local-explorer-ui/src/components/AddKVForm.tsx b/packages/local-explorer-ui/src/components/AddKVForm.tsx
index f42555ffc86e..d001158d0349 100644
--- a/packages/local-explorer-ui/src/components/AddKVForm.tsx
+++ b/packages/local-explorer-ui/src/components/AddKVForm.tsx
@@ -54,17 +54,17 @@ export function AddKVForm({ onAdd, clearSignal = 0 }: AddKVFormProps) {
 
 	return (
 		<form
-			className="flex flex-col lg:flex-row gap-2 mb-4 items-start"
+			className="mb-4 flex flex-col items-start gap-2 lg:flex-row"
 			onSubmit={handleSubmit}
 		>
-			<div className="flex flex-col w-full lg:w-2xs shrink-0">
+			<div className="flex w-full shrink-0 flex-col lg:w-2xs">
 				<label className="sr-only" htmlFor="add-key">
 					Key
 				</label>
 				<input
 					id="add-key"
 					className={cn(
-						"w-full font-mono bg-bg text-text placeholder:text-text! py-2 px-3 text-sm border border-border rounded-md focus:outline-none focus:border-primary focus:shadow-focus-primary disabled:bg-bg-secondary disabled:text-text-secondary",
+						"w-full rounded-md border border-border bg-bg px-3 py-2 font-mono text-sm text-text placeholder:text-text! focus:border-primary focus:shadow-focus-primary focus:outline-none disabled:bg-bg-secondary disabled:text-text-secondary",
 						{
 							"border-danger focus:shadow-focus-danger": keyError,
 						}
@@ -75,16 +75,16 @@ export function AddKVForm({ onAdd, clearSignal = 0 }: AddKVFormProps) {
 					disabled={saving}
 				/>
 				{keyError && (
-					<span className="text-danger text-xs mt-1">{keyError}</span>
+					<span className="mt-1 text-xs text-danger">{keyError}</span>
 				)}
 			</div>
-			<div className="flex flex-col flex-1 w-full lg:min-w-2xs">
+			<div className="flex w-full flex-1 flex-col lg:min-w-2xs">
 				<label className="sr-only" htmlFor="add-value">
 					Value
 				</label>
 				<textarea
 					id="add-value"
-					className="w-full font-mono bg-bg text-text placeholder:text-text! py-2 px-3 text-sm border border-border rounded-md focus:outline-none focus:border-primary focus:shadow-focus-primary disabled:bg-bg-secondary disabled:text-text-secondary max-h-2xs resize-none overflow-y-auto lg:[field-sizing:content]"
+					className="max-h-32 w-full resize-none overflow-y-auto rounded-md border border-border bg-bg px-3 py-2 font-mono text-sm text-text placeholder:text-text! focus:border-primary focus:shadow-focus-primary focus:outline-none disabled:bg-bg-secondary disabled:text-text-secondary lg:field-sizing-content"
 					placeholder="Value"
 					value={value}
 					onChange={(e) => setValue(e.target.value)}
@@ -93,7 +93,7 @@ export function AddKVForm({ onAdd, clearSignal = 0 }: AddKVFormProps) {
 			</div>
 			<Button
 				type="submit"
-				className="shrink-0 w-full lg:w-auto inline-flex items-center justify-center py-2 px-4 text-sm font-medium border-none rounded-md cursor-pointer transition-[background-color,color,transform] active:translate-y-px bg-primary text-white hover:bg-primary-hover focus:outline-none focus:border-primary focus:shadow-focus-primary data-[disabled]:bg-primary/50 data-[disabled]:text-white/70 data-[disabled]:cursor-not-allowed data-[disabled]:active:translate-y-0"
+				className="inline-flex w-full shrink-0 cursor-pointer items-center justify-center rounded-md border-none bg-primary px-4 py-2 text-sm font-medium text-white transition-[background-color,color,transform] hover:bg-primary-hover focus:border-primary focus:shadow-focus-primary focus:outline-none active:translate-y-px data-disabled:cursor-not-allowed data-disabled:bg-primary/50 data-disabled:text-white/70 data-disabled:active:translate-y-0 lg:w-auto"
 				disabled={saving || isKeyInvalid}
 				focusableWhenDisabled
 			>
diff --git a/packages/local-explorer-ui/src/components/Breadcrumbs.tsx b/packages/local-explorer-ui/src/components/Breadcrumbs.tsx
index 3100c0eb3308..47183bde4740 100644
--- a/packages/local-explorer-ui/src/components/Breadcrumbs.tsx
+++ b/packages/local-explorer-ui/src/components/Breadcrumbs.tsx
@@ -15,7 +15,7 @@ export function Breadcrumbs({
 	title,
 }: BreadcrumbsProps): JSX.Element {
 	return (
-		<div className="flex items-center gap-2 py-4 px-6 min-h-16.75 box-border bg-bg-secondary border-b border-border text-sm shrink-0">
+		<div className="box-border flex min-h-16.75 shrink-0 items-center gap-2 border-b border-border bg-bg-secondary px-6 py-4 text-sm">
 			<span className="flex items-center gap-1.5">
 				<Icon />
 				{title}
@@ -23,7 +23,7 @@ export function Breadcrumbs({
 
 			{items.map((item, index) => (
 				<Fragment key={index}>
-					<CaretRightIcon className="w-4 h-4" />
+					<CaretRightIcon className="h-4 w-4" />
 					{item}
 				</Fragment>
 			))}
diff --git a/packages/local-explorer-ui/src/components/CopyButton.tsx b/packages/local-explorer-ui/src/components/CopyButton.tsx
index 3bc73df2df10..c0e4a4c1f67d 100644
--- a/packages/local-explorer-ui/src/components/CopyButton.tsx
+++ b/packages/local-explorer-ui/src/components/CopyButton.tsx
@@ -19,9 +19,9 @@ export function CopyButton({ text }: CopyButtonProps) {
 	return (
 		<Button
 			className={cn(
-				"flex items-center justify-center w-6 h-6 p-0 border-none rounded bg-transparent text-text-secondary cursor-pointer opacity-0 transition-[opacity,background-color,color] shrink-0 hover:bg-border hover:text-text group-hover/cell:opacity-100",
+				"flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded border-none bg-transparent p-0 text-text-secondary opacity-0 transition-[opacity,background-color,color] group-hover/cell:opacity-100 hover:bg-border hover:text-text",
 				{
-					"opacity-100 text-success": copied,
+					"text-success opacity-100": copied,
 				}
 			)}
 			onClick={handleCopy}
diff --git a/packages/local-explorer-ui/src/components/KVTable.tsx b/packages/local-explorer-ui/src/components/KVTable.tsx
index 68c618615164..1d530a106aba 100644
--- a/packages/local-explorer-ui/src/components/KVTable.tsx
+++ b/packages/local-explorer-ui/src/components/KVTable.tsx
@@ -39,16 +39,16 @@ function ActionMenu({ onEdit, onDelete }: ActionMenuProps) {
 	return (
 		<Menu.Root>
 			<Menu.Trigger
-				className="flex items-center justify-center w-7 h-7 border-none rounded-md bg-transparent text-text-secondary cursor-pointer transition-[background-color,color] hover:bg-border hover:text-text"
+				className="flex h-7 w-7 cursor-pointer items-center justify-center rounded-md border-none bg-transparent text-text-secondary transition-[background-color,color] hover:bg-border hover:text-text"
 				aria-label="Actions"
 			>
 				<DotsThreeIcon size={16} weight="bold" />
 			</Menu.Trigger>
 			<Menu.Portal>
 				<Menu.Positioner sideOffset={4} align="end">
-					<Menu.Popup className="min-w-24 bg-bg border border-border rounded-lg shadow-[0_4px_12px_rgba(0,0,0,0.15)] z-[100] overflow-hidden transition-[opacity,transform] duration-150 data-[starting-style]:opacity-0 data-[starting-style]:-translate-y-1 data-[ending-style]:opacity-0 data-[ending-style]:-translate-y-1">
+					<Menu.Popup className="z-[100] min-w-24 overflow-hidden rounded-lg border border-border bg-bg shadow-[0_4px_12px_rgba(0,0,0,0.15)] transition-[opacity,transform] duration-150 data-[ending-style]:-translate-y-1 data-[ending-style]:opacity-0 data-[starting-style]:-translate-y-1 data-[starting-style]:opacity-0">
 						<Menu.Item
-							className="inline-flex items-center gap-1 w-full py-2 px-3 border-none bg-transparent text-left text-sm text-text cursor-pointer transition-colors hover:bg-bg-secondary dark:hover:bg-bg-tertiary data-[highlighted]:bg-bg-secondary dark:data-[highlighted]:bg-bg-tertiary"
+							className="inline-flex w-full cursor-pointer items-center gap-1 border-none bg-transparent px-3 py-2 text-left text-sm text-text transition-colors hover:bg-bg-secondary data-[highlighted]:bg-bg-secondary dark:hover:bg-bg-tertiary dark:data-[highlighted]:bg-bg-tertiary"
 							onClick={onEdit}
 						>
 							<PencilIcon />
@@ -56,7 +56,7 @@ function ActionMenu({ onEdit, onDelete }: ActionMenuProps) {
 						</Menu.Item>
 						<Menu.Separator className="h-px bg-border" />
 						<Menu.Item
-							className="inline-flex items-center gap-1 w-full py-2 px-3 border-none bg-transparent text-left text-sm text-danger cursor-pointer transition-colors hover:bg-danger/8 data-[highlighted]:bg-danger/8"
+							className="inline-flex w-full cursor-pointer items-center gap-1 border-none bg-transparent px-3 py-2 text-left text-sm text-danger transition-colors hover:bg-danger/8 data-[highlighted]:bg-danger/8"
 							onClick={onDelete}
 						>
 							<TrashIcon />
@@ -142,16 +142,16 @@ export function KVTable({ entries, onSave, onDelete }: KVTableProps) {
 	const isKeyInvalid = editData ? !!validateKey(editData.key) : false;
 
 	return (
-		<table className="w-full border-separate border-spacing-0 bg-bg border border-border rounded-lg">
+		<table className="w-full border-separate border-spacing-0 rounded-lg border border-border bg-bg">
 			<thead>
 				<tr>
-					<th className="py-2.5 px-3 text-left bg-bg font-semibold text-xs uppercase tracking-wide text-text-secondary border-b border-border first:rounded-tl-[7px]">
+					<th className="border-b border-border bg-bg px-3 py-2.5 text-left text-xs font-semibold tracking-wide text-text-secondary uppercase first:rounded-tl-[7px]">
 						Key
 					</th>
-					<th className="py-2.5 px-3 text-left bg-bg font-semibold text-xs uppercase tracking-wide text-text-secondary border-b border-border">
+					<th className="border-b border-border bg-bg px-3 py-2.5 text-left text-xs font-semibold tracking-wide text-text-secondary uppercase">
 						Value
 					</th>
-					<th className="py-2.5 px-3 text-left bg-bg font-semibold text-xs uppercase tracking-wide text-text-secondary border-b border-border w-12 last:rounded-tr-[7px]"></th>
+					<th className="w-12 border-b border-border bg-bg px-3 py-2.5 text-left text-xs font-semibold tracking-wide text-text-secondary uppercase last:rounded-tr-[7px]"></th>
 				</tr>
 			</thead>
 			<tbody>
@@ -162,7 +162,7 @@ export function KVTable({ entries, onSave, onDelete }: KVTableProps) {
 						<tr key={entry.key.name} className="group hover:bg-bg-tertiary">
 							<td
 								className={cn(
-									"py-2 px-3 text-left align-top group/cell",
+									"group/cell px-3 py-2 text-left align-top",
 									isLast
 										? "border-b-0 first:rounded-bl-[7px]"
 										: "border-b border-border"
@@ -179,7 +179,7 @@ export function KVTable({ entries, onSave, onDelete }: KVTableProps) {
 										<input
 											id={`edit-key-${entry.key.name}`}
 											className={cn(
-												"w-full font-mono bg-bg text-text min-h-8 py-1.5 px-2 text-[13px] border border-primary rounded focus:outline-none focus:shadow-focus-primary disabled:bg-bg-secondary disabled:text-text-secondary",
+												"min-h-8 w-full rounded border border-primary bg-bg px-2 py-1.5 font-mono text-[13px] text-text focus:shadow-focus-primary focus:outline-none disabled:bg-bg-secondary disabled:text-text-secondary",
 												{
 													"border-danger focus:shadow-focus-danger":
 														editData.keyError,
@@ -192,14 +192,14 @@ export function KVTable({ entries, onSave, onDelete }: KVTableProps) {
 											autoFocus
 										/>
 										{editData.keyError && (
-											<span className="text-danger text-xs mt-1">
+											<span className="mt-1 text-xs text-danger">
 												{editData.keyError}
 											</span>
 										)}
 									</div>
 								) : (
 									<div className="group/cell flex items-center gap-1.5">
-										<code className="text-primary font-medium">
+										<code className="font-medium text-primary">
 											{entry.key.name}
 										</code>
 										<CopyButton text={entry.key.name} />
@@ -208,7 +208,7 @@ export function KVTable({ entries, onSave, onDelete }: KVTableProps) {
 							</td>
 							<td
 								className={cn(
-									"py-2 px-3 text-left max-w-[400px] font-mono text-[13px] group/cell",
+									"group/cell max-w-[400px] px-3 py-2 text-left font-mono text-[13px]",
 									isLast ? "border-b-0" : "border-b border-border"
 								)}
 							>
@@ -222,7 +222,7 @@ export function KVTable({ entries, onSave, onDelete }: KVTableProps) {
 										</label>
 										<textarea
 											id={`edit-value-${entry.key.name}`}
-											className="w-full font-mono bg-bg text-text min-h-8 py-1.5 px-2 text-[13px] border border-primary rounded focus:outline-none focus:shadow-focus-primary disabled:bg-bg-secondary disabled:text-text-secondary max-h-[200px] resize-none overflow-y-auto [field-sizing:content]"
+											className="[field-sizing:content] max-h-[200px] min-h-8 w-full resize-none overflow-y-auto rounded border border-primary bg-bg px-2 py-1.5 font-mono text-[13px] text-text focus:shadow-focus-primary focus:outline-none disabled:bg-bg-secondary disabled:text-text-secondary"
 											value={editData.value}
 											onChange={(e) =>
 												setEditData({ ...editData, value: e.target.value })
@@ -232,14 +232,14 @@ export function KVTable({ entries, onSave, onDelete }: KVTableProps) {
 										/>
 										<div className="flex justify-end gap-1.5">
 											<Button
-												className="inline-flex items-center justify-center py-1 px-2.5 text-xs font-medium border-none rounded-md cursor-pointer transition-[background-color,transform] active:translate-y-px bg-bg-tertiary text-text border border-border hover:bg-border data-[disabled]:opacity-60 data-[disabled]:cursor-not-allowed data-[disabled]:active:translate-y-0"
+												className="inline-flex cursor-pointer items-center justify-center rounded-md border border-none border-border bg-bg-tertiary px-2.5 py-1 text-xs font-medium text-text transition-[background-color,transform] hover:bg-border active:translate-y-px data-[disabled]:cursor-not-allowed data-[disabled]:opacity-60 data-[disabled]:active:translate-y-0"
 												onClick={handleCancel}
 												disabled={saving}
 											>
 												Cancel
 											</Button>
 											<Button
-												className="inline-flex items-center justify-center py-1 px-2.5 text-xs font-medium border-none rounded-md cursor-pointer transition-[background-color,transform] active:translate-y-px bg-primary text-white hover:bg-primary-hover data-[disabled]:text-white/70 data-[disabled]:cursor-not-allowed data-[disabled]:active:translate-y-0"
+												className="inline-flex cursor-pointer items-center justify-center rounded-md border-none bg-primary px-2.5 py-1 text-xs font-medium text-white transition-[background-color,transform] hover:bg-primary-hover active:translate-y-px data-[disabled]:cursor-not-allowed data-[disabled]:text-white/70 data-[disabled]:active:translate-y-0"
 												onClick={handleSave}
 												disabled={saving || isKeyInvalid}
 												focusableWhenDisabled
@@ -249,14 +249,11 @@ export function KVTable({ entries, onSave, onDelete }: KVTableProps) {
 										</div>
 									</div>
 								) : (
-									<div className="flex items-center gap-1.5 min-w-0">
+									<div className="flex min-w-0 items-center gap-1.5">
 										<span
-											className={cn(
-												"overflow-hidden text-ellipsis whitespace-nowrap min-w-0",
-												{
-													"text-text-secondary": !entry.value,
-												}
-											)}
+											className={cn("min-w-0 truncate", {
+												"text-text-secondary": !entry.value,
+											})}
 										>
 											{formatValue(entry.value)}
 										</span>
@@ -266,7 +263,7 @@ export function KVTable({ entries, onSave, onDelete }: KVTableProps) {
 							</td>
 							<td
 								className={cn(
-									"py-2 px-3 whitespace-nowrap text-right",
+									"px-3 py-2 text-right whitespace-nowrap",
 									isLast
 										? "border-b-0 last:rounded-br-[7px]"
 										: "border-b border-border"
diff --git a/packages/local-explorer-ui/src/components/SearchForm.tsx b/packages/local-explorer-ui/src/components/SearchForm.tsx
index 2f22e80c0de2..6003042ab69c 100644
--- a/packages/local-explorer-ui/src/components/SearchForm.tsx
+++ b/packages/local-explorer-ui/src/components/SearchForm.tsx
@@ -15,13 +15,13 @@ export function SearchForm({ onSearch, disabled = false }: SearchFormProps) {
 	};
 
 	return (
-		<form className="flex gap-2 items-center" onSubmit={handleSubmit}>
+		<form className="flex items-center gap-2" onSubmit={handleSubmit}>
 			<label className="sr-only" htmlFor="search-prefix">
 				Search keys by prefix
 			</label>
 			<input
 				id="search-prefix"
-				className="flex-1 max-w-[400px] font-mono bg-bg text-text py-2 px-3 text-sm border border-border rounded-md focus:outline-none focus:border-primary focus:shadow-[0_0_0_3px_rgba(255,72,1,0.15)] disabled:bg-bg-secondary disabled:text-text-secondary"
+				className="max-w-100 flex-1 rounded-md border border-border bg-bg px-3 py-2 font-mono text-sm text-text focus:border-primary focus:shadow-focus-primary focus:outline-none disabled:bg-bg-secondary disabled:text-text-secondary"
 				placeholder="Search keys by prefix..."
 				value={prefix}
 				onChange={(e) => setPrefix(e.target.value)}
@@ -29,7 +29,7 @@ export function SearchForm({ onSearch, disabled = false }: SearchFormProps) {
 			/>
 			<Button
 				type="submit"
-				className="btn shrink-0 inline-flex items-center justify-center py-2 px-4 text-sm font-medium rounded-md cursor-pointer transition-[background-color,transform] active:translate-y-px bg-bg-tertiary text-text border border-border hover:bg-border"
+				className="inline-flex shrink-0 cursor-pointer items-center justify-center rounded-md border border-border bg-bg-tertiary px-4 py-2 text-sm font-medium text-text transition-[background-color,transform] hover:bg-border active:translate-y-px"
 				disabled={disabled}
 				focusableWhenDisabled
 			>
diff --git a/packages/local-explorer-ui/src/components/Sidebar.tsx b/packages/local-explorer-ui/src/components/Sidebar.tsx
index 28677af4b5a5..92ffcf599499 100644
--- a/packages/local-explorer-ui/src/components/Sidebar.tsx
+++ b/packages/local-explorer-ui/src/components/Sidebar.tsx
@@ -38,19 +38,19 @@ function SidebarItemGroup({
 }: SidebarItemGroupProps): JSX.Element {
 	return (
 		<Collapsible.Root defaultOpen className="py-0.5">
-			<Collapsible.Trigger className="group flex items-center gap-2 w-[calc(100%-0.25rem)] ml-1 p-3 bg-transparent font-semibold text-xs text-text cursor-pointer transition-colors rounded-l-md hover:bg-surface-tertiary">
+			<Collapsible.Trigger className="group ml-1 flex w-[calc(100%-0.25rem)] cursor-pointer items-center gap-2 rounded-l-md bg-transparent p-3 text-xs font-semibold text-text transition-colors hover:bg-surface-tertiary">
 				<CaretRightIcon
-					className="w-3.5 h-3.5 text-muted transition-transform duration-200 group-data-panel-open:rotate-90"
+					className="h-3.5 w-3.5 text-muted transition-transform duration-200 group-data-panel-open:rotate-90"
 					weight="bold"
 				/>
-				<Icon className="w-4 h-4 text-muted" />
+				<Icon className="h-4 w-4 text-muted" />
 				{title}
 			</Collapsible.Trigger>
 
-			<Collapsible.Panel className="overflow-hidden transition-[height,opacity] duration-200 ease-out data-starting-style:h-0 data-starting-style:opacity-0 data-ending-style:h-0 data-ending-style:opacity-0">
-				<ul className="list-none ml-3 pl-3 space-y-0.5 border-l border-border">
+			<Collapsible.Panel className="overflow-hidden transition-[height,opacity] duration-200 ease-out data-ending-style:h-0 data-ending-style:opacity-0 data-starting-style:h-0 data-starting-style:opacity-0">
+				<ul className="ml-3 list-none space-y-0.5 border-l border-border pl-3">
 					{error ? (
-						<li className="py-1.5 px-2 text-danger text-sm">{error}</li>
+						<li className="px-2 py-1.5 text-sm text-danger">{error}</li>
 					) : null}
 
 					{!error
@@ -58,9 +58,9 @@ function SidebarItemGroup({
 								<li key={item.id}>
 									<Link
 										className={cn(
-											"block py-2.5 px-2 text-text text-sm no-underline rounded-l-md cursor-pointer transition-colors hover:bg-surface-tertiary",
+											"block cursor-pointer rounded-l-md px-2 py-2.5 text-sm text-text no-underline transition-colors hover:bg-surface-tertiary",
 											{
-												"bg-primary/10 text-primary font-medium": item.isActive,
+												"bg-primary/10 font-medium text-primary": item.isActive,
 											}
 										)}
 										params={item.link.params}
@@ -74,7 +74,7 @@ function SidebarItemGroup({
 						: null}
 
 					{!error && items.length === 0 && (
-						<li className="py-1.5 px-2 text-text-secondary text-sm italic">
+						<li className="px-2 py-1.5 text-sm text-text-secondary italic">
 							{emptyLabel}
 						</li>
 					)}
@@ -104,17 +104,17 @@ export function Sidebar({
 	kvNamespaces,
 }: SidebarProps) {
 	return (
-		<aside className="w-sidebar bg-bg-secondary border-r border-border flex flex-col">
+		<aside className="flex w-sidebar flex-col border-r border-border bg-bg-secondary">
 			<a
-				className="flex items-center gap-2.5 p-4 min-h-16.75 box-border"
+				className="box-border flex min-h-16.75 items-center gap-2.5 p-4"
 				href="/"
 			>
 				<CloudflareLogo className="shrink-0 text-primary" />
 				<div className="flex flex-col gap-px">
-					<span className="text-sm font-semibold text-text leading-tight">
+					<span className="text-sm leading-tight font-semibold text-text">
 						Local Explorer
 					</span>
-					<span className="text-[10px] font-medium text-text-secondary uppercase tracking-wide">
+					<span className="text-[10px] font-medium tracking-wide text-text-secondary uppercase">
 						Cloudflare DevTools
 					</span>
 				</div>
diff --git a/packages/local-explorer-ui/src/components/studio/Code/Block.tsx b/packages/local-explorer-ui/src/components/studio/Code/Block.tsx
index bd3890c4b1c3..be674120967c 100644
--- a/packages/local-explorer-ui/src/components/studio/Code/Block.tsx
+++ b/packages/local-explorer-ui/src/components/studio/Code/Block.tsx
@@ -11,7 +11,7 @@ export function CodeBlock({
 }: CodeBlockProps): JSX.Element {
 	return (
 		<pre
-			className="rounded bg-surface-secondary p-3 text-sm font-mono overflow-x-auto overflow-y-auto"
+			className="overflow-auto rounded bg-surface-secondary p-3 font-mono text-sm"
 			data-language={language}
 			style={maxHeight ? { maxHeight } : undefined}
 		>
diff --git a/packages/local-explorer-ui/src/components/studio/Explain/SQLiteExplainTab.tsx b/packages/local-explorer-ui/src/components/studio/Explain/SQLiteExplainTab.tsx
index 9ca6e0a77b33..5e5af49d39bd 100644
--- a/packages/local-explorer-ui/src/components/studio/Explain/SQLiteExplainTab.tsx
+++ b/packages/local-explorer-ui/src/components/studio/Explain/SQLiteExplainTab.tsx
@@ -48,7 +48,7 @@ export function StudioSQLiteExplainTab({
 	tree = tree.filter((node) => node.parent === 0);
 
 	return (
-		<div className="w-full h-full grow p-8 overflow-auto">
+		<div className="h-full w-full grow overflow-auto p-8">
 			<div className="font-mono text-sm">
 				<ExplainNodes data={tree} />
 			</div>
@@ -68,9 +68,9 @@ function ExplainNodes({ data }: ExplainNodesProps): JSX.Element {
 
 				return (
 					<Fragment key={row.id}>
-						<div className="h-8 flex gap-2 items-center">
+						<div className="flex h-8 items-center gap-2">
 							<div
-								className={cn("inline-flex border rounded-full", {
+								className={cn("inline-flex rounded-full border", {
 									"bg-green-500": performance === "fast",
 									"bg-red-500": performance === "slow",
 									"bg-yellow-500": performance === "medium",
@@ -80,7 +80,7 @@ function ExplainNodes({ data }: ExplainNodesProps): JSX.Element {
 							/>
 							<div>{label}</div>
 						</div>
-						<div className="pl-4 border-l">
+						<div className="border-l pl-4">
 							<ExplainNodes data={row.children} />
 						</div>
 					</Fragment>
@@ -116,7 +116,7 @@ function describeExplainNode(d: string): {
 			label: (
 				<div className="flex items-center">
 					<strong>SCAN </strong>
-					<span className="border border-border p-1 mx-2 rounded flex items-center gap-2">
+					<span className="mx-2 flex items-center gap-2 rounded border border-border p-1">
 						<TableIcon />
 						{d.substring("SCAN ".length)}
 					</span>
@@ -149,7 +149,7 @@ function describeExplainNode(d: string): {
 							</div>
 						}
 					>
-						<strong className="underline cursor-pointer">CORRELATED</strong>
+						<strong className="cursor-pointer underline">CORRELATED</strong>
 					</Tooltip>
 					<span>{d.substring("CORRELATED".length)}</span>
 				</div>
@@ -196,7 +196,7 @@ function describeExplainNode(d: string): {
 						</div>
 					}
 				>
-					<strong className="underline cursor-pointer">{d}</strong>
+					<strong className="cursor-pointer underline">{d}</strong>
 				</Tooltip>
 			),
 		};
diff --git a/packages/local-explorer-ui/src/components/studio/Modal/CommitConfirmation.tsx b/packages/local-explorer-ui/src/components/studio/Modal/CommitConfirmation.tsx
index afc5325517e4..4d21e6b8f8de 100644
--- a/packages/local-explorer-ui/src/components/studio/Modal/CommitConfirmation.tsx
+++ b/packages/local-explorer-ui/src/components/studio/Modal/CommitConfirmation.tsx
@@ -44,7 +44,7 @@ export function StudioCommitConfirmation({
 			}}
 		>
 			<Dialog className="p-6">
-				<div className="flex items-start justify-between gap-4 mb-4">
+				<div className="mb-4 flex items-start justify-between gap-4">
 					{/* @ts-expect-error - Type mismatch due to pnpm monorepo @types/react version conflict */}
 					<Dialog.Title className="text-2xl font-semibold">
 						Review and Confirm Changes
diff --git a/packages/local-explorer-ui/src/components/studio/Modal/DeleteConfirmation.tsx b/packages/local-explorer-ui/src/components/studio/Modal/DeleteConfirmation.tsx
index 09464ecfe069..07f3ee54e357 100644
--- a/packages/local-explorer-ui/src/components/studio/Modal/DeleteConfirmation.tsx
+++ b/packages/local-explorer-ui/src/components/studio/Modal/DeleteConfirmation.tsx
@@ -59,7 +59,7 @@ export const StudioDeleteConfirmationModal = ({
 			open={isOpen}
 		>
 			<Dialog className="p-6">
-				<div className="flex items-start justify-between gap-4 mb-4">
+				<div className="mb-4 flex items-start justify-between gap-4">
 					{/* @ts-expect-error - Type mismatch due to pnpm monorepo @types/react version conflict */}
 					<Dialog.Title className="text-lg font-semibold">{title}</Dialog.Title>
 				</div>
@@ -93,7 +93,7 @@ export const StudioDeleteConfirmationModal = ({
 						)}
 					</div>
 
-					<div className="flex gap-2 justify-end mt-4">
+					<div className="mt-4 flex justify-end gap-2">
 						<Button variant="secondary" onClick={closeModal}>
 							Cancel
 						</Button>
diff --git a/packages/local-explorer-ui/src/components/studio/Modal/DropTableConfirmation.tsx b/packages/local-explorer-ui/src/components/studio/Modal/DropTableConfirmation.tsx
index 465a562af9ea..c9c2b4789517 100644
--- a/packages/local-explorer-ui/src/components/studio/Modal/DropTableConfirmation.tsx
+++ b/packages/local-explorer-ui/src/components/studio/Modal/DropTableConfirmation.tsx
@@ -51,7 +51,7 @@ export function DropTableConfirmationModal({
 			open={isOpen}
 		>
 			<Dialog className="p-6">
-				<div className="flex items-start justify-between gap-4 mb-4">
+				<div className="mb-4 flex items-start justify-between gap-4">
 					{/* @ts-expect-error - Type mismatch due to pnpm monorepo @types/react version conflict */}
 					<Dialog.Title className="text-lg font-semibold">
 						Delete table?
@@ -86,7 +86,7 @@ export function DropTableConfirmationModal({
 						)}
 					</div>
 
-					<div className="flex gap-2 justify-end mt-4">
+					<div className="mt-4 flex justify-end gap-2">
 						<Button onClick={closeModal} variant="secondary">
 							Cancel
 						</Button>
diff --git a/packages/local-explorer-ui/src/components/studio/Modal/Export/OptionsEditor.tsx b/packages/local-explorer-ui/src/components/studio/Modal/Export/OptionsEditor.tsx
index c72012f03e0e..09edad15e87c 100644
--- a/packages/local-explorer-ui/src/components/studio/Modal/Export/OptionsEditor.tsx
+++ b/packages/local-explorer-ui/src/components/studio/Modal/Export/OptionsEditor.tsx
@@ -51,7 +51,7 @@ export function StudioExportOptionEditor({
 				<SettingLabel>Filename</SettingLabel>
 				<SettingOption>
 					<input
-						className="w-full rounded-md border border-border px-3 py-2 text-sm font-mono"
+						className="w-full rounded-md border border-border px-3 py-2 font-mono text-sm"
 						onChange={(e): void => {
 							onChange((prev) => ({
 								...prev,
@@ -82,7 +82,7 @@ function SQLExportEditor({
 				<SettingLabel>Batch Size</SettingLabel>
 				<SettingOption>
 					<input
-						className="w-full rounded-md border border-border px-3 py-2 text-sm font-mono text-right"
+						className="w-full rounded-md border border-border px-3 py-2 text-right font-mono text-sm"
 						onChange={(e): void => {
 							const batchSize = Number(e.target.value);
 							if (isNaN(batchSize) || batchSize < 1) {
@@ -111,7 +111,7 @@ function SQLExportEditor({
 				</SettingLabel>
 				<SettingOption>
 					<input
-						className="w-full rounded-md border border-border px-3 py-2 text-sm font-mono text-right"
+						className="w-full rounded-md border border-border px-3 py-2 text-right font-mono text-sm"
 						onChange={(e): void => {
 							const maxStatementLength = Number(e.target.value);
 							if (isNaN(maxStatementLength) || maxStatementLength < 1) {
@@ -135,7 +135,7 @@ function SQLExportEditor({
 				<SettingLabel>Table Name</SettingLabel>
 				<SettingOption>
 					<input
-						className="w-full rounded-md border border-border px-3 py-2 text-sm font-mono"
+						className="w-full rounded-md border border-border px-3 py-2 font-mono text-sm"
 						onChange={(e): void => {
 							onChange((prev) => ({
 								...prev,
@@ -247,7 +247,7 @@ function SettingItem({ children, lastItem }: SettingItemProps): JSX.Element {
 	return (
 		<div
 			className={cn(
-				"min-h-14 items-center px-4 gap-4 flex justify-between",
+				"flex min-h-14 items-center justify-between gap-4 px-4",
 				lastItem ? "" : "border-b border-border"
 			)}
 		>
@@ -257,7 +257,7 @@ function SettingItem({ children, lastItem }: SettingItemProps): JSX.Element {
 }
 
 function SettingLabel({ children }: PropsWithChildren): JSX.Element {
-	return <div className="font-medium py-2">{children}</div>;
+	return <div className="py-2 font-medium">{children}</div>;
 }
 
 function SettingOption({ children }: PropsWithChildren): JSX.Element {
@@ -277,7 +277,7 @@ function SettingOptionDropdown({
 }: SettingOptionDropdownProps): JSX.Element {
 	return (
 		<select
-			className="rounded-md border border-border bg-transparent px-3 py-2 text-sm cursor-pointer"
+			className="cursor-pointer rounded-md border border-border bg-transparent px-3 py-2 text-sm"
 			onChange={(e: ChangeEvent<HTMLSelectElement>): void => {
 				onChange(e.target.value);
 			}}
diff --git a/packages/local-explorer-ui/src/components/studio/Modal/Export/index.tsx b/packages/local-explorer-ui/src/components/studio/Modal/Export/index.tsx
index 524d5799abf1..8e68989f25c9 100644
--- a/packages/local-explorer-ui/src/components/studio/Modal/Export/index.tsx
+++ b/packages/local-explorer-ui/src/components/studio/Modal/Export/index.tsx
@@ -73,18 +73,18 @@ export function StudioExportModal({
 			open={isOpen}
 		>
 			<Dialog className="p-6" size="lg">
-				<div className="flex items-start justify-between gap-4 mb-4">
+				<div className="mb-4 flex items-start justify-between gap-4">
 					{/* @ts-expect-error - Type mismatch due to pnpm monorepo @types/react version conflict */}
 					<Dialog.Title className="text-lg font-semibold">Export</Dialog.Title>
 				</div>
 
 				{/* @ts-expect-error - Type mismatch due to pnpm monorepo @types/react version conflict */}
-				<Dialog.Description className="text-kumo-subtle text-sm">
+				<Dialog.Description className="text-sm text-kumo-subtle">
 					Choose how you want to export your query result:
 				</Dialog.Description>
 
-				<div className="flex flex-col gap-4 mt-4">
-					<div className="text-base border border-border rounded-lg shadow-xs">
+				<div className="mt-4 flex flex-col gap-4">
+					<div className="rounded-lg border border-border text-base shadow-xs">
 						<StudioExportOptionEditor value={option} onChange={setOption} />
 					</div>
 
@@ -95,7 +95,7 @@ export function StudioExportModal({
 					)}
 				</div>
 
-				<div className="flex gap-2 justify-end mt-4">
+				<div className="mt-4 flex justify-end gap-2">
 					<Button variant="secondary" onClick={closeModal}>
 						Cancel
 					</Button>
diff --git a/packages/local-explorer-ui/src/components/studio/QueryResult/Stats.tsx b/packages/local-explorer-ui/src/components/studio/QueryResult/Stats.tsx
index 96c3a1a06c1a..edfc7c59ce5f 100644
--- a/packages/local-explorer-ui/src/components/studio/QueryResult/Stats.tsx
+++ b/packages/local-explorer-ui/src/components/studio/QueryResult/Stats.tsx
@@ -28,7 +28,7 @@ export function StudioQueryResultStats({
 
 		if (stats.queryDurationMs !== null) {
 			content.push(
-				<div className="px-2 flex gap-1 items-center" key="query-duration">
+				<div className="flex items-center gap-1 px-2" key="query-duration">
 					<span className="font-semibold">Query Time</span>
 					<Tooltip content="Time taken by the server to execute the SQL query (excludes network delay and request overhead).">
 						<QuestionIcon />
@@ -41,7 +41,7 @@ export function StudioQueryResultStats({
 
 		if (stats.requestDurationMs) {
 			content.push(
-				<div className="px-2 flex gap-1 items-center" key="request-duration">
+				<div className="flex items-center gap-1 px-2" key="request-duration">
 					<span className="font-semibold">Response Time</span>
 					<Tooltip content="Total time from request sent to response received (includes query time, network latency, and server processing).">
 						<QuestionIcon />
@@ -81,5 +81,5 @@ export function StudioQueryResultStats({
 		return content;
 	}, [stats]);
 
-	return <div className="text-xs p-2 flex">{statsComponents}</div>;
+	return <div className="flex p-2 text-xs">{statsComponents}</div>;
 }
diff --git a/packages/local-explorer-ui/src/components/studio/QueryResult/Summary.tsx b/packages/local-explorer-ui/src/components/studio/QueryResult/Summary.tsx
index ae0c96a77bfd..7216cd2f1e31 100644
--- a/packages/local-explorer-ui/src/components/studio/QueryResult/Summary.tsx
+++ b/packages/local-explorer-ui/src/components/studio/QueryResult/Summary.tsx
@@ -29,7 +29,7 @@ export function StudioQueryResultSummary({
 	const isEnded = total === value || !!progress.error;
 
 	return (
-		<div className="p-4 w-full h-full overflow-hidden overflow-y-auto">
+		<div className="h-full w-full overflow-hidden overflow-y-auto p-4">
 			<div>
 				{isEnded ? (
 					<strong>
@@ -42,7 +42,7 @@ export function StudioQueryResultSummary({
 				)}
 			</div>
 
-			<div className="flex flex-col gap-4 mt-4">
+			<div className="mt-4 flex flex-col gap-4">
 				{last3.map((detail) => (
 					<div key={detail.order}>
 						{!detail.end && (
@@ -60,7 +60,7 @@ export function StudioQueryResultSummary({
 						<CodeBlock language="sql" code={detail.sql} />
 
 						{!!detail.error && (
-							<div className="mt-2 mb-2 ml-2 text-red-500 font-mono text-xs">
+							<div className="mt-2 mb-2 ml-2 font-mono text-xs text-red-500">
 								{detail.error}
 							</div>
 						)}
diff --git a/packages/local-explorer-ui/src/components/studio/QueryResult/Tab.tsx b/packages/local-explorer-ui/src/components/studio/QueryResult/Tab.tsx
index ab69b6558ec8..5ca3bd736ed4 100644
--- a/packages/local-explorer-ui/src/components/studio/QueryResult/Tab.tsx
+++ b/packages/local-explorer-ui/src/components/studio/QueryResult/Tab.tsx
@@ -35,7 +35,7 @@ export function StudioQueryResultTab({
 	}, [result.result.headers]);
 
 	return (
-		<div className="w-full h-full flex flex-col">
+		<div className="flex h-full w-full flex-col">
 			<StudioExportModal
 				closeModal={() => setIsExportModalOpen(false)}
 				isOpen={isExportModalOpen}
@@ -46,8 +46,8 @@ export function StudioQueryResultTab({
 				<StudioResultTable state={state} arrangeHeaderIndex={headerIndexList} />
 			</div>
 
-			<div className="shrink-0 h-11 flex items-center border-t border-border">
-				<div className="grow text-base px-4">
+			<div className="flex h-11 shrink-0 items-center border-t border-border">
+				<div className="grow px-4 text-base">
 					<Button
 						aria-label="Export query results"
 						icon={ExportIcon}
diff --git a/packages/local-explorer-ui/src/components/studio/Table/ActionsDropdown.tsx b/packages/local-explorer-ui/src/components/studio/Table/ActionsDropdown.tsx
index 8511447eb139..fa3a01372f5b 100644
--- a/packages/local-explorer-ui/src/components/studio/Table/ActionsDropdown.tsx
+++ b/packages/local-explorer-ui/src/components/studio/Table/ActionsDropdown.tsx
@@ -69,7 +69,7 @@ export function StudioTableActionsDropdown({
 
 				<DropdownMenu.Content>
 					<DropdownMenu.Item
-						className="space-x-2 cursor-pointer"
+						className="cursor-pointer space-x-2"
 						icon={TextTIcon}
 						onClick={handleCopyTableName}
 					>
@@ -77,7 +77,7 @@ export function StudioTableActionsDropdown({
 					</DropdownMenu.Item>
 
 					<DropdownMenu.Item
-						className="space-x-2 cursor-pointer"
+						className="cursor-pointer space-x-2"
 						icon={TableIcon}
 						onClick={handleCopyTableSchema}
 					>
diff --git a/packages/local-explorer-ui/src/components/studio/Table/BaseTable.tsx b/packages/local-explorer-ui/src/components/studio/Table/BaseTable.tsx
index c57db2b899ae..f67ca5b0536a 100644
--- a/packages/local-explorer-ui/src/components/studio/Table/BaseTable.tsx
+++ b/packages/local-explorer-ui/src/components/studio/Table/BaseTable.tsx
@@ -248,8 +248,8 @@ function renderCellList<HeaderMetadata = unknown>({
 		if (state.getSelectedRowIndex().includes(absoluteRowIndex)) {
 			if (state.isFullSelectionRow(absoluteRowIndex)) {
 				textClass = cn(
-					"flex items-center justify-end h-full pr-2 font-mono",
-					"bg-surface-secondary text-text font-bold"
+					"flex h-full items-center justify-end pr-2 font-mono",
+					"bg-surface-secondary font-bold text-text"
 				);
 				tdClass =
 					"sticky left-0 bg-surface-secondary dark:bg-blue-800 border-r border-b border-border";
diff --git a/packages/local-explorer-ui/src/components/studio/Table/Cell.tsx b/packages/local-explorer-ui/src/components/studio/Table/Cell.tsx
index 70ed5dcb9f53..ee50f8ba1f22 100644
--- a/packages/local-explorer-ui/src/components/studio/Table/Cell.tsx
+++ b/packages/local-explorer-ui/src/components/studio/Table/Cell.tsx
@@ -68,7 +68,7 @@ export function StudioTableCell<HeaderMetadata = unknown>({
 	return (
 		<td
 			className={cn(
-				"overflow-hidden border-r border-b box-border hover:bg-accent border-border",
+				"box-border overflow-hidden border-r border-b border-border hover:bg-accent",
 				isSelected && "border-neutral-900 dark:border-neutral-100",
 				isBorderBottom &&
 					"border-b border-b-neutral-900 dark:border-b-neutral-100",
diff --git a/packages/local-explorer-ui/src/components/studio/Table/HeaderList.tsx b/packages/local-explorer-ui/src/components/studio/Table/HeaderList.tsx
index 756eec436d96..9a4f22686b93 100644
--- a/packages/local-explorer-ui/src/components/studio/Table/HeaderList.tsx
+++ b/packages/local-explorer-ui/src/components/studio/Table/HeaderList.tsx
@@ -23,7 +23,7 @@ export function StudioTableHeaderList<HeaderMetadata = unknown>({
 		<thead className="contents">
 			<tr className="contents">
 				{headers.length > 0 && (
-					<th className="sticky top-0 left-0 z-30 border-r border-b bg-bg-secondary border-border"></th>
+					<th className="sticky top-0 left-0 z-30 border-r border-b border-border bg-bg-secondary"></th>
 				)}
 
 				{headers.map((header, idx) => {
@@ -65,7 +65,7 @@ function StudioTableHeader<HeaderMetadata = unknown>({
 		<th
 			className={cn(
 				{ "z-30": sticky },
-				"bg-background border-r border-b overflow-hidden sticky top-0 h-8.75 leading-8.75 flex text-left z-10 p-0 border-border"
+				"sticky top-0 z-10 flex h-8.75 overflow-hidden border-r border-b border-border bg-background p-0 text-left leading-8.75"
 			)}
 			key={header.name}
 			onContextMenu={onContextMenu}
diff --git a/packages/local-explorer-ui/src/components/studio/Table/Result/DisplayCell.tsx b/packages/local-explorer-ui/src/components/studio/Table/Result/DisplayCell.tsx
index d70ee9a84822..1939f746355f 100644
--- a/packages/local-explorer-ui/src/components/studio/Table/Result/DisplayCell.tsx
+++ b/packages/local-explorer-ui/src/components/studio/Table/Result/DisplayCell.tsx
@@ -69,7 +69,7 @@ function BlobCellValue({ value, vector }: BlobCellValueProps): JSX.Element {
 
 	return (
 		<div className="flex w-full">
-			<span className="flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-orange-600 dark:text-orange-400">
+			<span className="flex-1 truncate text-orange-600 dark:text-orange-400">
 				{prettifyBytes(bytes.subarray(0, 64))}
 			</span>
 			<div className="ml-2 flex-col items-center justify-center">
@@ -88,7 +88,6 @@ export const StudioTableDisplayCell = forwardRef<
 	HTMLDivElement,
 	TableCellProps
 >(({ align, header, onDoubleClick, value }, ref) => {
-	const className = cn("h-[35px] leading-[35px] font-mono flex", "pl-2 pr-2");
 	const isAlignRight = align === "right";
 
 	const textBaseStyle = cn(
@@ -116,14 +115,9 @@ export const StudioTableDisplayCell = forwardRef<
 			const firstLine = hasLineBreak ? value.slice(0, newlineIndex) : value;
 
 			return (
-				<span
-					className={cn(
-						"flex-1 overflow-hidden text-ellipsis whitespace-nowrap",
-						"text-text"
-					)}
-				>
+				<span className={cn("flex-1 truncate", "text-text")}>
 					{firstLine}
-					{hasLineBreak && <span className="ml-1 text-muted font-sans">⏎</span>}
+					{hasLineBreak && <span className="ml-1 font-sans text-muted">⏎</span>}
 				</span>
 			);
 		}
@@ -132,7 +126,7 @@ export const StudioTableDisplayCell = forwardRef<
 			return (
 				<span
 					className={cn(
-						"flex-1 overflow-hidden text-ellipsis whitespace-nowrap",
+						"flex-1 truncate",
 						"block grow text-right text-blue-700 dark:text-blue-300"
 					)}
 				>
@@ -161,7 +155,11 @@ export const StudioTableDisplayCell = forwardRef<
 	}, [value, textBaseStyle, header]);
 
 	return (
-		<div ref={ref} className={className} onDoubleClick={onDoubleClick}>
+		<div
+			ref={ref}
+			className={cn("flex h-8.75 font-mono leading-8.75", "pr-2 pl-2")}
+			onDoubleClick={onDoubleClick}
+		>
 			<div className="flex grow overflow-hidden">{content}</div>
 		</div>
 	);
diff --git a/packages/local-explorer-ui/src/components/studio/Table/Result/EditableCell.tsx b/packages/local-explorer-ui/src/components/studio/Table/Result/EditableCell.tsx
index c928d67c4341..dfd83eec20b1 100644
--- a/packages/local-explorer-ui/src/components/studio/Table/Result/EditableCell.tsx
+++ b/packages/local-explorer-ui/src/components/studio/Table/Result/EditableCell.tsx
@@ -94,7 +94,7 @@ function InputCellEditor({
 			{popover &&
 				createPortal(
 					<div
-						className="bg-surface border border-border rounded fixed shadow flex flex-col"
+						className="fixed flex flex-col rounded border border-border bg-surface shadow"
 						ref={refs.setFloating}
 						style={{
 							...(floatingStyles as React.CSSProperties),
@@ -116,7 +116,7 @@ function InputCellEditor({
 				)}
 			{popover ? (
 				// eslint-disable-next-line react-hooks/refs -- `refs.setReference` is a callback ref from @floating-ui/react, not a .current access
-				<div ref={refs.setReference} className="w-full h-full">
+				<div ref={refs.setReference} className="h-full w-full">
 					{popoverPlaceholder}
 				</div>
 			) : (
@@ -127,8 +127,8 @@ function InputCellEditor({
 					autoFocus
 					className={
 						align === "right"
-							? "h-full w-full border-0 bg-inherit pr-2 pl-2 text-right text-xs font-mono! outline-hidden"
-							: "h-full w-full border-0 bg-inherit pr-2 pl-2 text-xs font-mono! outline-hidden"
+							? "h-full w-full border-0 bg-inherit pr-2 pl-2 text-right font-mono! text-xs outline-hidden"
+							: "h-full w-full border-0 bg-inherit pr-2 pl-2 font-mono! text-xs outline-hidden"
 					}
 					onBlur={() => {
 						applyChange(value, shouldExit.current);
@@ -205,7 +205,7 @@ function PopoverEditor({
 					ref={editorRef}
 				/>
 			</div>
-			<div className="p-2 border-t border-border flex justify-end">
+			<div className="flex justify-end border-t border-border p-2">
 				<Button
 					onClick={() => {
 						onApply(editorRef.current?.getValue());
diff --git a/packages/local-explorer-ui/src/components/studio/Table/Result/index.tsx b/packages/local-explorer-ui/src/components/studio/Table/Result/index.tsx
index 7da86ef31348..d218789b1fd8 100644
--- a/packages/local-explorer-ui/src/components/studio/Table/Result/index.tsx
+++ b/packages/local-explorer-ui/src/components/studio/Table/Result/index.tsx
@@ -143,7 +143,7 @@ export function StudioResultTable({
 							className="text-sm"
 							onClick={() => navigator.clipboard.writeText(header.name || "")}
 						>
-							<CopyIcon className="size-4 mr-1" />
+							<CopyIcon className="mr-1 size-4" />
 							<span>Copy column name</span>
 						</DropdownMenu.Item>
 
@@ -154,14 +154,14 @@ export function StudioResultTable({
 									className="text-sm"
 									onClick={() => onOrderByColumnChange(header.name, "ASC")}
 								>
-									<SortAscendingIcon className="size-4 mr-1" />
+									<SortAscendingIcon className="mr-1 size-4" />
 									<span>Sort A → Z</span>
 								</DropdownMenu.Item>
 								<DropdownMenu.Item
 									className="text-sm"
 									onClick={() => onOrderByColumnChange(header.name, "DESC")}
 								>
-									<SortDescendingIcon className="size-4 mr-1" />
+									<SortDescendingIcon className="mr-1 size-4" />
 									<span>Sort Z → A</span>
 								</DropdownMenu.Item>
 							</>
@@ -170,7 +170,7 @@ export function StudioResultTable({
 						{hasColumnInfo && (
 							<>
 								<DropdownMenu.Separator />
-								<span className="text-xs font-medium px-3 py-1.5 text-muted">
+								<span className="px-3 py-1.5 text-xs font-medium text-muted">
 									Constraints and Indexes
 								</span>
 							</>
@@ -304,7 +304,7 @@ function HeaderDropdownMenu({
 				render={(props) => (
 					<div
 						{...props}
-						className="flex items-center px-2 py-1 font-mono cursor-pointer w-full gap-1 bg-surface h-9"
+						className="flex h-9 w-full cursor-pointer items-center gap-1 bg-surface px-2 py-1 font-mono"
 						onContextMenu={(e): void => {
 							e.preventDefault();
 							e.stopPropagation();
@@ -318,7 +318,7 @@ function HeaderDropdownMenu({
 							header.display.iconElement
 						)}
 
-						<div className="grow line-clamp-1">{header.display.text}</div>
+						<div className="line-clamp-1 grow">{header.display.text}</div>
 
 						{orderIconPart}
 					</div>
@@ -341,11 +341,11 @@ function DropdownMenuColumnInfo({
 	title,
 }: DropdownMenuColumnInfoProps) {
 	return (
-		<DropdownMenu.Item className="text-sm py-1.5 px-3 flex items-center gap-2">
+		<DropdownMenu.Item className="flex items-center gap-2 px-3 py-1.5 text-sm">
 			{icon}
 			<div className="flex flex-col gap-0.5">
 				<div className="font-medium">{title}</div>
-				<div className="text-muted text-sm">{description}</div>
+				<div className="text-sm text-muted">{description}</div>
 			</div>
 		</DropdownMenu.Item>
 	);
diff --git a/packages/local-explorer-ui/src/components/studio/Table/SchemaEditor/Column.tsx b/packages/local-explorer-ui/src/components/studio/Table/SchemaEditor/Column.tsx
index d14cfea05cc1..933347e9961e 100644
--- a/packages/local-explorer-ui/src/components/studio/Table/SchemaEditor/Column.tsx
+++ b/packages/local-explorer-ui/src/components/studio/Table/SchemaEditor/Column.tsx
@@ -180,13 +180,13 @@ export function StudioColumnSchemaEditor({
 			}
 			key={column.key}
 		>
-			<td className="p-2 border border-border text-center h-10">
+			<td className="h-10 border border-border p-2 text-center">
 				{columnIndex + 1}
 			</td>
 
 			<td
 				className={cn(
-					"p-2 border border-border text-center",
+					"border border-border p-2 text-center",
 					!readOnlyExistingColumns && "cursor-pointer"
 				)}
 				onClick={!readOnlyExistingColumns ? onPrimaryKeyClicked : undefined}
@@ -200,13 +200,13 @@ export function StudioColumnSchemaEditor({
 				)}
 			</td>
 
-			<td className="p-2 border border-border font-mono">
+			<td className="border border-border p-2 font-mono">
 				{editableColumn.name}
 			</td>
 
-			<td className="p-2 border border-border">{editableColumn.type}</td>
+			<td className="border border-border p-2">{editableColumn.type}</td>
 
-			<td className="p-2 border border-border text-center">
+			<td className="border border-border p-2 text-center">
 				<Checkbox
 					aria-label="Is nullable"
 					checked={!editableColumn.constraint?.notNull}
@@ -217,18 +217,18 @@ export function StudioColumnSchemaEditor({
 				/>
 			</td>
 
-			<td className="p-2 border border-border font-mono">
+			<td className="border border-border p-2 font-mono">
 				{JSON.stringify(editableColumn.constraint?.defaultValue)}
 			</td>
 
-			<td className="p-2 border border-border">
+			<td className="border border-border p-2">
 				<ColumnConstraintDescription
 					column={editableColumn}
 					constraints={value.constraints}
 				/>
 			</td>
 
-			<td className="p-2 border border-border text-center">
+			<td className="border border-border p-2 text-center">
 				<DropdownMenu>
 					<DropdownMenu.Trigger
 						render={
@@ -345,8 +345,8 @@ function ColumnConstraintBadge({
 	name,
 }: ColumnConstraintBadgeProps): JSX.Element {
 	return (
-		<div className="inline-flex items-center gap-1 border border-border rounded overflow-hidden">
-			<div className="bg-accent p-1 border-r border-border flex items-center">
+		<div className="inline-flex items-center gap-1 overflow-hidden rounded border border-border">
+			<div className="flex items-center border-r border-border bg-accent p-1">
 				{IconComponent && <IconComponent className="mr-1" />} {name}
 			</div>
 
@@ -406,7 +406,7 @@ export function StudioColumnEditorModal({
 			open={isOpen}
 		>
 			<Dialog className="p-6">
-				<div className="flex items-start justify-between gap-4 mb-4">
+				<div className="mb-4 flex items-start justify-between gap-4">
 					{/* @ts-expect-error - Type mismatch due to pnpm monorepo @types/react version conflict */}
 					<Dialog.Title className="text-lg font-semibold">
 						{defaultValue ? "Edit Column" : "Add Column"}
@@ -420,7 +420,7 @@ export function StudioColumnEditorModal({
 						: "Enter the column details below."}
 				</Dialog.Description>
 
-				<div className="flex flex-col gap-4 mt-4">
+				<div className="mt-4 flex flex-col gap-4">
 					<div>
 						<Label
 							tooltip={
@@ -433,7 +433,7 @@ export function StudioColumnEditorModal({
 						</Label>
 						<input
 							autoFocus
-							className="w-full rounded-md border border-border px-3 py-2 text-sm bg-transparent"
+							className="w-full rounded-md border border-border bg-transparent px-3 py-2 text-sm"
 							onChange={(e): void => {
 								setValue(
 									produce(value, (draft) => {
@@ -449,7 +449,7 @@ export function StudioColumnEditorModal({
 					<div className="w-full">
 						<Label>Data type</Label>
 						<select
-							className="w-full rounded-md border border-border px-3 py-2 text-sm bg-transparent"
+							className="w-full rounded-md border border-border bg-transparent px-3 py-2 text-sm"
 							onChange={(e): void => {
 								const newType = e.target.value;
 								if (!newType) {
diff --git a/packages/local-explorer-ui/src/components/studio/Table/SchemaEditor/ConstraintListEditor.tsx b/packages/local-explorer-ui/src/components/studio/Table/SchemaEditor/ConstraintListEditor.tsx
index 4b824744decc..274567007e0f 100644
--- a/packages/local-explorer-ui/src/components/studio/Table/SchemaEditor/ConstraintListEditor.tsx
+++ b/packages/local-explorer-ui/src/components/studio/Table/SchemaEditor/ConstraintListEditor.tsx
@@ -28,15 +28,15 @@ export function StudioConstraintListEditor({
 
 	return (
 		<>
-			<div className="text-base font-bold my-4">Constraints</div>
+			<div className="my-4 text-base font-bold">Constraints</div>
 			<table className="w-full border-collapse">
 				<thead>
 					<tr>
-						<th className="p-2 border border-border h-10 w-12">#</th>
-						<th className="p-2 border border-border text-left h-10 w-32">
+						<th className="h-10 w-12 border border-border p-2">#</th>
+						<th className="h-10 w-32 border border-border p-2 text-left">
 							Type
 						</th>
-						<th className="p-2 border border-border text-left"></th>
+						<th className="border border-border p-2 text-left"></th>
 					</tr>
 				</thead>
 
@@ -69,19 +69,19 @@ export function StudioConstraintListEditor({
 							return (
 								<tr key={constriantIndex}>
 									<td
-										className="p-2 border border-border text-center"
+										className="border border-border p-2 text-center"
 										style={{ height: 40 }}
 									>
 										{constriantIndex + 1}
 									</td>
-									<td className="p-2 border border-border">{constraintType}</td>
-									<td className="p-2 border border-border">
+									<td className="border border-border p-2">{constraintType}</td>
+									<td className="border border-border p-2">
 										{constraint.foreignKey && (
 											<div className="flex gap-2">
 												{(constraint.foreignKey.columns ?? []).map(
 													(column, columnIndex) => (
 														<div
-															className="p-1 px-2 rounded bg-accent inline-block font-mono border border-border select-none gap-2 items-center"
+															className="inline-block items-center gap-2 rounded border border-border bg-accent p-1 px-2 font-mono select-none"
 															key={columnIndex}
 														>
 															{column} <ArrowRightIcon />{" "}
@@ -183,7 +183,7 @@ function SortableColumnItem({ id }: SortableColumnItemProps): JSX.Element {
 
 	return (
 		<div
-			className="p-1 px-2 rounded bg-accent inline-block font-mono border border-border cursor-pointer select-none hover:border-active"
+			className="inline-block cursor-pointer rounded border border-border bg-accent p-1 px-2 font-mono select-none hover:border-active-line"
 			ref={setNodeRef}
 			style={{
 				transform: CSS.Transform.toString(transform),
diff --git a/packages/local-explorer-ui/src/components/studio/Table/SchemaEditor/index.tsx b/packages/local-explorer-ui/src/components/studio/Table/SchemaEditor/index.tsx
index fbff3bba24a2..8e0b1a5aeec9 100644
--- a/packages/local-explorer-ui/src/components/studio/Table/SchemaEditor/index.tsx
+++ b/packages/local-explorer-ui/src/components/studio/Table/SchemaEditor/index.tsx
@@ -141,11 +141,11 @@ export function StudioTableSchemaEditor({
 			resizerClassName="!bg-resizer border-transparent"
 			split="horizontal"
 		>
-			<div className="flex flex-col w-full h-full overflow-hidden text-xs bg-surface">
-				<div className="flex gap-2 p-4 py-2 border-b border-border shadow-xs">
+			<div className="flex h-full w-full flex-col overflow-hidden bg-surface text-xs">
+				<div className="flex gap-2 border-b border-border p-4 py-2 shadow-xs">
 					<input
 						autoFocus
-						className="w-62.5 h-9 rounded-lg border border-border px-3 text-base bg-transparent"
+						className="h-9 w-62.5 rounded-lg border border-border bg-transparent px-3 text-base"
 						onChange={(e) => handleNameChange(e.target.value)}
 						placeholder="Table name"
 						value={value.name.new ?? ""}
@@ -167,31 +167,31 @@ export function StudioTableSchemaEditor({
 					</div>
 				</div>
 
-				<div className="overflow-auto grow relative">
+				<div className="relative grow overflow-auto">
 					<div className="p-4">
-						<table className="border-collapse w-full">
+						<table className="w-full border-collapse">
 							<thead className="sticky top-0">
 								<tr>
-									<th className="w-10 p-2 border border-border text-center">
+									<th className="w-10 border border-border p-2 text-center">
 										#
 									</th>
-									<th className="w-10 p-2 border border-border text-center">
+									<th className="w-10 border border-border p-2 text-center">
 										<KeyIcon />
 									</th>
-									<th className="w-50 p-2 border border-border text-left">
+									<th className="w-50 border border-border p-2 text-left">
 										Column Name
 									</th>
-									<th className="w-25 p-2 border border-border text-left">
+									<th className="w-25 border border-border p-2 text-left">
 										Type
 									</th>
-									<th className="w-12.5 p-2 border border-border text-left">
+									<th className="w-12.5 border border-border p-2 text-left">
 										NULL
 									</th>
-									<th className="w-31.25 p-2 border border-border text-left">
+									<th className="w-31.25 border border-border p-2 text-left">
 										Default Value
 									</th>
-									<th className="p-2 border border-border"></th>
-									<th className="w-10 p-2 border border-border"></th>
+									<th className="border border-border p-2"></th>
+									<th className="w-10 border border-border p-2"></th>
 								</tr>
 							</thead>
 							<tbody>
@@ -219,7 +219,7 @@ export function StudioTableSchemaEditor({
 					</div>
 				</div>
 			</div>
-			<div className="overflow-hidden grow bg-surface">
+			<div className="grow overflow-hidden bg-surface">
 				<StudioSQLEditor
 					className="h-full w-full grow"
 					readOnly
@@ -241,17 +241,17 @@ function IndexList({ indexList }: IndexListProps): JSX.Element | null {
 
 	return (
 		<>
-			<div className="text-base font-bold my-4">Indexes</div>
+			<div className="my-4 text-base font-bold">Indexes</div>
 
-			<table className="border-collapse w-full">
+			<table className="w-full border-collapse">
 				<thead>
 					<tr>
-						<th className="w-10 p-2 border border-border">#</th>
-						<th className="w-50 p-2 border border-border text-left">
+						<th className="w-10 border border-border p-2">#</th>
+						<th className="w-50 border border-border p-2 text-left">
 							Index Name
 						</th>
-						<th className="w-25 p-2 border border-border text-left">Type</th>
-						<th className="p-2 border border-border text-left"></th>
+						<th className="w-25 border border-border p-2 text-left">Type</th>
+						<th className="border border-border p-2 text-left"></th>
 					</tr>
 				</thead>
 
@@ -259,10 +259,10 @@ function IndexList({ indexList }: IndexListProps): JSX.Element | null {
 					{indexList.map((index, indexIdx) => {
 						return (
 							<tr key={index.name}>
-								<td className="p-2 border border-border">{indexIdx + 1}</td>
-								<td className="p-2 border border-border">{index.name}</td>
-								<td className="p-2 border border-border">{index.type}</td>
-								<td className="p-2 border border-border font-mono">
+								<td className="border border-border p-2">{indexIdx + 1}</td>
+								<td className="border border-border p-2">{index.name}</td>
+								<td className="border border-border p-2">{index.type}</td>
+								<td className="border border-border p-2 font-mono">
 									{index.columns.join(", ")}
 								</td>
 							</tr>
diff --git a/packages/local-explorer-ui/src/components/studio/Table/State/Helpers.tsx b/packages/local-explorer-ui/src/components/studio/Table/State/Helpers.tsx
index e706d90d44bd..c9ad6b229ce6 100644
--- a/packages/local-explorer-ui/src/components/studio/Table/State/Helpers.tsx
+++ b/packages/local-explorer-ui/src/components/studio/Table/State/Helpers.tsx
@@ -336,30 +336,30 @@ function pipeColumnIcon(
 		}
 
 		const iconStack = (
-			<div className="shrink-0 mr-1 flex items-center gap-1">
+			<div className="mr-1 flex shrink-0 items-center gap-1">
 				{hasPrimaryKey && (
 					<KeyIcon
 						weight="duotone"
-						className="text-green-600 dark:text-green-400 size-3.5"
+						className="size-3.5 text-green-600 dark:text-green-400"
 					/>
 				)}
 				{hasUniqueIndex && (
 					<KeyIcon
 						weight="duotone"
-						className="text-orange-600 dark:text-orange-400 size-3.5"
+						className="size-3.5 text-orange-600 dark:text-orange-400"
 					/>
 				)}
 				{hasKeyIndex && (
 					<KeyIcon
 						weight="duotone"
-						className="text-blue-600 dark:text-blue-400 size-3.5"
+						className="size-3.5 text-blue-600 dark:text-blue-400"
 					/>
 				)}
 				{header.metadata.referenceTo && (
-					<FlowArrowIcon className="text-blue-600 dark:text-blue-400 shrink-0 size-3.5" />
+					<FlowArrowIcon className="size-3.5 shrink-0 text-blue-600 dark:text-blue-400" />
 				)}
 				{header.metadata.columnSchema?.constraint?.generatedExpression && (
-					<SigmaIcon className="text-purple-600 dark:text-purple-400 shrink-0 size-3.5" />
+					<SigmaIcon className="size-3.5 shrink-0 text-purple-600 dark:text-purple-400" />
 				)}
 			</div>
 		);
diff --git a/packages/local-explorer-ui/src/components/studio/Tabs/Query.tsx b/packages/local-explorer-ui/src/components/studio/Tabs/Query.tsx
index 22e9bc3e2e4b..e3e2db653223 100644
--- a/packages/local-explorer-ui/src/components/studio/Tabs/Query.tsx
+++ b/packages/local-explorer-ui/src/components/studio/Tabs/Query.tsx
@@ -241,12 +241,12 @@ export function StudioQueryTab({ query }: StudioQueryTabProps): JSX.Element {
 			resizerClassName="!bg-resizer border-transparent"
 			split="horizontal"
 		>
-			<div className="w-full flex flex-col bg-surface">
+			<div className="flex w-full flex-col bg-surface">
 				<div className="grow overflow-hidden">
 					<StudioSQLEditor
 						autoCompleteSchema={autoCompelteSchema}
 						autoFocus
-						className="p-2 w-full h-full"
+						className="h-full w-full p-2"
 						defaultValue={query}
 						dialect={driver.dialect}
 						keybinding={keybinding}
@@ -255,13 +255,13 @@ export function StudioQueryTab({ query }: StudioQueryTabProps): JSX.Element {
 						statementHighlight
 					/>
 				</div>
-				<div className="shrink-0 pt-0 pb-2 px-4 flex items-center gap-2">
-					<div className="text-xs grow text-muted">
+				<div className="flex shrink-0 items-center gap-2 px-4 pt-0 pb-2">
+					<div className="grow text-xs text-muted">
 						Ln {lineNumber} Col {columnNumber}
 					</div>
 
 					<Button
-						className="h-8 text-xs hover:bg-border transition"
+						className="h-8 text-xs transition hover:bg-border"
 						onClick={handleFormat}
 						variant="ghost"
 					>
@@ -270,7 +270,7 @@ export function StudioQueryTab({ query }: StudioQueryTabProps): JSX.Element {
 
 					<div className="flex overflow-hidden">
 						<Button
-							className="h-8 text-xs rounded-r-none pr-2! hover:bg-border transition"
+							className="h-8 rounded-r-none pr-2! text-xs transition hover:bg-border"
 							icon={<PlayIcon weight="fill" />}
 							loading={loading}
 							onClick={onRunCurrentClicked}
@@ -283,7 +283,7 @@ export function StudioQueryTab({ query }: StudioQueryTabProps): JSX.Element {
 							<DropdownMenu.Trigger
 								render={
 									<Button
-										className="h-8 text-xs px-2 rounded-r-md rounded-l-none ml-0 hover:bg-border transition"
+										className="ml-0 h-8 rounded-l-none rounded-r-md px-2 text-xs transition hover:bg-border"
 										disabled={loading}
 										variant="primary"
 									>
@@ -320,7 +320,7 @@ export function StudioQueryTab({ query }: StudioQueryTabProps): JSX.Element {
 				</div>
 			</div>
 
-			<div className="w-full h-full bg-surface">
+			<div className="h-full w-full bg-surface">
 				{queryTabs && queryTabs.length > 0 && (
 					<StudioWindowTab
 						key="main-window-tab"
diff --git a/packages/local-explorer-ui/src/components/studio/Tabs/TableExplorer.tsx b/packages/local-explorer-ui/src/components/studio/Tabs/TableExplorer.tsx
index de4732f70afd..67a0030029f6 100644
--- a/packages/local-explorer-ui/src/components/studio/Tabs/TableExplorer.tsx
+++ b/packages/local-explorer-ui/src/components/studio/Tabs/TableExplorer.tsx
@@ -392,8 +392,8 @@ export function StudioTableExplorerTab({
 	);
 
 	return (
-		<div className="w-full h-full flex flex-col bg-surface">
-			<div className="shrink-0 border-b border-border gap-2 p-2 flex items-center">
+		<div className="flex h-full w-full flex-col bg-surface">
+			<div className="flex shrink-0 items-center gap-2 border-b border-border p-2">
 				<Button aria-label="Refresh" onClick={onRefreshClicked} shape="square">
 					<ArrowsCounterClockwiseIcon size={14} />
 				</Button>
@@ -447,7 +447,7 @@ export function StudioTableExplorerTab({
 					</>
 				)}
 			</div>
-			<div className="grow overflow-hidden relative">
+			<div className="relative grow overflow-hidden">
 				{schema && state && !error && (
 					<StudioResultTable
 						arrangeHeaderIndex={headerIndexList}
@@ -458,34 +458,34 @@ export function StudioTableExplorerTab({
 					/>
 				)}
 
-				{error && <div className="p-4 text-red-500 text-base">{error}</div>}
+				{error && <div className="p-4 text-base text-red-500">{error}</div>}
 
 				{loading && (
 					<>
 						<div
-							className="absolute left-0 top-0 bottom-0 right-0 backdrop-blur-md bg-black/30 dark:bg-white/30 z-40"
+							className="absolute top-0 right-0 bottom-0 left-0 z-40 bg-black/30 backdrop-blur-md dark:bg-white/30"
 							style={{ opacity: 0.2 }}
 						/>
-						<div className="flex absolute left-0 top-0 bottom-0 right-0 justify-center items-center z-40">
+						<div className="absolute top-0 right-0 bottom-0 left-0 z-40 flex items-center justify-center">
 							<SpinnerIcon className="animate-spin" size={48} />
 						</div>
 					</>
 				)}
 			</div>
-			<div className="shrink-0 border-t border-border gap-2 p-2 flex items-center">
+			<div className="flex shrink-0 items-center gap-2 border-t border-border p-2">
 				<div className="grow">
 					{queryStats && <StudioQueryResultStats stats={queryStats} />}
 				</div>
 
 				<div>
 					<InputGroup size="base">
-						<div className="flex items-center justify-center px-2 border-r border-border">
+						<div className="flex items-center justify-center border-r border-border px-2">
 							<ListNumbersIcon size={14} />
 						</div>
 
 						<input
 							aria-label="Rows per page"
-							className="text-center bg-transparent text-sm outline-none border border-none rounded-r-lg px-1 w-12.5"
+							className="w-12.5 rounded-r-lg border border-none bg-transparent px-1 text-center text-sm outline-none"
 							onBlur={onLimitBlur}
 							onChange={(e) => setPageLimitInput(e.currentTarget.value)}
 							value={pageLimitInput}
@@ -506,7 +506,7 @@ export function StudioTableExplorerTab({
 
 						<input
 							aria-label="Page offset"
-							className="text-center bg-transparent text-sm outline-none w-12.5"
+							className="w-12.5 bg-transparent text-center text-sm outline-none"
 							onBlur={onOffsetBlur}
 							onChange={(e) => setPageOffsetInput(e.currentTarget.value)}
 							value={pageOffsetInput}
diff --git a/packages/local-explorer-ui/src/components/studio/WhereFilterInput.tsx b/packages/local-explorer-ui/src/components/studio/WhereFilterInput.tsx
index 2ebd229b0078..7a9b5f02cd7f 100644
--- a/packages/local-explorer-ui/src/components/studio/WhereFilterInput.tsx
+++ b/packages/local-explorer-ui/src/components/studio/WhereFilterInput.tsx
@@ -136,7 +136,7 @@ export function StudioWhereFilterInput({
 	}, [loading, currentValue, value, parsingError]);
 
 	return (
-		<div className="border-border bg-surface-secondary border rounded flex items-center">
+		<div className="flex items-center rounded border border-border bg-surface-secondary">
 			<StudioSQLWhereEditor
 				className="w-full p-1"
 				columnNames={columnNameList}
diff --git a/packages/local-explorer-ui/src/components/studio/WindowTab/ContentWrapper.tsx b/packages/local-explorer-ui/src/components/studio/WindowTab/ContentWrapper.tsx
index f90ea8ec545c..557de89d8bfd 100644
--- a/packages/local-explorer-ui/src/components/studio/WindowTab/ContentWrapper.tsx
+++ b/packages/local-explorer-ui/src/components/studio/WindowTab/ContentWrapper.tsx
@@ -70,7 +70,7 @@ export function StudioTabContentWrapper({
 			}}
 		>
 			<div
-				className={cn("absolute bottom-0 top-0 right-0 left-0", {
+				className={cn("absolute top-0 right-0 bottom-0 left-0", {
 					invisible: tab.key !== selectedTabKey,
 				})}
 			>
diff --git a/packages/local-explorer-ui/src/components/studio/WindowTab/ItemRenderer.tsx b/packages/local-explorer-ui/src/components/studio/WindowTab/ItemRenderer.tsx
index 01f4f3b40b53..75f9d90b0772 100644
--- a/packages/local-explorer-ui/src/components/studio/WindowTab/ItemRenderer.tsx
+++ b/packages/local-explorer-ui/src/components/studio/WindowTab/ItemRenderer.tsx
@@ -31,7 +31,7 @@ export function StudioWindowTabItemRenderer({
 	return (
 		<div
 			className={cn(
-				"h-10 min-w-42.5 max-w-75  flex gap-2 relative px-2 border-b border-r border-border items-center text-left text-xs cursor-pointer hover:text-text select-none",
+				"relative flex h-10 max-w-75 min-w-42.5 cursor-pointer items-center gap-2 border-r border-b border-border px-2 text-left text-xs select-none hover:text-text",
 				selected ? "bg-surface" : "bg-surface-secondary text-muted",
 				isTemp && "italic",
 				isDirty && "not-italic"
@@ -41,7 +41,7 @@ export function StudioWindowTabItemRenderer({
 			onMouseEnter={() => setIsHovered(true)}
 			onMouseLeave={() => setIsHovered(false)}
 		>
-			<tab.icon className="w-4 h-4" />
+			<tab.icon className="h-4 w-4" />
 
 			<div className={cn("line-clamp-1 grow")}>{tab.title}</div>
 
diff --git a/packages/local-explorer-ui/src/components/studio/WindowTab/MenuProps.tsx b/packages/local-explorer-ui/src/components/studio/WindowTab/MenuProps.tsx
index 1e732ed9ce1a..1e78e10c1804 100644
--- a/packages/local-explorer-ui/src/components/studio/WindowTab/MenuProps.tsx
+++ b/packages/local-explorer-ui/src/components/studio/WindowTab/MenuProps.tsx
@@ -9,7 +9,7 @@ export function StudioWindowTabMenu({
 }: StudioWindowTabMenuProps): JSX.Element {
 	return (
 		<button
-			className="h-10 sticky right-0 flex items-center gap-2 px-4 py-3 border-b border-border hover:bg-border text-xs text-muted font-semibold tracking-wide cursor-pointer disabled:cursor-not-allowed"
+			className="sticky right-0 flex h-10 cursor-pointer items-center gap-2 border-b border-border px-4 py-3 text-xs font-semibold tracking-wide text-muted hover:bg-border disabled:cursor-not-allowed"
 			onClick={onClick}
 			type="button"
 		>
diff --git a/packages/local-explorer-ui/src/components/studio/WindowTab/index.tsx b/packages/local-explorer-ui/src/components/studio/WindowTab/index.tsx
index f39499a949ad..ef6f8a0128ef 100644
--- a/packages/local-explorer-ui/src/components/studio/WindowTab/index.tsx
+++ b/packages/local-explorer-ui/src/components/studio/WindowTab/index.tsx
@@ -39,8 +39,8 @@ export function StudioWindowTab({
 	);
 
 	return (
-		<div className="w-full h-full flex flex-col">
-			<div className="relative shrink-0 grow-0 overflow-x-auto bg-surface-secondary flex">
+		<div className="flex h-full w-full flex-col">
+			<div className="relative flex shrink-0 grow-0 overflow-x-auto bg-surface-secondary">
 				{tabs.map((tab, tabIndex) => {
 					// Handles tab closure. If the closed tab is the currently active one,
 					// automatically select the nearest remaining tab to preserve continuity.
@@ -94,7 +94,7 @@ export function StudioWindowTab({
 
 				{onNewClicked && <StudioWindowTabMenu onClick={onNewClicked} />}
 
-				<div className="border-border border-b grow h-10" />
+				<div className="h-10 grow border-b border-border" />
 			</div>
 
 			<div className="relative grow">
diff --git a/packages/local-explorer-ui/src/components/studio/index.tsx b/packages/local-explorer-ui/src/components/studio/index.tsx
index eea0cda75119..dc604fef78f3 100644
--- a/packages/local-explorer-ui/src/components/studio/index.tsx
+++ b/packages/local-explorer-ui/src/components/studio/index.tsx
@@ -524,7 +524,7 @@ export const Studio = forwardRef<StudioRef, StudioProps>(function Studio(
 		<ModalProvider>
 			<StudioContextMenuProvider>
 				<StudioContextProvider value={contextValues}>
-					<div className="relative w-full h-full overflow-hidden">
+					<div className="relative h-full w-full overflow-hidden">
 						<StudioWindowTabPane />
 					</div>
 				</StudioContextProvider>
diff --git a/packages/local-explorer-ui/src/routes/__root.tsx b/packages/local-explorer-ui/src/routes/__root.tsx
index cc71b38c1826..7811c6654fd1 100644
--- a/packages/local-explorer-ui/src/routes/__root.tsx
+++ b/packages/local-explorer-ui/src/routes/__root.tsx
@@ -77,7 +77,7 @@ function RootLayout() {
 				kvError={loaderData.kvError}
 				kvNamespaces={loaderData.kvNamespaces}
 			/>
-			<main className="flex-1 overflow-y-auto flex flex-col">
+			<main className="flex flex-1 flex-col overflow-y-auto">
 				<Outlet />
 			</main>
 		</div>
diff --git a/packages/local-explorer-ui/src/routes/d1/$databaseId.tsx b/packages/local-explorer-ui/src/routes/d1/$databaseId.tsx
index a4d3a91d5804..040fd9d19446 100644
--- a/packages/local-explorer-ui/src/routes/d1/$databaseId.tsx
+++ b/packages/local-explorer-ui/src/routes/d1/$databaseId.tsx
@@ -153,7 +153,7 @@ function DatabaseView(): JSX.Element {
 	}, [deleteTarget, handleTableDeleted]);
 
 	return (
-		<div className="flex flex-col h-full">
+		<div className="flex h-full flex-col">
 			<Breadcrumbs
 				icon={DatabaseIcon}
 				title="D1"
@@ -276,10 +276,10 @@ function TableSelect({ studioRef }: TableSelectProps): JSX.Element {
 			open={open}
 			value={searchParams.table ?? null}
 		>
-			<Select.Trigger className="inline-flex items-center gap-1 p-2 -mx-1.5 rounded-md bg-transparent text-sm text-text cursor-pointer border-none transition-colors hover:bg-border/50 data-popup-open:bg-border/50">
+			<Select.Trigger className="-mx-1.5 inline-flex cursor-pointer items-center gap-1 rounded-md border-none bg-transparent p-2 text-sm text-text transition-colors hover:bg-border/50 data-popup-open:bg-border/50">
 				<Select.Value placeholder="Select table" />
 				<Select.Icon>
-					<CaretUpDownIcon className="w-3.5 h-3.5 text-text-secondary" />
+					<CaretUpDownIcon className="h-3.5 w-3.5 text-text-secondary" />
 				</Select.Icon>
 			</Select.Trigger>
 
@@ -290,15 +290,15 @@ function TableSelect({ studioRef }: TableSelectProps): JSX.Element {
 					side="bottom"
 					sideOffset={4}
 				>
-					<Select.Popup className="min-w-36 max-h-72 bg-bg border border-border rounded-lg shadow-[0_4px_12px_rgba(0,0,0,0.15)] z-100 overflow-hidden transition-[opacity,transform] duration-150 data-starting-style:opacity-0 data-starting-style:-translate-y-1 data-ending-style:opacity-0 data-ending-style:-translate-y-1">
+					<Select.Popup className="z-100 max-h-72 min-w-36 overflow-hidden rounded-lg border border-border bg-bg shadow-[0_4px_12px_rgba(0,0,0,0.15)] transition-[opacity,transform] duration-150 data-ending-style:-translate-y-1 data-ending-style:opacity-0 data-starting-style:-translate-y-1 data-starting-style:opacity-0">
 						<div className="p-1">
 							<button
-								className="flex items-center gap-2 w-full py-1.5 px-2 rounded-md text-sm text-text cursor-pointer transition-colors select-none outline-none hover:bg-bg-secondary dark:hover:bg-bg-tertiary"
+								className="flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm text-text transition-colors outline-none select-none hover:bg-bg-secondary dark:hover:bg-bg-tertiary"
 								onClick={handleCreateTable}
 								type="button"
 							>
-								<span className="flex items-center w-4">
-									<PlusIcon className="w-3.5 h-3.5" />
+								<span className="flex w-4 items-center">
+									<PlusIcon className="h-3.5 w-3.5" />
 								</span>
 								Create table
 							</button>
@@ -314,19 +314,19 @@ function TableSelect({ studioRef }: TableSelectProps): JSX.Element {
 
 									return (
 										<Select.Item
-											className="flex items-center gap-2 w-full py-1.5 px-2 rounded-md text-sm text-text cursor-pointer transition-colors select-none outline-none data-highlighted:bg-bg-secondary dark:data-highlighted:bg-bg-tertiary"
+											className="flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm text-text transition-colors outline-none select-none data-highlighted:bg-bg-secondary dark:data-highlighted:bg-bg-tertiary"
 											key={table.value}
 											value={table.value}
 										>
-											<span className="flex items-center w-4">
-												<Icon className="w-3.5 h-3.5" />
+											<span className="flex w-4 items-center">
+												<Icon className="h-3.5 w-3.5" />
 											</span>
 											<Select.ItemText>{table.label}</Select.ItemText>
 										</Select.Item>
 									);
 								})
 							) : (
-								<span className="flex justify-center items-center gap-2 w-full py-1.5 px-2 text-sm text-text-secondary">
+								<span className="flex w-full items-center justify-center gap-2 px-2 py-1.5 text-sm text-text-secondary">
 									No tables
 								</span>
 							)}
diff --git a/packages/local-explorer-ui/src/routes/do/$className/$objectId.tsx b/packages/local-explorer-ui/src/routes/do/$className/$objectId.tsx
index 5dcd52b126e0..894c07468374 100644
--- a/packages/local-explorer-ui/src/routes/do/$className/$objectId.tsx
+++ b/packages/local-explorer-ui/src/routes/do/$className/$objectId.tsx
@@ -179,7 +179,7 @@ function ObjectView(): JSX.Element {
 			: params.objectId;
 
 	return (
-		<div className="flex flex-col h-full">
+		<div className="flex h-full flex-col">
 			<Breadcrumbs
 				icon={CubeIcon}
 				items={[
@@ -310,10 +310,10 @@ function TableSelect({ studioRef }: TableSelectProps): JSX.Element {
 			open={open}
 			value={searchParams.table ?? null}
 		>
-			<Select.Trigger className="inline-flex items-center gap-1 p-2 -mx-1.5 rounded-md bg-transparent text-sm text-text cursor-pointer border-none transition-colors hover:bg-border/50 data-popup-open:bg-border/50">
+			<Select.Trigger className="-mx-1.5 inline-flex cursor-pointer items-center gap-1 rounded-md border-none bg-transparent p-2 text-sm text-text transition-colors hover:bg-border/50 data-popup-open:bg-border/50">
 				<Select.Value placeholder="Select table" />
 				<Select.Icon>
-					<CaretUpDownIcon className="w-3.5 h-3.5 text-text-secondary" />
+					<CaretUpDownIcon className="h-3.5 w-3.5 text-text-secondary" />
 				</Select.Icon>
 			</Select.Trigger>
 
@@ -324,15 +324,15 @@ function TableSelect({ studioRef }: TableSelectProps): JSX.Element {
 					side="bottom"
 					sideOffset={4}
 				>
-					<Select.Popup className="min-w-36 max-h-72 bg-bg border border-border rounded-lg shadow-[0_4px_12px_rgba(0,0,0,0.15)] z-100 overflow-hidden transition-[opacity,transform] duration-150 data-starting-style:opacity-0 data-starting-style:-translate-y-1 data-ending-style:opacity-0 data-ending-style:-translate-y-1">
+					<Select.Popup className="z-100 max-h-72 min-w-36 overflow-hidden rounded-lg border border-border bg-bg shadow-[0_4px_12px_rgba(0,0,0,0.15)] transition-[opacity,transform] duration-150 data-ending-style:-translate-y-1 data-ending-style:opacity-0 data-starting-style:-translate-y-1 data-starting-style:opacity-0">
 						<div className="p-1">
 							<button
-								className="flex items-center gap-2 w-full py-1.5 px-2 rounded-md text-sm text-text cursor-pointer transition-colors select-none outline-none hover:bg-bg-secondary dark:hover:bg-bg-tertiary"
+								className="flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm text-text transition-colors outline-none select-none hover:bg-bg-secondary dark:hover:bg-bg-tertiary"
 								onClick={handleCreateTable}
 								type="button"
 							>
-								<span className="flex items-center w-4">
-									<PlusIcon className="w-3.5 h-3.5" />
+								<span className="flex w-4 items-center">
+									<PlusIcon className="h-3.5 w-3.5" />
 								</span>
 								Create table
 							</button>
@@ -348,19 +348,19 @@ function TableSelect({ studioRef }: TableSelectProps): JSX.Element {
 
 									return (
 										<Select.Item
-											className="flex items-center gap-2 w-full py-1.5 px-2 rounded-md text-sm text-text cursor-pointer transition-colors select-none outline-none data-highlighted:bg-bg-secondary dark:data-highlighted:bg-bg-tertiary"
+											className="flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm text-text transition-colors outline-none select-none data-highlighted:bg-bg-secondary dark:data-highlighted:bg-bg-tertiary"
 											key={table.value}
 											value={table.value}
 										>
-											<span className="flex items-center w-4">
-												<Icon className="w-3.5 h-3.5" />
+											<span className="flex w-4 items-center">
+												<Icon className="h-3.5 w-3.5" />
 											</span>
 											<Select.ItemText>{table.label}</Select.ItemText>
 										</Select.Item>
 									);
 								})
 							) : (
-								<span className="flex justify-center items-center gap-2 w-full py-1.5 px-2 text-sm text-text-secondary">
+								<span className="flex w-full items-center justify-center gap-2 px-2 py-1.5 text-sm text-text-secondary">
 									No tables
 								</span>
 							)}
diff --git a/packages/local-explorer-ui/src/routes/do/$className/index.tsx b/packages/local-explorer-ui/src/routes/do/$className/index.tsx
index d79e32deea8e..9e427ca70558 100644
--- a/packages/local-explorer-ui/src/routes/do/$className/index.tsx
+++ b/packages/local-explorer-ui/src/routes/do/$className/index.tsx
@@ -130,15 +130,15 @@ function NamespaceView() {
 
 			<div className="px-6 py-6">
 				{error && (
-					<div className="text-danger p-4 bg-danger/8 border border-danger/20 rounded-md mb-4">
+					<div className="mb-4 rounded-md border border-danger/20 bg-danger/8 p-4 text-danger">
 						{error}
 					</div>
 				)}
 
 				{loading ? (
-					<div className="text-center p-12 text-text-secondary">Loading...</div>
+					<div className="p-12 text-center text-text-secondary">Loading...</div>
 				) : objects.length === 0 ? (
-					<div className="text-center p-12 text-text-secondary space-y-2 flex flex-col items-center justify-center">
+					<div className="flex flex-col items-center justify-center space-y-2 p-12 text-center text-text-secondary">
 						<h2 className="text-2xl font-medium">
 							No Durable Objects with stored data
 						</h2>
@@ -148,26 +148,26 @@ function NamespaceView() {
 					</div>
 				) : (
 					<>
-						<div className="rounded-lg border border-border overflow-hidden">
+						<div className="overflow-hidden rounded-lg border border-border">
 							<table className="w-full text-sm">
 								<thead className="bg-bg-secondary">
 									<tr>
-										<th className="text-left px-4 py-3 font-medium text-text-secondary border-b border-border">
+										<th className="border-b border-border px-4 py-3 text-left font-medium text-text-secondary">
 											Object ID
 										</th>
-										<th className="text-right px-4 py-3 font-medium text-text-secondary border-b border-border" />
+										<th className="border-b border-border px-4 py-3 text-right font-medium text-text-secondary" />
 									</tr>
 								</thead>
 								<tbody>
 									{objects.map((obj) => (
 										<tr
-											className="border-b border-border last:border-b-0 hover:bg-bg-secondary/50 transition-colors"
+											className="border-b border-border transition-colors last:border-b-0 hover:bg-bg-secondary/50"
 											key={obj.id}
 										>
 											<td className="px-4 py-3 font-mono text-xs">{obj.id}</td>
 											<td className="px-4 py-3 text-right">
 												<Link
-													className="inline-flex items-center justify-center py-1.5 px-3 text-xs font-medium rounded-md cursor-pointer transition-colors bg-primary text-white hover:bg-primary-hover"
+													className="inline-flex cursor-pointer items-center justify-center rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-primary-hover"
 													params={{
 														className: params.className,
 														objectId: obj.id as string,
@@ -185,9 +185,9 @@ function NamespaceView() {
 						</div>
 
 						{hasMore && (
-							<div className="text-center p-4">
+							<div className="p-4 text-center">
 								<Button
-									className="inline-flex items-center justify-center py-2 px-4 text-sm font-medium rounded-md cursor-pointer transition-[background-color,transform] active:translate-y-px bg-bg-tertiary text-text border border-border hover:bg-border data-disabled:opacity-60 data-disabled:cursor-not-allowed data-disabled:active:translate-y-0"
+									className="inline-flex cursor-pointer items-center justify-center rounded-md border border-border bg-bg-tertiary px-4 py-2 text-sm font-medium text-text transition-[background-color,transform] hover:bg-border active:translate-y-px data-disabled:cursor-not-allowed data-disabled:opacity-60 data-disabled:active:translate-y-0"
 									disabled={loadingMore}
 									focusableWhenDisabled
 									onClick={handleLoadMore}
diff --git a/packages/local-explorer-ui/src/routes/index.tsx b/packages/local-explorer-ui/src/routes/index.tsx
index 6ae7e4214a1b..b55cf3d771ae 100644
--- a/packages/local-explorer-ui/src/routes/index.tsx
+++ b/packages/local-explorer-ui/src/routes/index.tsx
@@ -7,13 +7,13 @@ export const Route = createFileRoute("/")({
 
 function IndexPage() {
 	return (
-		<div className="flex flex-col items-center justify-center h-full text-center p-12 space-y-2">
-			<CloudflareLogo className="text-primary w-24 h-24" />
+		<div className="flex h-full flex-col items-center justify-center space-y-2 p-12 text-center">
+			<CloudflareLogo className="h-24 w-24 text-primary" />
 
 			<h2 className="text-3xl font-bold text-text">
 				Welcome to Local Explorer
 			</h2>
-			<p className="text-text-secondary text-sm font-light">
+			<p className="text-sm font-light text-text-secondary">
 				Select a resource from the sidebar to view & manage it.
 			</p>
 		</div>
diff --git a/packages/local-explorer-ui/src/routes/kv/$namespaceId.tsx b/packages/local-explorer-ui/src/routes/kv/$namespaceId.tsx
index c48d5165aed0..b6c31be04b67 100644
--- a/packages/local-explorer-ui/src/routes/kv/$namespaceId.tsx
+++ b/packages/local-explorer-ui/src/routes/kv/$namespaceId.tsx
@@ -368,7 +368,7 @@ function NamespaceView() {
 
 			<div className="px-6 py-6">
 				{error && (
-					<div className="text-danger p-4 bg-danger/8 border border-danger/20 rounded-md mb-4">
+					<div className="mb-4 rounded-md border border-danger/20 bg-danger/8 p-4 text-danger">
 						{error}
 					</div>
 				)}
@@ -379,14 +379,14 @@ function NamespaceView() {
 					disabled={loading}
 				/>
 
-				<hr className="border-border my-4" />
+				<hr className="my-4 border-border" />
 
 				<AddKVForm onAdd={handleAdd} clearSignal={clearAddForm} />
 
 				{loading ? (
-					<div className="text-center p-12 text-text-secondary">Loading...</div>
+					<div className="p-12 text-center text-text-secondary">Loading...</div>
 				) : entries.length === 0 ? (
-					<div className="text-center p-12 text-text-secondary space-y-2 flex flex-col items-center justify-center">
+					<div className="flex flex-col items-center justify-center space-y-2 p-12 text-center text-text-secondary">
 						{prefix ? (
 							<p className="text-sm font-light">{`No keys found matching prefix "${prefix}".`}</p>
 						) : (
@@ -410,9 +410,9 @@ function NamespaceView() {
 							/>
 						</div>
 						{hasMore && (
-							<div className="text-center p-4">
+							<div className="p-4 text-center">
 								<Button
-									className="inline-flex items-center justify-center py-2 px-4 text-sm font-medium rounded-md cursor-pointer transition-[background-color,transform] active:translate-y-px bg-bg-tertiary text-text border border-border hover:bg-border data-disabled:opacity-60 data-disabled:cursor-not-allowed data-disabled:active:translate-y-0"
+									className="inline-flex cursor-pointer items-center justify-center rounded-md border border-border bg-bg-tertiary px-4 py-2 text-sm font-medium text-text transition-[background-color,transform] hover:bg-border active:translate-y-px data-disabled:cursor-not-allowed data-disabled:opacity-60 data-disabled:active:translate-y-0"
 									onClick={handleLoadMore}
 									disabled={loadingMore}
 									focusableWhenDisabled
@@ -429,26 +429,26 @@ function NamespaceView() {
 					onOpenChange={(open) => !open && setDeleteTarget(null)}
 				>
 					<AlertDialog.Portal>
-						<AlertDialog.Backdrop className="fixed inset-0 bg-black/50 flex items-center justify-center z-1000 transition-opacity duration-150 data-starting-style:opacity-0 data-ending-style:opacity-0" />
-						<AlertDialog.Popup className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-1001 bg-bg rounded-xl p-6 w-full max-w-125 shadow-[0_4px_24px_rgba(0,0,0,0.15),0_0_0_1px_var(--color-border)] transition-[opacity,transform] duration-150 data-starting-style:opacity-0 data-starting-style:scale-95 data-ending-style:opacity-0 data-ending-style:scale-95">
-							<AlertDialog.Title className="text-lg font-semibold mb-4">
+						<AlertDialog.Backdrop className="fixed inset-0 z-1000 flex items-center justify-center bg-black/50 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0" />
+						<AlertDialog.Popup className="fixed top-1/2 left-1/2 z-1001 w-full max-w-125 -translate-x-1/2 -translate-y-1/2 rounded-xl bg-bg p-6 shadow-[0_4px_24px_rgba(0,0,0,0.15),0_0_0_1px_var(--color-border)] transition-[opacity,transform] duration-150 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0">
+							<AlertDialog.Title className="mb-4 text-lg font-semibold">
 								Delete key?
 							</AlertDialog.Title>
-							<AlertDialog.Description className="text-text-secondary mb-2">
+							<AlertDialog.Description className="mb-2 text-text-secondary">
 								Are you sure you want to delete &ldquo;{deleteTarget}&rdquo;?
 								This cannot be undone.
 							</AlertDialog.Description>
-							<div className="flex justify-end gap-2 mt-6">
+							<div className="mt-6 flex justify-end gap-2">
 								<AlertDialog.Close
 									render={
-										<Button className="inline-flex items-center justify-center py-2 px-4 text-sm font-medium border-none rounded-md cursor-pointer transition-[background-color,transform] active:translate-y-px bg-bg-tertiary text-text border border-border hover:bg-border data-disabled:opacity-60 data-disabled:cursor-not-allowed data-disabled:active:translate-y-0" />
+										<Button className="inline-flex cursor-pointer items-center justify-center rounded-md border border-none border-border bg-bg-tertiary px-4 py-2 text-sm font-medium text-text transition-[background-color,transform] hover:bg-border active:translate-y-px data-disabled:cursor-not-allowed data-disabled:opacity-60 data-disabled:active:translate-y-0" />
 									}
 									disabled={deleting}
 								>
 									Cancel
 								</AlertDialog.Close>
 								<Button
-									className="inline-flex items-center justify-center py-2 px-4 text-sm font-medium border-none rounded-md cursor-pointer transition-[background-color,transform] active:translate-y-px bg-danger text-bg-tertiary hover:bg-danger-hover data-disabled:opacity-60 data-disabled:cursor-not-allowed data-disabled:active:translate-y-0"
+									className="inline-flex cursor-pointer items-center justify-center rounded-md border-none bg-danger px-4 py-2 text-sm font-medium text-white transition-[background-color,transform] hover:bg-danger-hover active:translate-y-px data-disabled:cursor-not-allowed data-disabled:opacity-60 data-disabled:active:translate-y-0"
 									onClick={handleConfirmDelete}
 									disabled={deleting}
 									focusableWhenDisabled
@@ -465,26 +465,26 @@ function NamespaceView() {
 					onOpenChange={(open) => !open && setOverwriteConfirm(null)}
 				>
 					<AlertDialog.Portal>
-						<AlertDialog.Backdrop className="fixed inset-0 bg-black/50 flex items-center justify-center z-1000 transition-opacity duration-150 data-starting-style:opacity-0 data-ending-style:opacity-0" />
-						<AlertDialog.Popup className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-1001 bg-bg rounded-xl p-6 w-full max-w-125 shadow-[0_4px_24px_rgba(0,0,0,0.15),0_0_0_1px_var(--color-border)] transition-[opacity,transform] duration-150 data-starting-style:opacity-0 data-starting-style:scale-95 data-ending-style:opacity-0 data-ending-style:scale-95">
-							<AlertDialog.Title className="text-lg font-semibold mb-4">
+						<AlertDialog.Backdrop className="fixed inset-0 z-1000 flex items-center justify-center bg-black/50 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0" />
+						<AlertDialog.Popup className="fixed top-1/2 left-1/2 z-1001 w-full max-w-125 -translate-x-1/2 -translate-y-1/2 rounded-xl bg-bg p-6 shadow-[0_4px_24px_rgba(0,0,0,0.15),0_0_0_1px_var(--color-border)] transition-[opacity,transform] duration-150 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0">
+							<AlertDialog.Title className="mb-4 text-lg font-semibold">
 								Overwrite key?
 							</AlertDialog.Title>
-							<AlertDialog.Description className="text-text-secondary mb-2">
+							<AlertDialog.Description className="mb-2 text-text-secondary">
 								Key &ldquo;{overwriteConfirm?.key}&rdquo; already exists. Do you
 								want to overwrite its value?
 							</AlertDialog.Description>
-							<div className="flex justify-end gap-2 mt-6">
+							<div className="mt-6 flex justify-end gap-2">
 								<AlertDialog.Close
 									render={
-										<Button className="inline-flex items-center justify-center py-2 px-4 text-sm font-medium border-none rounded-md cursor-pointer transition-[background-color,transform] active:translate-y-px bg-bg-tertiary text-text border border-border hover:bg-border data-disabled:opacity-60 data-disabled:cursor-not-allowed data-disabled:active:translate-y-0" />
+										<Button className="inline-flex cursor-pointer items-center justify-center rounded-md border border-none border-border bg-bg-tertiary px-4 py-2 text-sm font-medium text-text transition-[background-color,transform] hover:bg-border active:translate-y-px data-disabled:cursor-not-allowed data-disabled:opacity-60 data-disabled:active:translate-y-0" />
 									}
 									disabled={overwriting}
 								>
 									Cancel
 								</AlertDialog.Close>
 								<Button
-									className="inline-flex items-center justify-center py-2 px-4 text-sm font-medium border-none rounded-md cursor-pointer transition-[background-color,transform] active:translate-y-px bg-primary text-bg-tertiary hover:bg-primary-hover data-disabled:opacity-60 data-disabled:cursor-not-allowed data-disabled:active:translate-y-0"
+									className="inline-flex cursor-pointer items-center justify-center rounded-md border-none bg-primary px-4 py-2 text-sm font-medium text-white transition-[background-color,transform] hover:bg-primary-hover active:translate-y-px data-disabled:cursor-not-allowed data-disabled:opacity-60 data-disabled:active:translate-y-0"
 									onClick={handleConfirmOverwrite}
 									disabled={overwriting}
 									focusableWhenDisabled
diff --git a/packages/local-explorer-ui/src/styles/tailwind.css b/packages/local-explorer-ui/src/styles/tailwind.css
index 2afa2e86812f..1faa1f0b6bf9 100644
--- a/packages/local-explorer-ui/src/styles/tailwind.css
+++ b/packages/local-explorer-ui/src/styles/tailwind.css
@@ -141,6 +141,6 @@
 	body {
 		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
 			Ubuntu, sans-serif;
-		@apply text-sm leading-normal text-text bg-bg-secondary;
+		@apply text-text bg-bg-secondary text-sm leading-normal;
 	}
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 77d88ca4282f..c41630d6aca0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -166,6 +166,9 @@ importers:
       prettier-plugin-packagejson:
         specifier: ^2.2.18
         version: 2.2.18(prettier@3.2.5)
+      prettier-plugin-tailwindcss:
+        specifier: ^0.7.2
+        version: 0.7.2(@ianvs/prettier-plugin-sort-imports@4.2.1(@vue/compiler-sfc@3.3.4)(prettier@3.2.5))(prettier@3.2.5)
       tree-kill:
         specifier: ^1.2.2
         version: 1.2.2
@@ -2243,6 +2246,9 @@ importers:
       concurrently:
         specifier: ^9.0.0
         version: 9.2.1
+      eslint-plugin-tailwindcss:
+        specifier: ^4.0.0-beta.0
+        version: 4.0.0-beta.0(tailwindcss@4.1.18)
       typescript:
         specifier: catalog:default
         version: 5.8.3
@@ -2725,7 +2731,7 @@ importers:
         version: 1.2.2
       tsdown:
         specifier: 0.16.3
-        version: 0.16.3(ms@2.1.3)(typescript@5.8.3)
+        version: 0.16.3(ms@2.1.3)(synckit@0.11.12)(typescript@5.8.3)
       typescript:
         specifier: catalog:default
         version: 5.8.3
@@ -3903,7 +3909,7 @@ importers:
         version: 2.2.0
       tsdown:
         specifier: 0.16.3
-        version: 0.16.3(ms@2.1.3)(typescript@5.8.3)
+        version: 0.16.3(ms@2.1.3)(synckit@0.11.12)(typescript@5.8.3)
       typescript:
         specifier: catalog:default
         version: 5.8.3
@@ -4806,10 +4812,6 @@ packages:
     resolution: {integrity: sha512-3lSpxGgvnmZznmBkCRnVREPUFJv2wrv9iAoFDvADJc0ypmdOxdUtcLeBgBJ6zE0PMeTKnxeQzyk0xTBq4Ep7zw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/generator@7.28.5':
-    resolution: {integrity: sha512-3EwLFhZ38J4VyIP6WNtt2kUdW9dokXA9Cr4IVIFHuCpZ3H8/YFOl5JjZHisrn1fATPBmKKqXzDFvh9fUwHz6CQ==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/generator@7.29.1':
     resolution: {integrity: sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==}
     engines: {node: '>=6.9.0'}
@@ -4924,11 +4926,6 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
 
-  '@babel/parser@7.28.5':
-    resolution: {integrity: sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==}
-    engines: {node: '>=6.0.0'}
-    hasBin: true
-
   '@babel/parser@7.29.0':
     resolution: {integrity: sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww==}
     engines: {node: '>=6.0.0'}
@@ -7464,6 +7461,10 @@ packages:
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
 
+  '@pkgr/core@0.2.9':
+    resolution: {integrity: sha512-QNqXyfVS2wm9hweSYD2O7F0G06uurj9kZ96TRQE5Y9hU7+tgdZwIkbAKc5Ocy1HxEY2kuDQa6cQ1WRs/O5LFKA==}
+    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
+
   '@playground/main-resolution-package@file:packages/vite-plugin-cloudflare/playground/main-resolution/package':
     resolution: {directory: packages/vite-plugin-cloudflare/playground/main-resolution/package, type: directory}
 
@@ -11195,6 +11196,12 @@ packages:
     peerDependencies:
       eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7
 
+  eslint-plugin-tailwindcss@4.0.0-beta.0:
+    resolution: {integrity: sha512-WWCajZgQu38Sd67ZCl2W6i3MRzqB0d+H8s4qV9iB6lBJbsDOIpIlj6R1Fj2FXkoWErbo05pZnZYbCGIU9o/DsA==}
+    engines: {node: '>=18.12.0'}
+    peerDependencies:
+      tailwindcss: ^3.4.0 || ^4.0.0
+
   eslint-plugin-turbo@2.4.4:
     resolution: {integrity: sha512-myEnQTjr3FkI0j1Fu0Mqnv1z8n0JW5iFTOUNzHaEevjzl+1uzMSsFwks/x8i3rGmI3EYtC1BY8K2B2pS0Vfx6w==}
     peerDependencies:
@@ -12642,6 +12649,10 @@ packages:
     resolution: {integrity: sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==}
     engines: {node: '>=14'}
 
+  local-pkg@1.1.2:
+    resolution: {integrity: sha512-arhlxbFRmoQHl33a0Zkle/YWlmNwoyt6QNZEIJcqNbdrsix5Lvc4HyyI3EnwxTYlZYc32EbYrQ8SzEZ7dqgg9A==}
+    engines: {node: '>=14'}
+
   locate-path@3.0.0:
     resolution: {integrity: sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==}
     engines: {node: '>=6'}
@@ -13863,6 +13874,61 @@ packages:
     peerDependencies:
       prettier: '>= 1.16.0'
 
+  prettier-plugin-tailwindcss@0.7.2:
+    resolution: {integrity: sha512-LkphyK3Fw+q2HdMOoiEHWf93fNtYJwfamoKPl7UwtjFQdei/iIBoX11G6j706FzN3ymX9mPVi97qIY8328vdnA==}
+    engines: {node: '>=20.19'}
+    peerDependencies:
+      '@ianvs/prettier-plugin-sort-imports': '*'
+      '@prettier/plugin-hermes': '*'
+      '@prettier/plugin-oxc': '*'
+      '@prettier/plugin-pug': '*'
+      '@shopify/prettier-plugin-liquid': '*'
+      '@trivago/prettier-plugin-sort-imports': '*'
+      '@zackad/prettier-plugin-twig': '*'
+      prettier: ^3.0
+      prettier-plugin-astro: '*'
+      prettier-plugin-css-order: '*'
+      prettier-plugin-jsdoc: '*'
+      prettier-plugin-marko: '*'
+      prettier-plugin-multiline-arrays: '*'
+      prettier-plugin-organize-attributes: '*'
+      prettier-plugin-organize-imports: '*'
+      prettier-plugin-sort-imports: '*'
+      prettier-plugin-svelte: '*'
+    peerDependenciesMeta:
+      '@ianvs/prettier-plugin-sort-imports':
+        optional: true
+      '@prettier/plugin-hermes':
+        optional: true
+      '@prettier/plugin-oxc':
+        optional: true
+      '@prettier/plugin-pug':
+        optional: true
+      '@shopify/prettier-plugin-liquid':
+        optional: true
+      '@trivago/prettier-plugin-sort-imports':
+        optional: true
+      '@zackad/prettier-plugin-twig':
+        optional: true
+      prettier-plugin-astro:
+        optional: true
+      prettier-plugin-css-order:
+        optional: true
+      prettier-plugin-jsdoc:
+        optional: true
+      prettier-plugin-marko:
+        optional: true
+      prettier-plugin-multiline-arrays:
+        optional: true
+      prettier-plugin-organize-attributes:
+        optional: true
+      prettier-plugin-organize-imports:
+        optional: true
+      prettier-plugin-sort-imports:
+        optional: true
+      prettier-plugin-svelte:
+        optional: true
+
   prettier@2.7.1:
     resolution: {integrity: sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==}
     engines: {node: '>=10.13.0'}
@@ -14891,6 +14957,10 @@ packages:
     peerDependencies:
       react: ^16.11.0 || ^17.0.0 || ^18.0.0
 
+  synckit@0.11.12:
+    resolution: {integrity: sha512-Bh7QjT8/SuKUIfObSXNHNSK6WHo6J1tHCqJsuaFDP7gP0fkzSfTxI8y85JrppZ0h8l0maIgc2tfuZQ6/t3GtnQ==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+
   tabbable@6.4.0:
     resolution: {integrity: sha512-05PUHKSNE8ou2dwIxTngl4EzcnsCDZGJ/iCLtDflR/SHB/ny14rXc+qU5P4mG9JkusiV7EivzY9Mhm55AzAvCg==}
 
@@ -14898,6 +14968,11 @@ packages:
     resolution: {integrity: sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng==}
     engines: {node: '>=20'}
 
+  tailwind-api-utils@1.0.3:
+    resolution: {integrity: sha512-KpzUHkH1ug1sq4394SLJX38ZtpeTiqQ1RVyFTTSY2XuHsNSTWUkRo108KmyyrMWdDbQrLYkSHaNKj/a3bmA4sQ==}
+    peerDependencies:
+      tailwindcss: ^3.3.0 || ^4.0.0 || ^4.0.0-beta
+
   tailwind-merge@3.4.0:
     resolution: {integrity: sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==}
 
@@ -16589,14 +16664,6 @@ snapshots:
       '@jridgewell/trace-mapping': 0.3.31
       jsesc: 3.0.2
 
-  '@babel/generator@7.28.5':
-    dependencies:
-      '@babel/parser': 7.29.0
-      '@babel/types': 7.29.0
-      '@jridgewell/gen-mapping': 0.3.13
-      '@jridgewell/trace-mapping': 0.3.31
-      jsesc: 3.0.2
-
   '@babel/generator@7.29.1':
     dependencies:
       '@babel/parser': 7.29.0
@@ -16733,10 +16800,6 @@ snapshots:
     dependencies:
       '@babel/types': 7.29.0
 
-  '@babel/parser@7.28.5':
-    dependencies:
-      '@babel/types': 7.29.0
-
   '@babel/parser@7.29.0':
     dependencies:
       '@babel/types': 7.29.0
@@ -19071,6 +19134,8 @@ snapshots:
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
+  '@pkgr/core@0.2.9': {}
+
   '@playground/main-resolution-package@file:packages/vite-plugin-cloudflare/playground/main-resolution/package': {}
 
   '@playground/module-resolution-excludes@file:packages/vite-plugin-cloudflare/playground/module-resolution/packages/excludes': {}
@@ -23217,6 +23282,14 @@ snapshots:
       string.prototype.matchall: 4.0.12
       string.prototype.repeat: 1.0.0
 
+  eslint-plugin-tailwindcss@4.0.0-beta.0(tailwindcss@4.1.18):
+    dependencies:
+      fast-glob: 3.3.2
+      postcss: 8.5.6
+      synckit: 0.11.12
+      tailwind-api-utils: 1.0.3(tailwindcss@4.1.18)
+      tailwindcss: 4.1.18
+
   eslint-plugin-turbo@2.4.4(eslint@9.39.1(jiti@2.6.1))(turbo@2.7.2):
     dependencies:
       dotenv: 16.0.3
@@ -24785,6 +24858,12 @@ snapshots:
       mlly: 1.7.4
       pkg-types: 1.3.1
 
+  local-pkg@1.1.2:
+    dependencies:
+      mlly: 1.7.4
+      pkg-types: 2.3.0
+      quansync: 0.2.11
+
   locate-path@3.0.0:
     dependencies:
       p-locate: 3.0.0
@@ -25946,6 +26025,12 @@ snapshots:
       prettier: 3.2.5
       sort-package-json: 1.57.0
 
+  prettier-plugin-tailwindcss@0.7.2(@ianvs/prettier-plugin-sort-imports@4.2.1(@vue/compiler-sfc@3.3.4)(prettier@3.2.5))(prettier@3.2.5):
+    dependencies:
+      prettier: 3.2.5
+    optionalDependencies:
+      '@ianvs/prettier-plugin-sort-imports': 4.2.1(@vue/compiler-sfc@3.3.4)(prettier@3.2.5)
+
   prettier@2.7.1: {}
 
   prettier@2.8.8: {}
@@ -26443,13 +26528,13 @@ snapshots:
 
   rolldown-plugin-dts@0.17.6(ms@2.1.3)(rolldown@1.0.0-beta.49)(typescript@5.8.3):
     dependencies:
-      '@babel/generator': 7.28.5
-      '@babel/parser': 7.28.5
+      '@babel/generator': 7.29.1
+      '@babel/parser': 7.29.0
       '@babel/types': 7.29.0
       ast-kit: 2.2.0
       birpc: 2.8.0
       dts-resolver: 2.1.3
-      get-tsconfig: 4.13.0
+      get-tsconfig: 4.13.6
       magic-string: 0.30.21
       obug: 0.1.3(ms@2.1.3)
       rolldown: 1.0.0-beta.49
@@ -27263,10 +27348,21 @@ snapshots:
       react: 18.3.1
       use-sync-external-store: 1.2.0(react@18.3.1)
 
+  synckit@0.11.12:
+    dependencies:
+      '@pkgr/core': 0.2.9
+
   tabbable@6.4.0: {}
 
   tagged-tag@1.0.0: {}
 
+  tailwind-api-utils@1.0.3(tailwindcss@4.1.18):
+    dependencies:
+      enhanced-resolve: 5.19.0
+      jiti: 2.6.1
+      local-pkg: 1.1.2
+      tailwindcss: 4.1.18
+
   tailwind-merge@3.4.0: {}
 
   tailwindcss@4.0.15: {}
@@ -27488,12 +27584,12 @@ snapshots:
       - supports-color
       - vue-tsc
 
-  tsdown@0.16.3(ms@2.1.3)(typescript@5.8.3):
+  tsdown@0.16.3(ms@2.1.3)(synckit@0.11.12)(typescript@5.8.3):
     dependencies:
       ansis: 4.2.0
       cac: 6.7.14
       chokidar: 4.0.3
-      diff: 8.0.2
+      diff: 8.0.3
       empathic: 2.0.0
       hookable: 5.5.3
       obug: 0.1.3(ms@2.1.3)
@@ -27504,7 +27600,7 @@ snapshots:
       tinyglobby: 0.2.15
       tree-kill: 1.2.2
       unconfig-core: 7.4.1
-      unrun: 0.2.8
+      unrun: 0.2.8(synckit@0.11.12)
     optionalDependencies:
       typescript: 5.8.3
     transitivePeerDependencies:
@@ -27861,10 +27957,12 @@ snapshots:
       picomatch: 4.0.3
       webpack-virtual-modules: 0.6.2
 
-  unrun@0.2.8:
+  unrun@0.2.8(synckit@0.11.12):
     dependencies:
       '@oxc-project/runtime': 0.96.0
       rolldown: 1.0.0-beta.49
+    optionalDependencies:
+      synckit: 0.11.12
 
   until-async@3.0.2: {}
 
diff --git a/tools/github-workflow-helpers/__tests__/validate-action-pinning.test.ts b/tools/github-workflow-helpers/__tests__/validate-action-pinning.test.ts
new file mode 100644
index 000000000000..5ad1813e2483
--- /dev/null
+++ b/tools/github-workflow-helpers/__tests__/validate-action-pinning.test.ts
@@ -0,0 +1,239 @@
+import {
+	mkdirSync,
+	mkdtempSync,
+	realpathSync,
+	rmSync,
+	writeFileSync,
+} from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import dedent from "ts-dedent";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { validateActionPinning } from "../validate-action-pinning";
+
+describe("validateActionPinning()", () => {
+	let tmpDir: string;
+
+	beforeEach(() => {
+		tmpDir = realpathSync(mkdtempSync(join(tmpdir(), "action-pinning-")));
+		mkdirSync(join(tmpDir, ".github", "workflows"), { recursive: true });
+	});
+
+	afterEach(() => {
+		rmSync(tmpDir, { recursive: true, force: true });
+	});
+
+	function writeWorkflow(filename: string, content: string) {
+		writeFileSync(
+			join(tmpDir, ".github", "workflows", filename),
+			content,
+			"utf-8"
+		);
+	}
+
+	function writeCompositeAction(actionDir: string, content: string) {
+		const dir = join(tmpDir, ".github", "actions", actionDir);
+		mkdirSync(dir, { recursive: true });
+		writeFileSync(join(dir, "action.yml"), content, "utf-8");
+	}
+
+	it("should pass for pinned third-party actions", () => {
+		writeWorkflow(
+			"test.yml",
+			dedent`
+				jobs:
+				  build:
+				    steps:
+				      - uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36
+			`
+		);
+		expect(validateActionPinning(tmpDir)).toEqual([]);
+	});
+
+	it("should pass for pinned actions with a version comment", () => {
+		writeWorkflow(
+			"test.yml",
+			dedent`
+				jobs:
+				  build:
+				    steps:
+				      - uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3
+			`
+		);
+		expect(validateActionPinning(tmpDir)).toEqual([]);
+	});
+
+	it("should fail for third-party actions pinned to a tag", () => {
+		writeWorkflow(
+			"test.yml",
+			dedent`
+				jobs:
+				  build:
+				    steps:
+				      - uses: dorny/paths-filter@v3
+			`
+		);
+		const errors = validateActionPinning(tmpDir);
+		expect(errors).toHaveLength(1);
+		expect(errors[0]).toContain("dorny/paths-filter@v3");
+		expect(errors[0]).toContain("not pinned to a commit SHA");
+	});
+
+	it("should fail for third-party actions pinned to a semver tag", () => {
+		writeWorkflow(
+			"test.yml",
+			dedent`
+				jobs:
+				  build:
+				    steps:
+				      - uses: Ana06/get-changed-files@v2.3.0
+			`
+		);
+		const errors = validateActionPinning(tmpDir);
+		expect(errors).toHaveLength(1);
+		expect(errors[0]).toContain("Ana06/get-changed-files@v2.3.0");
+	});
+
+	it("should fail for third-party actions pinned to a branch", () => {
+		writeWorkflow(
+			"test.yml",
+			dedent`
+				jobs:
+				  build:
+				    steps:
+				      - uses: changesets/action@main
+			`
+		);
+		const errors = validateActionPinning(tmpDir);
+		expect(errors).toHaveLength(1);
+		expect(errors[0]).toContain("changesets/action@main");
+	});
+
+	it("should skip first-party actions/* regardless of pinning", () => {
+		writeWorkflow(
+			"test.yml",
+			dedent`
+				jobs:
+				  build:
+				    steps:
+				      - uses: actions/checkout@v4
+				      - uses: actions/setup-node@v4
+				      - uses: actions/upload-artifact@v4
+			`
+		);
+		expect(validateActionPinning(tmpDir)).toEqual([]);
+	});
+
+	it("should skip local actions", () => {
+		writeWorkflow(
+			"test.yml",
+			dedent`
+				jobs:
+				  build:
+				    steps:
+				      - uses: ./.github/actions/install-dependencies
+			`
+		);
+		expect(validateActionPinning(tmpDir)).toEqual([]);
+	});
+
+	it("should report multiple errors across multiple files", () => {
+		writeWorkflow(
+			"a.yml",
+			dedent`
+				jobs:
+				  build:
+				    steps:
+				      - uses: foo/bar@v1
+			`
+		);
+		writeWorkflow(
+			"b.yml",
+			dedent`
+				jobs:
+				  build:
+				    steps:
+				      - uses: baz/qux@v2
+				      - uses: quux/corge@latest
+			`
+		);
+		const errors = validateActionPinning(tmpDir);
+		expect(errors).toHaveLength(3);
+		const joined = errors.join("\n");
+		expect(joined).toContain("foo/bar@v1");
+		expect(joined).toContain("baz/qux@v2");
+		expect(joined).toContain("quux/corge@latest");
+	});
+
+	it("should validate composite actions in .github/actions/", () => {
+		writeCompositeAction(
+			"my-action",
+			dedent`
+				runs:
+				  using: composite
+				  steps:
+				    - uses: unpinned/action@v1
+			`
+		);
+		const errors = validateActionPinning(tmpDir);
+		expect(errors).toHaveLength(1);
+		expect(errors[0]).toContain("unpinned/action@v1");
+		expect(errors[0]).toContain(".github/actions/my-action/action.yml");
+	});
+
+	it("should include the correct line number in errors", () => {
+		writeWorkflow(
+			"test.yml",
+			dedent`
+				name: Test
+				on: push
+				jobs:
+				  build:
+				    runs-on: ubuntu-latest
+				    steps:
+				      - uses: actions/checkout@v4
+				      - uses: unpinned/action@v3
+			`
+		);
+		const errors = validateActionPinning(tmpDir);
+		expect(errors).toHaveLength(1);
+		expect(errors[0]).toContain(":8");
+	});
+
+	it("should handle uses without a hyphen prefix", () => {
+		writeWorkflow(
+			"test.yml",
+			dedent`
+				jobs:
+				  build:
+				    steps:
+				      - name: Do something
+				        uses: unpinned/action@v1
+			`
+		);
+		const errors = validateActionPinning(tmpDir);
+		expect(errors).toHaveLength(1);
+		expect(errors[0]).toContain("unpinned/action@v1");
+	});
+
+	it("should fail for third-party actions with no version reference at all", () => {
+		writeWorkflow(
+			"test.yml",
+			dedent`
+				jobs:
+				  build:
+				    steps:
+				      - uses: some-org/some-action
+			`
+		);
+		const errors = validateActionPinning(tmpDir);
+		expect(errors).toHaveLength(1);
+		expect(errors[0]).toContain("some-org/some-action");
+		expect(errors[0]).toContain("has no version reference at all");
+	});
+
+	it("should pass when there are no workflow files", () => {
+		// tmpDir has the .github/workflows/ directory but no files
+		expect(validateActionPinning(tmpDir)).toEqual([]);
+	});
+});
diff --git a/tools/github-workflow-helpers/validate-action-pinning.ts b/tools/github-workflow-helpers/validate-action-pinning.ts
new file mode 100644
index 000000000000..4663bb539a3f
--- /dev/null
+++ b/tools/github-workflow-helpers/validate-action-pinning.ts
@@ -0,0 +1,106 @@
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { globSync } from "glob";
+
+/**
+ * Matches `uses:` directives in GitHub Actions workflow YAML files.
+ * Captures the action reference (everything after `uses:`), trimmed.
+ *
+ * Examples that match:
+ *   - uses: actions/checkout@v4
+ *     uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3
+ */
+const USES_RE = /^\s*-?\s*uses:\s*(.+)$/;
+
+/**
+ * A valid SHA pin is exactly 40 lowercase hex characters.
+ */
+const SHA_RE = /^[0-9a-f]{40}$/;
+
+/**
+ * First-party GitHub action prefixes that are trusted and do not
+ * need to be pinned to a commit SHA.
+ */
+const TRUSTED_PREFIXES = ["actions/"];
+
+/**
+ * Checks that all third-party GitHub Actions in workflow and composite
+ * action files are pinned to a full commit SHA rather than a mutable
+ * tag or branch reference.
+ *
+ * @param repoRoot - Absolute path to the repository root directory.
+ * @returns An array of human-readable error strings (empty = all good).
+ */
+export function validateActionPinning(repoRoot: string): string[] {
+	const patterns = [
+		".github/workflows/*.yml",
+		".github/workflows/*.yaml",
+		".github/actions/*/action.yml",
+		".github/actions/*/action.yaml",
+	];
+
+	const files = patterns.flatMap((pattern) =>
+		globSync(pattern, { cwd: repoRoot })
+	);
+
+	const errors: string[] = [];
+
+	for (const relPath of files) {
+		const absPath = resolve(repoRoot, relPath);
+		const content = readFileSync(absPath, "utf-8");
+		const lines = content.split("\n");
+
+		for (let i = 0; i < lines.length; i++) {
+			const match = lines[i].match(USES_RE);
+			if (!match) {
+				continue;
+			}
+
+			const raw = match[1].trim();
+
+			// Local actions (e.g. ./.github/actions/foo) — skip
+			if (raw.startsWith("./") || raw.startsWith("../")) {
+				continue;
+			}
+
+			// Trusted first-party actions — skip
+			if (TRUSTED_PREFIXES.some((prefix) => raw.startsWith(prefix))) {
+				continue;
+			}
+
+			// At this point it's a third-party action.
+			// Expected format: owner/repo@<ref>  (possibly with a trailing comment)
+			const atIndex = raw.indexOf("@");
+			if (atIndex === -1) {
+				errors.push(
+					`${relPath}:${i + 1} — ${raw.split(/\s/)[0]} has no version reference at all`
+				);
+				continue;
+			}
+
+			// The ref is everything after @ up to the first space (comments follow a space)
+			const afterAt = raw.slice(atIndex + 1).split(/\s/)[0];
+
+			if (!SHA_RE.test(afterAt)) {
+				errors.push(
+					`${relPath}:${i + 1} — ${raw.split(/\s/)[0]} is not pinned to a commit SHA`
+				);
+			}
+		}
+	}
+
+	return errors;
+}
+
+if (require.main === module) {
+	console.log("::group::Checking GitHub Action pinning");
+	const repoRoot = resolve(__dirname, "../..");
+	const errors = validateActionPinning(repoRoot);
+	if (errors.length > 0) {
+		console.error(
+			"::error::Action pinning checks:" + errors.map((e) => `\n- ${e}`).join("")
+		);
+	}
+	console.log("::endgroup::");
+	process.exit(errors.length > 0 ? 1 : 0);
+}