Tailwind 4

.gitignore

@@ -31,3 +31,10 @@ test-results/
 ci-e2e-traces/
 playwright-report/
 .vercel
+
+# Visual regression snapshots
+test/e2e/**/*-snapshots/
+test/e2e/**/*.png
+
+# LLMs
+CLAUDE.md

app/components/AccordionItem.tsx

@@ -29,9 +29,9 @@ export const AccordionItem = ({ children, isOpen, label, value }: AccordionItemP
   return (
     <Accordion.Item value={value}>
       <Accordion.Header className="max-w-lg">
-        <Accordion.Trigger className="group flex w-full items-center justify-between border-t py-2 text-sans-xl border-secondary [&>svg]:data-[state=open]:rotate-90">
+        <Accordion.Trigger className="text-sans-xl border-secondary group flex w-full items-center justify-between border-t py-2 [&>svg]:data-[state=open]:rotate-90">
           <div className="text-raise">{label}</div>
-          <DirectionRightIcon className="transition-all text-default" />
+          <DirectionRightIcon className="text-default transition-all" />
         </Accordion.Trigger>
       </Accordion.Header>
       <Accordion.Content

app/components/AttachFloatingIpModal.tsx

@@ -48,7 +48,7 @@ function FloatingIpLabel({ fip }: { fip: FloatingIp }) {
         {fip.description && (
           <>
             <Slash />
-            <div className="grow overflow-hidden overflow-ellipsis whitespace-pre text-left">
+            <div className="grow overflow-hidden text-left text-ellipsis whitespace-pre">
               {fip.description}
             </div>
           </>

app/components/CapacityBar.tsx

@@ -34,15 +34,15 @@ export const CapacityBar = <T extends number | bigint>({
   const unitElt = includeUnit ? <>&nbsp;{unit}</> : null
 
   return (
-    <div className="w-full min-w-min rounded-lg border border-default lg+:max-w-[50%]">
+    <div className="border-default 1000:max-w-1/2 w-full min-w-min rounded-lg border">
       <div className="flex justify-between p-3">
         <TitleCell icon={icon} title={title} unit={unit} />
         <PctCell pct={pct} />
       </div>
-      <div className="p-3 pb-4 pt-1">
+      <div className="p-3 pt-1 pb-4">
         <Bar pct={pct} />
       </div>
-      <div className="flex justify-between border-t border-secondary">
+      <div className="border-secondary flex justify-between border-t">
         <ValueCell label={provisionedLabel} value={provisioned} unit={unitElt} />
         <ValueCell label={capacityLabel} value={capacity} unit={unitElt} />
       </div>
@@ -55,9 +55,9 @@ function TitleCell({ icon, title, unit }: TitleCellProps) {
   return (
     <div>
       <div className="flex grow items-center">
-        <span className="mr-2 flex h-4 w-4 items-center text-accent">{icon}</span>
-        <span className="!normal-case text-mono-sm text-default">{title}</span>
-        <span className="ml-1 !normal-case text-mono-sm text-tertiary">({unit})</span>
+        <span className="text-accent mr-2 flex h-4 w-4 items-center">{icon}</span>
+        <span className="text-mono-sm text-default normal-case!">{title}</span>
+        <span className="text-mono-sm text-tertiary ml-1 normal-case!">({unit})</span>
       </div>
     </div>
   )
@@ -67,8 +67,8 @@ function PctCell({ pct }: { pct: number }) {
   // NaN happens when both top and bottom are 0
   if (Number.isNaN(pct)) {
     return (
-      <div className="flex -translate-y-0.5 items-baseline text-tertiary">
-        <div className="font-light text-sans-2xl text-raise">—</div>
+      <div className="text-tertiary flex -translate-y-0.5 items-baseline">
+        <div className="text-sans-2xl text-raise font-light">—</div>
         <div className="text-sans-xl">%</div>
       </div>
     )
@@ -77,7 +77,7 @@ function PctCell({ pct }: { pct: number }) {
   const [wholeNumber, decimal] = splitDecimal(pct)
   return (
     <div className="flex -translate-y-0.5 items-baseline">
-      <div className="font-light text-sans-2xl text-raise">{wholeNumber}</div>
+      <div className="text-sans-2xl text-raise font-light">{wholeNumber}</div>
       <div className="text-sans-xl text-tertiary">{decimal}%</div>
     </div>
   )
@@ -87,10 +87,10 @@ function Bar({ pct }: { pct: number }) {
   return (
     <div className="flex w-full gap-0.5">
       <div
-        className="h-3 rounded-l border bg-accent-secondary border-accent-secondary"
+        className="bg-accent-secondary border-accent-secondary h-3 rounded-l border"
         style={{ width: `${pct.toFixed(2)}%` }}
       ></div>
-      <div className="h-3 grow rounded-r border bg-info-secondary border-info-secondary"></div>
+      <div className="bg-info-secondary border-info-secondary h-3 grow rounded-r border"></div>
     </div>
   )
 }
@@ -103,9 +103,9 @@ type ValueCellProps = {
 
 function ValueCell({ label, value, unit }: ValueCellProps) {
   return (
-    <div className="p-3 text-mono-sm">
-      <div className="mb-px text-tertiary">{label}</div>
-      <div className="!normal-case text-default">
+    <div className="text-mono-sm p-3">
+      <div className="text-tertiary mb-px">{label}</div>
+      <div className="text-default normal-case!">
         <BigNum num={value} />
         {unit}
       </div>

app/components/CapacityBars.tsx

@@ -23,7 +23,7 @@ export const CapacityBars = ({
   allocatedLabel: string
 }) => {
   return (
-    <div className="mb-12 flex min-w-min flex-col gap-3 lg+:flex-row">
+    <div className="1000:flex-row mb-12 flex min-w-min flex-col gap-3">
       <CapacityBar
         icon={<Cpu16Icon />}
         title="CPU"

app/components/CopyCode.tsx

@@ -46,7 +46,7 @@ export function CopyCodeModal({
   return (
     <Modal isOpen={isOpen} onDismiss={onDismiss} title={modalTitle} width="free">
       <Modal.Section>
-        <pre className="w-full rounded border px-4 py-3 !normal-case !tracking-normal text-mono-md bg-default border-secondary">
+        <pre className="text-mono-md bg-default border-secondary w-full rounded border px-4 py-3 tracking-normal! normal-case!">
           {children}
         </pre>
       </Modal.Section>
@@ -71,7 +71,7 @@ export function CopyCodeModal({
                 animate={{ opacity: 1, y: '-50%', x: '-50%' }}
                 initial={{ opacity: 0, y: 'calc(-50% - 25px)', x: '-50%' }}
                 transition={{ type: 'spring', duration: 0.3, bounce: 0 }}
-                className="absolute left-1/2 top-1/2 flex items-center"
+                className="absolute top-1/2 left-1/2 flex items-center"
               >
                 <Success12Icon className="text-accent" />
               </m.span>
@@ -108,7 +108,7 @@ export function EquivalentCliCommand({ project, instance }: EquivProps) {
         isOpen={isOpen}
         onDismiss={() => setIsOpen(false)}
       >
-        <span className="mr-2 select-none text-tertiary">$</span>
+        <span className="text-tertiary mr-2 select-none">$</span>
         {cmdParts.join(' \\\n    ')}
       </CopyCodeModal>
     </>

app/components/DocsPopover.tsx

@@ -22,14 +22,14 @@ type DocsPopoverLinkProps = {
 export const DocsPopoverLink = ({ href, linkText }: DocsPopoverLinkProps) => (
   <a
     href={href}
-    className="group block px-4 children:last:border-0"
+    className="group block px-4 last:*:border-0"
     target="_blank"
     rel="noreferrer"
   >
-    <div className="mx-2 border-b py-1.5 border-secondary">
-      <div className="relative -ml-2 inline-block rounded py-1 pl-2 pr-7 text-sans-md text-raise group-hover:bg-tertiary">
-        <span className="inline-block max-w-[300px] truncate align-middle">{linkText}</span>
-        <OpenLink12Icon className="absolute top-1.5 ml-2 translate-y-[1px] text-secondary" />
+    <div className="border-secondary mx-2 border-b py-1.5">
+      <div className="text-sans-md text-raise group-hover:bg-tertiary relative -ml-2 inline-block rounded py-1 pr-7 pl-2">
+        <span className="inline-block max-w-300 truncate align-middle">{linkText}</span>
+        <OpenLink12Icon className="text-secondary absolute top-1.5 ml-2 translate-y-px" />
       </div>
     </div>
   </a>
@@ -47,25 +47,25 @@ export const DocsPopover = ({ heading, icon, summary, links }: DocsPopoverProps)
   const title = `Learn about ${heading}`
   return (
     <Popover>
-      <PopoverButton title={title}>
+      <PopoverButton title={title} className="headless-hide-focus rounded">
         <div className={cn(buttonStyle({ size: 'sm', variant: 'ghost' }), 'w-8')}>
           <Info16Icon aria-hidden className="shrink-0" />
         </div>
       </PopoverButton>
       <PopoverPanel
         // popover-panel needed for enter animation
-        className="popover-panel z-10 w-96 rounded-lg border bg-raise border-secondary elevation-2"
+        className="popover-panel bg-raise border-secondary elevation-2 z-10 w-96 rounded-lg border"
         anchor={{ to: 'bottom end', gap: 12 }}
       >
         <div className="px-4">
-          <h2 className="mt-4 flex items-center gap-1 text-sans-md">
-            <div className="mr-1 flex items-center text-accent-secondary">{icon}</div>
+          <h2 className="text-sans-md mt-4 flex items-center gap-1">
+            <div className="text-accent-secondary mr-1 flex items-center">{icon}</div>
             {title}
           </h2>
-          <p className="mb-3 mt-2 text-sans-md text-default">{summary}</p>
+          <p className="text-sans-md text-default mt-2 mb-3">{summary}</p>
         </div>
-        <div className="border-t pb-1 border-secondary">
-          <h3 className="mb-1 mt-3 px-4 text-mono-sm text-tertiary">Guides</h3>
+        <div className="border-secondary border-t pb-1">
+          <h3 className="text-mono-sm text-tertiary mt-3 mb-1 px-4">Guides</h3>
           {links.map((link) => (
             <DocsPopoverLink key={link.href} {...link} />
           ))}

app/components/ErrorBoundary.tsx

@@ -19,7 +19,7 @@ import { ErrorPage, NotFound } from './ErrorPage'
 const IdpMisconfig = () => (
   <Message
     variant="notice"
-    className="!mt-6"
+    className="mt-6!"
     showIcon={false}
     content={
       <p>

app/components/ErrorPage.tsx

@@ -17,7 +17,7 @@ import { Button } from '~/ui/lib/Button'
 const GradientBackground = () => (
   <div
     // negative z-index avoids covering MSW warning banner
-    className="fixed bottom-0 left-0 right-0 top-0 -z-10"
+    className="fixed top-0 right-0 bottom-0 left-0 -z-10"
     style={{
       background:
         'radial-gradient(200% 100% at 50% 100%, var(--surface-default) 0%, #161B1D 100%)',
@@ -34,17 +34,17 @@ export function ErrorPage({ children }: Props) {
       <div className="relative flex w-full justify-between">
         <Link
           to="/"
-          className="flex items-center p-6 text-mono-sm text-default hover:text-raise"
+          className="text-mono-sm text-default hover:text-raise flex items-center p-6"
         >
-          <PrevArrow12Icon title="Select" className="mr-2 text-secondary" />
+          <PrevArrow12Icon title="Select" className="text-secondary mr-2" />
           Back to console
         </Link>
-        <SignOutButton className="mr-6 mt-4" />
+        <SignOutButton className="mt-4 mr-6" />
       </div>
-      <div className="absolute left-1/2 top-1/2 flex w-96 -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center space-y-4 rounded-lg border p-8 !bg-raise border-secondary elevation-3">
+      <div className="bg-raise! border-secondary elevation-3 absolute top-1/2 left-1/2 flex w-96 -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center space-y-4 rounded-lg border p-8">
         <div className="my-2 flex h-12 w-12 items-center justify-center">
-          <div className="absolute h-12 w-12 rounded-full opacity-20 bg-destructive motion-safe:animate-[ping_2s_cubic-bezier(0,0,0.2,1)_infinite]" />
-          <Error12Icon className="relative h-8 w-8 text-error" />
+          <div className="bg-destructive absolute h-12 w-12 rounded-full opacity-20 motion-safe:animate-[ping_2s_cubic-bezier(0,0,0.2,1)_infinite]" />
+          <Error12Icon className="text-error relative h-8 w-8" />
         </div>
 
         <div className="space-y-2 text-center">{children}</div>

app/components/ExternalIps.tsx

@@ -44,14 +44,14 @@ export function ExternalIps({ project, instance }: PP.Instance) {
 
   return (
     <div className="flex max-w-full items-center">
-      {intersperse(links, <Slash className="ml-0.5 mr-1.5" />)}
+      {intersperse(links, <Slash className="mr-1.5 ml-0.5" />)}
       {/* if there are more than 2 ips, add a link to the instance networking page */}
       {overflowCount > 0 && (
         <>
-          <Slash className="ml-0.5 mr-1.5" />
+          <Slash className="mr-1.5 ml-0.5" />
           <Link
             to={pb.instanceNetworking({ project, instance })}
-            className="hover:link-with-underline -m-2 self-center p-2 text-tertiary"
+            className="hover:link-with-underline text-tertiary -m-2 self-center p-2"
           >
             …
           </Link>

app/components/InstanceAutoRestartPopover.tsx

@@ -16,11 +16,11 @@ import {
   NextArrow12Icon,
   OpenLink12Icon,
 } from '@oxide/design-system/icons/react'
+import { Badge } from '@oxide/design-system/ui'
 
 import type { Instance } from '~/api'
 import { instanceAutoRestartingSoon } from '~/api/util'
 import { useInstanceSelector } from '~/hooks/use-params'
-import { Badge } from '~/ui/lib/Badge'
 import { Spinner } from '~/ui/lib/Spinner'
 import { links } from '~/util/links'
 import { pb } from '~/util/path-builder'
@@ -43,14 +43,14 @@ export const InstanceAutoRestartPopover = ({ instance }: { instance: Instance })
   return (
     <Popover>
       <PopoverButton
-        className="group flex h-6 w-6 items-center justify-center rounded border border-default hover:bg-hover"
+        className="border-default hover:bg-hover group flex h-6 w-6 items-center justify-center rounded border"
         aria-label="Auto-restart status"
       >
         <AutoRestart12Icon className="shrink-0" aria-hidden />
       </PopoverButton>
       <PopoverPanel
         // popover-panel needed for enter animation
-        className="popover-panel z-10 w-96 rounded-lg border bg-raise border-secondary elevation-2"
+        className="popover-panel bg-raise border-secondary elevation-2 z-10 w-96 rounded-lg border"
         anchor={{ to: 'bottom start', gap: 12 }}
       >
         <PopoverRow label="Auto Restart">
@@ -92,7 +92,7 @@ export const InstanceAutoRestartPopover = ({ instance }: { instance: Instance })
             )}
           </PopoverRow>
         )}
-        <div className="p-3 text-sans-md text-default">
+        <div className="text-sans-md text-default p-3">
           <p className="mb-2 pr-4">
             {enabled
               ? restartingSoon
@@ -106,13 +106,13 @@ export const InstanceAutoRestartPopover = ({ instance }: { instance: Instance })
             target="_blank"
             rel="noreferrer"
           >
-            <span className="inline-block max-w-[300px] truncate align-middle">
+            <span className="inline-block max-w-300 truncate align-middle">
               Learn about{' '}
               <span className="group-hover:link-with-underline text-raise">
                 Instance Auto-Restart
               </span>
             </span>
-            <OpenLink12Icon className="ml-1 translate-y-[1px] text-secondary" />
+            <OpenLink12Icon className="text-secondary ml-1 translate-y-px" />
           </a>
         </div>
       </PopoverPanel>
@@ -121,10 +121,8 @@ export const InstanceAutoRestartPopover = ({ instance }: { instance: Instance })
 }
 
 const PopoverRow = ({ label, children }: { label: string; children: ReactNode }) => (
-  <div className="flex h-10 items-center border-b border-b-secondary">
-    <div className="w-32 pl-3 pr-2 text-mono-sm text-tertiary">{label}</div>
-    <div className="flex h-10 flex-grow items-center gap-1.5 pr-2 text-sans-md">
-      {children}
-    </div>
+  <div className="border-b-secondary flex h-10 items-center border-b">
+    <div className="text-mono-sm text-tertiary w-32 pr-2 pl-3">{label}</div>
+    <div className="text-sans-md flex h-10 grow items-center gap-1.5 pr-2">{children}</div>
   </div>
 )

app/components/ListPlusCell.tsx

@@ -37,7 +37,7 @@ export const ListPlusCell = ({
   const rest = array.slice(numInCell)
   const content = (
     <div>
-      <div className="mb-2 text-sans-semi-md text-raise">{tooltipTitle}</div>
+      <div className="text-sans-semi-md text-raise mb-2">{tooltipTitle}</div>
       <div className="flex flex-col items-start gap-2">{...rest}</div>
     </div>
   )

app/components/MoreActionsMenu.tsx

@@ -27,10 +27,10 @@ export const MoreActionsMenu = ({
 }: MoreActionsMenuProps) => {
   return (
     <DropdownMenu.Root>
-      <DropdownMenu.Trigger aria-label={label}>
+      <DropdownMenu.Trigger aria-label={label} className="rounded">
         <div
           className={cn(
-            'active-clicked flex items-center justify-center rounded border border-default hover:bg-tertiary',
+            'active-clicked border-default hover:bg-tertiary flex items-center justify-center rounded border',
             isSmall ? 'h-6 w-6' : 'h-8 w-8'
           )}
         >

app/components/MswBanner.tsx

@@ -49,11 +49,11 @@ export function MswBanner({ disableButton }: Props) {
   return (
     <>
       {/* The [&+*]:pt-10 style is to ensure the page container isn't pushed out of screen as it uses 100vh for layout */}
-      <aside className="absolute z-topBar flex h-10 w-full items-center justify-center text-sans-md text-info-secondary bg-info-secondary [&+*]:pt-10">
+      <aside className="text-sans-md text-info-secondary bg-info-secondary absolute z-(--z-top-bar) flex h-10 w-full items-center justify-center [&+*]:pt-10">
         <Info16Icon className="mr-2" /> This is a technical preview.
         <button
           type="button"
-          className="ml-2 flex items-center gap-0.5 text-sans-md hover:text-info"
+          className="text-sans-md hover:text-info ml-2 flex items-center gap-0.5"
           onClick={() => setIsOpen(true)}
           disabled={disableButton}
         >
@@ -91,7 +91,7 @@ export function MswBanner({ disableButton }: Props) {
             />
           </ModalLinks>
         </Modal.Section>
-        <footer className="flex items-center justify-end border-t px-3 py-3 border-secondary">
+        <footer className="border-secondary flex items-center justify-end border-t px-3 py-3">
           <Button size="sm" onClick={closeModal}>
             Close
           </Button>

app/components/PageSkeleton.tsx

@@ -28,18 +28,18 @@ export function PageSkeleton({ skipPaths }: { skipPaths?: RegExp[] }) {
     <>
       {process.env.MSW_BANNER ? <MswBanner disableButton /> : null}
       <PageContainer>
-        <div className="flex items-center gap-2 border-b border-r p-3 border-secondary">
+        <div className="border-secondary flex items-center gap-2 border-r border-b p-3">
           <Block className="h-8 w-8" />
           <Block className="h-4 w-24" />
         </div>
-        <div className="flex items-center justify-between gap-2 border-b p-3 border-secondary">
+        <div className="border-secondary flex items-center justify-between gap-2 border-b p-3">
           <Block className="h-4 w-24" />
           <div className="flex items-center gap-2">
             <Block className="h-6 w-16" />
             <Block className="h-6 w-32" />
           </div>
         </div>
-        <div className="border-r p-4 border-secondary">
+        <div className="border-secondary border-r p-4">
           <Block className="mb-10 h-4 w-full" />
           <div className="mb-6 space-y-2">
             <Block className="h-4 w-32" />