Tailwind4 oneshot?

.stylelintrc

@@ -24,7 +24,14 @@
           "if",
           "else",
           "return",
-          "layer"
+          "layer",
+          "reference",
+          "config",
+          "utility",
+          "custom-variant",
+          "theme",
+          "plugin",
+          "source"
         ]
       }
     ],

package.json

@@ -49,8 +49,8 @@
     "format": "pnpm prettier:fix; pnpm eslint:fix; pnpm stylelint:fix",
     "check": "VITE_TEMPORAL_UI_BUILD_TARGET=local svelte-check --tsconfig ./tsconfig.json --tsgo --incremental",
     "check:watch": "VITE_TEMPORAL_UI_BUILD_TARGET=local svelte-check --tsconfig ./tsconfig.json --tsgo --incremental --watch",
-    "prettier": "prettier --check --plugin prettier-plugin-svelte --plugin prettier-plugin-tailwindcss .",
-    "prettier:fix": "prettier --write --plugin prettier-plugin-svelte --plugin prettier-plugin-tailwindcss .",
+    "prettier": "prettier --check --plugin prettier-plugin-svelte .",
+    "prettier:fix": "prettier --write --plugin prettier-plugin-svelte .",
     "preview:local": "VITE_TEMPORAL_UI_BUILD_TARGET=local vite preview",
     "preview:docker": "VITE_API=http://localhost:8080 VITE_TEMPORAL_UI_BUILD_TARGET=local vite preview",
     "package": "svelte-package",
@@ -148,7 +148,7 @@
     "@typescript/native-preview": "7.0.0-dev.20260506.1",
     "@vitest/coverage-v8": "^4.1.5",
     "@vitest/ui": "^3.1.1",
-    "autoprefixer": "^10.4.13",
+    "@tailwindcss/postcss": "^4.3.0",
     "axe-core": "^4.10.0",
     "axe-playwright": "^2.0.3",
     "cors": "^2.8.5",
@@ -196,7 +196,7 @@
     "svelte-check": "^4.1.5",
     "svelte-preprocess": "^6.0.3",
     "svelte2tsx": "^0.7.35",
-    "tailwindcss": "^3.4.1",
+    "tailwindcss": "^4.3.0",
     "tar-fs": "^3.1.2",
     "typescript": "6.0.3",
     "typescript-eslint": "^8.54.0",

postcss.config.cjs

@@ -1,16 +1,12 @@
-const tailwindcss = require('tailwindcss');
-const tailwindcssNesting = require('tailwindcss/nesting');
-const autoprefixer = require('autoprefixer');
+const tailwindcssPostcss = require('@tailwindcss/postcss');
 const cssnano = require('cssnano');
 
 const mode = process.env.NODE_ENV;
 const dev = mode === 'development';
 
 const config = {
   plugins: [
-    autoprefixer(),
-    tailwindcssNesting(),
-    tailwindcss(),
+    tailwindcssPostcss(),
     !dev &&
       cssnano({
         preset: 'default',

src/app.css

@@ -1,12 +1,32 @@
-@import '@fontsource-variable/inter';
+@import '@fontsource-variable/inter' layer(base);
 
-@import '@fontsource/noto-sans-mono';
+@import '@fontsource/noto-sans-mono' layer(base);
 
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
+@import 'tailwindcss';
+@config "../tailwind.config.ts";
+
+@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
+
+@theme {
+  --font-sans:
+    'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-mono:
+    'Noto Sans Mono', ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo,
+    Consolas, 'DejaVu Sans Mono', monospace;
+  --animate-spin-slow: spin 3s linear infinite;
+  --z-100: 100;
+}
 
 @layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: rgb(var(--color-border-primary));
+  }
+
   :root {
     --top-nav-height: 3rem;
     --panel-collapsed-w: 60px;

src/lib/components/batch-operations/details.svelte

@@ -43,6 +43,8 @@
 </div>
 
 <style lang="postcss">
+  @reference "../../../app.css";
+
   .batch-operation-detail {
     @apply border-b text-sm last-of-type:border-b-0 max-sm:flex max-sm:flex-col sm:grid sm:grid-cols-10;
   }

src/lib/components/bottom-nav-namespaces.svelte

@@ -32,7 +32,7 @@
       labelHidden
       autoFocus
       placeholder="Search"
-      class="sticky top-0 w-full bg-primary p-2"
+      class="bg-primary sticky top-0 w-full p-2"
       bind:value={search}
     />
     <ul class="flex w-full flex-col gap-4 overflow-auto p-4 pt-2">
@@ -56,8 +56,10 @@
 {/if}
 
 <style lang="postcss">
+  @reference "../../app.css";
+
   .namespace {
-    @apply w-full cursor-pointer border border-transparent text-left text-sm font-medium hover:surface-interactive-secondary focus-visible:surface-interactive-secondary focus-visible:border-inverse focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/70 dark:focus-visible:border-interactive;
+    @apply hover:surface-interactive-secondary focus-visible:surface-interactive-secondary focus-visible:border-inverse focus-visible:ring-primary/70 dark:focus-visible:border-interactive w-full cursor-pointer border border-transparent text-left text-sm font-medium focus-visible:ring-2 focus-visible:outline-hidden;
 
     &.selected {
       @apply text-brand;

src/lib/components/bottom-nav.svelte

@@ -139,9 +139,9 @@
   <div
     class={merge(
       'group fixed top-0 z-50 h-[calc(100%-64px)] w-full overflow-auto md:hidden',
-      'focus-visible:[&_[role=button]]:outline-none focus-visible:[&_[role=button]]:ring-2 focus-visible:[&_[role=button]]:ring-primary/70 focus-visible:[&_a]:outline-none focus-visible:[&_a]:ring-2 focus-visible:[&_a]:ring-primary/70',
+      'focus-visible:[&_[role=button]]:ring-primary/70 focus-visible:[&_a]:ring-primary/70 focus-visible:[&_[role=button]]:ring-2 focus-visible:[&_[role=button]]:outline-hidden focus-visible:[&_a]:ring-2 focus-visible:[&_a]:outline-hidden',
       isCloud
-        ? 'bg-gradient-to-b from-indigo-600 to-indigo-950 text-off-white focus-visible:[&_[role=button]]:ring-success focus-visible:[&_a]:ring-success'
+        ? 'text-off-white focus-visible:[&_[role=button]]:ring-success focus-visible:[&_a]:ring-success bg-gradient-to-b from-indigo-600 to-indigo-950'
         : 'surface-black',
     )}
     data-nav="open"
@@ -168,10 +168,10 @@
 <nav
   class={merge(
     'fixed bottom-0 z-40 flex h-[64px] w-full flex-row items-center justify-between gap-5 px-4 py-2 transition-colors md:hidden',
-    'focus-visible:[&_a]:outline-none focus-visible:[&_a]:ring-2 focus-visible:[&_a]:ring-primary/70 focus-visible:[&_button]:outline-none focus-visible:[&_button]:ring-2 focus-visible:[&_button]:ring-primary/70',
+    'focus-visible:[&_a]:ring-primary/70 focus-visible:[&_button]:ring-primary/70 focus-visible:[&_a]:ring-2 focus-visible:[&_a]:outline-hidden focus-visible:[&_button]:ring-2 focus-visible:[&_button]:outline-hidden',
     isCloud
-      ? 'bg-gradient-to-b from-indigo-600 to-indigo-900 text-off-white focus-visible:[&_a]:ring-success focus-visible:[&_button]:ring-success'
-      : 'surface-black border-t border-subtle',
+      ? 'text-off-white focus-visible:[&_a]:ring-success focus-visible:[&_button]:ring-success bg-gradient-to-b from-indigo-600 to-indigo-900'
+      : 'surface-black border-subtle border-t',
     className,
   )}
   data-testid="top-nav"
@@ -210,7 +210,7 @@
           class="grow text-white"
           on:click={onNamespaceClick}>{truncateNamespace(namespace)}</Button
         >
-        <div class="ml-1 h-full w-1 border-l border-subtle"></div>
+        <div class="border-subtle ml-1 h-full w-1 border-l"></div>
         <Button
           variant="ghost"
           size="xs"
@@ -249,11 +249,13 @@
 </nav>
 
 <style lang="postcss">
+  @reference "../../app.css";
+
   .namespace-wrapper {
-    @apply surface-black flex h-10 w-full grow flex-row items-center border border-subtle px-0.5 text-sm dark:focus-within:surface-primary focus-within:border-interactive focus-within:outline-none focus-within:ring-2 focus-within:ring-primary/70;
+    @apply surface-black border-subtle dark:focus-within:surface-primary focus-within:border-interactive focus-within:ring-primary/70 flex h-10 w-full grow flex-row items-center border px-0.5 text-sm focus-within:ring-2 focus-within:outline-hidden;
   }
 
   .nav-button {
-    @apply relative select-none p-1 text-center align-middle text-xs font-medium uppercase transition-all;
+    @apply relative p-1 text-center align-middle text-xs font-medium uppercase transition-all select-none;
   }
 </style>

src/lib/components/command-palette/index.svelte

@@ -328,7 +328,7 @@
   {#each filteredCommands as command, index (command.id)}
     <button
       type="button"
-      class="flex w-full items-center justify-between rounded-lg border border-transparent px-6 py-4 text-left transition-all duration-200 hover:bg-slate-50 hover:shadow-sm dark:hover:bg-slate-800"
+      class="flex w-full items-center justify-between rounded-lg border border-transparent px-6 py-4 text-left transition-all duration-200 hover:bg-slate-50 hover:shadow-xs dark:hover:bg-slate-800"
       class:selected={index === selectedIndex}
       onclick={() => handleCommandClick(command)}
       onmouseenter={() => (selectedIndex = index)}
@@ -337,16 +337,16 @@
     >
       <div class="flex items-center gap-4">
         {#if command.icon}
-          <div class="h-6 w-6 flex-shrink-0 text-secondary">
+          <div class="text-secondary h-6 w-6 shrink-0">
             <Icon name={command.icon} />
           </div>
         {/if}
         <div class="flex flex-col gap-1">
-          <div class="text-lg font-semibold text-secondary">
+          <div class="text-secondary text-lg font-semibold">
             {command.title}
           </div>
           {#if command.subtitle}
-            <div class="text-sm text-secondary">
+            <div class="text-secondary text-sm">
               {command.subtitle}
             </div>
           {/if}
@@ -382,7 +382,7 @@
   {#snippet content()}
     <div class="flex h-full flex-1 flex-col">
       <div
-        class="sticky top-0 z-20 border-b border-slate-200 bg-white/95 pb-4 pt-2 backdrop-blur-sm dark:border-slate-700 dark:bg-slate-900/95"
+        class="sticky top-0 z-20 border-b border-slate-200 bg-white/95 pt-2 pb-4 backdrop-blur-sm dark:border-slate-700 dark:bg-slate-900/95"
       >
         <div class="flex items-center justify-between px-6 py-3">
           <div
@@ -434,8 +434,10 @@
 </Modal>
 
 <style lang="postcss">
+  @reference "../../../app.css";
+
   .selected {
-    @apply border-indigo-200 bg-indigo-50 shadow-sm;
+    @apply border-indigo-200 bg-indigo-50 shadow-xs;
   }
 
   :global(.body::backdrop) {

src/lib/components/command-palette/modal.svelte

@@ -86,7 +86,7 @@
   <div id="modal-content-{id}" class="content">
     {@render content?.()}
     <p
-      class="mt-2 text-sm font-normal text-danger"
+      class="text-danger mt-2 text-sm font-normal"
       class:hidden={!error}
       role="alert"
     >
@@ -96,20 +96,22 @@
 </dialog>
 
 <style lang="postcss">
+  @reference "../../../app.css";
+
   .body {
-    @apply surface-primary z-50 w-full overflow-y-auto rounded-sm border border-secondary p-0 text-primary shadow-xl md:h-max lg:max-w-4xl;
+    @apply surface-primary border-secondary text-primary z-50 w-full overflow-y-auto rounded-xs border p-0 shadow-xl md:h-max lg:max-w-4xl;
   }
 
   .body::backdrop {
     @apply cursor-pointer;
   }
 
   .body.hightlightNav::backdrop {
-    @apply left-[60px] top-[40px];
+    @apply top-[40px] left-[60px];
   }
 
   .title {
-    @apply surface-primary px-8 pb-0 pt-8 text-2xl;
+    @apply surface-primary px-8 pt-8 pb-0 text-2xl;
   }
 
   .content {

src/lib/components/count-refresh-button.svelte

@@ -26,7 +26,7 @@
   {translate('common.refresh')}
   <span
     class={merge(
-      'inline-grid overflow-hidden rounded-sm bg-slate-50 px-1 py-0.5 dark:bg-slate-600',
+      'inline-grid overflow-hidden rounded-xs bg-slate-50 px-1 py-0.5 dark:bg-slate-600',
       !count && 'bg-transparent p-0',
     )}
   >

src/lib/components/deployments/compute-badge.svelte

@@ -13,7 +13,7 @@
 
 {#if config}
   <div
-    class="flex items-center gap-1 rounded-sm border border-subtle px-1 text-primary"
+    class="border-subtle text-primary flex items-center gap-1 rounded-xs border px-1"
   >
     <Icon name={config.icon} class="h-4 w-4" />
     {config.label}

src/lib/components/deployments/deployment-status.svelte

@@ -33,7 +33,7 @@
 
   const deploymentStatus = cva(
     [
-      'flex items-center justify-center gap-1 px-1 min-w-24 transition-colors rounded-sm border border-subtle',
+      'flex items-center justify-center gap-1 px-1 min-w-24 transition-colors rounded-xs border border-subtle',
     ],
     {
       variants: {

src/lib/components/detail-list/detail-list-link-value.svelte

@@ -27,7 +27,7 @@
 <DetailListValue {copyable} {copyableText}>
   <Link
     {href}
-    class="flex w-fit flex-row items-center gap-1 truncate rounded-sm {isBadge &&
+    class="flex w-fit flex-row items-center gap-1 truncate rounded-xs {isBadge &&
       'surface-subtle'}"
   >
     <span class="truncate">

src/lib/components/detail-list/detail-list-text-value.svelte

@@ -43,7 +43,7 @@
       {text}
     </Badge>
   {:else}
-    <div class="flex select-all items-center gap-1 truncate rounded-sm">
+    <div class="flex items-center gap-1 truncate rounded-xs select-all">
       {#if iconName && iconPosition === 'leading'}
         <Icon name={iconName} class="shrink-0" />
       {/if}

src/lib/components/detail-list/detail-list-timestamp-value.svelte

@@ -26,7 +26,7 @@
 </script>
 
 {#snippet content()}
-  <div class="flex select-all items-center gap-1 truncate rounded-sm">
+  <div class="flex items-center gap-1 truncate rounded-xs select-all">
     {$relativeTime ? relativeTimestamp : formattedTimestamp}
   </div>
 {/snippet}

src/lib/components/event/event-shortcut-keys.svelte

@@ -26,7 +26,7 @@
   {open}
   onClick={onClose}
   closeButtonLabel={translate('common.close-keyboard-shortcuts')}
-  class="min-w-min max-w-fit"
+  class="max-w-fit min-w-min"
 >
   <DrawerContent title={translate('common.keyboard-shortcuts')}>
     <div
@@ -73,6 +73,8 @@
 </Drawer>
 
 <style lang="postcss">
+  @reference "../../../app.css";
+
   .shortcut-key-button {
     @apply fixed bottom-5 left-24 z-50;
   }

src/lib/components/event/event-summary-row.svelte

@@ -215,7 +215,7 @@
   {#if isEventGroup(event)}
     <td class="font-mono">
       <div class="flex items-center gap-0.5">
         {#each event.eventList as groupEvent}
           <Link
             data-testid="link"
             href={routeForEventHistoryEvent({
@@ -330,7 +330,7 @@
         <div
           class="flex max-w-xl items-center gap-2 first:pt-0 last:border-b-0 md:w-auto"
         >
-          <p class="whitespace-nowrap text-right text-xs">Summary</p>
+          <p class="text-right text-xs whitespace-nowrap">Summary</p>
           <PayloadSummary value={currentEvent.userMetadata.summary} />
         </div>
       {/if}
@@ -382,6 +382,8 @@
 {/if}
 
 <style lang="postcss">
+  @reference "../../../app.css";
+
   tr[data-testid='event-summary-row'].active {
     @apply surface-table-related-hover;
   }

src/lib/components/heart-beat-indicator.svelte

@@ -39,6 +39,8 @@
 </div>
 
 <style lang="postcss">
+  @reference "../../app.css";
+
   .heart-beat {
     @apply relative flex items-center justify-center bg-blue-300 text-center;
   }
@@ -52,7 +54,7 @@
   }
 
   .fade-in {
-    @apply absolute right-0 top-0 h-full w-full bg-blue-300;
+    @apply absolute top-0 right-0 h-full w-full bg-blue-300;
 
     animation: heartRateIn 2s linear infinite;
     animation-delay: var(--animation-delay, 0);

src/lib/components/lines-and-dots/svg/text.svelte

@@ -70,7 +70,7 @@
 {#key textX}
   <text
     bind:this={textElement}
-    class="cursor-pointer select-none outline-none {category} text-primary"
+    class="cursor-pointer outline-hidden select-none {category} text-primary"
     class:label
     class:backdrop
     x={textX}
@@ -84,6 +84,8 @@
 {/key}
 
 <style lang="postcss">
+  @reference "../../../../app.css";
+
   text {
     @apply fill-current;