Tailwind v4

app/components/AttachFloatingIpModal.tsx

@@ -26,7 +26,7 @@
         {fip.description && (
           <>
             <Slash />
-            <div className="grow overflow-hidden overflow-ellipsis whitespace-pre text-left">
+            <div className="grow overflow-hidden text-ellipsis whitespace-pre text-left">
               {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-[50%] 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 @@
   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="w-full rounded border px-4 py-3 normal-case! tracking-normal! text-mono-md bg-default border-secondary">
           {children}
         </pre>
       </Modal.Section>
@@ -71,7 +71,7 @@
                 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"
               >
                 <Success12Icon className="text-accent" />
               </m.span>
@@ -108,7 +108,7 @@
         isOpen={isOpen}
         onDismiss={() => setIsOpen(false)}
       >
         <span className="mr-2 select-none text-tertiary">$</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">
+    <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-[300px] truncate align-middle">{linkText}</span>
-        <OpenLink12Icon className="absolute top-1.5 ml-2 translate-y-[1px] text-secondary" />
+        <OpenLink12Icon className="text-secondary absolute top-1.5 ml-2 translate-y-px" />
       </div>
     </div>
   </a>
@@ -53,18 +53,18 @@ export const DocsPopover = ({ heading, icon, summary, links }: DocsPopoverProps)
       </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 @@
 const GradientBackground = () => (
   <div
     // negative z-index avoids covering MSW warning banner
     className="fixed bottom-0 left-0 right-0 top-0 -z-10"
     style={{
       background:
         'radial-gradient(200% 100% at 50% 100%, var(--surface-default) 0%, #161B1D 100%)',
@@ -34,14 +34,14 @@
       <div className="relative flex w-full justify-between">
         <Link
           to="/"
           className="flex items-center p-6 text-mono-sm text-default hover:text-raise"
         >
           <PrevArrow12Icon title="Select" className="mr-2 text-secondary" />
           Back to console
         </Link>
         <SignOutButton className="mr-6 mt-4" />
       </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="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="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" />

app/components/InstanceAutoRestartPopover.tsx

@@ -112,7 +112,7 @@ export const InstanceAutoRestartPopover = ({ instance }: { instance: Instance })
                 Instance Auto-Restart
               </span>
             </span>
-            <OpenLink12Icon className="ml-1 translate-y-[1px] text-secondary" />
+            <OpenLink12Icon className="ml-1 translate-y-px text-secondary" />
           </a>
         </div>
       </PopoverPanel>
@@ -123,7 +123,7 @@ 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">
+    <div className="flex h-10 grow items-center gap-1.5 pr-2 text-sans-md">
       {children}
     </div>
   </div>

app/components/IpPoolUtilization.tsx

@@ -34,13 +34,13 @@ export function IpUtilCell(util: IpPoolUtilization) {
   return (
     <div className="flex gap-4">
       <div>
-        <Badge color="neutral" className="mr-2 !normal-case">
+        <Badge color="neutral" className="mr-2 normal-case!">
           v4
         </Badge>
         <IpUtilFrac {...ipv4} />
       </div>
       <div>
-        <Badge color="neutral" className="mr-2 !normal-case">
+        <Badge color="neutral" className="mr-2 normal-case!">
           v6
         </Badge>
         <IpUtilFrac {...ipv6} />

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 */}
-      <label className="absolute z-topBar flex h-10 w-full items-center justify-center text-sans-md text-info-secondary bg-info-secondary [&+*]:pt-10">
+      <label className="text-sans-md text-info-secondary bg-info-secondary absolute 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/RefetchIntervalPicker.tsx

@@ -65,7 +65,7 @@ export function useIntervalPicker({ enabled, isLoading, fn, className }: Props)
         </button>
         <Listbox
           selected={enabled ? intervalPreset : 'Off'}
-          className="[&_button]:!rounded-l-none"
+          className="[&_button]:rounded-l-none!"
           items={intervalItems}
           onChange={setIntervalPreset}
           disabled={!enabled}

app/components/RouteTabs.tsx

@@ -67,7 +67,7 @@ export function RouteTabs({
       </div>
 
       <div
-        className={cn('ox-tabs-panel @container', { 'ml-5 flex-grow': sideTabs })}
+        className={cn('ox-tabs-panel @container', { 'ml-5 grow': sideTabs })}
         role="tabpanel"
         tabIndex={0}
       >

app/components/Sidebar.tsx

@@ -15,15 +15,20 @@ import { openQuickActions } from '~/hooks/use-quick-actions'
 import { Button } from '~/ui/lib/Button'
 import { Truncate } from '~/ui/lib/Truncate'
 
-const linkStyles =
-  'flex h-7 items-center rounded px-2 text-sans-md hover:bg-hover [&>svg]:mr-2 [&>svg]:text-quaternary text-default'
+const linkStyles = (isActive: boolean) =>
+  cn(
+    'flex h-7 items-center rounded px-2 text-sans-md [&>svg]:mr-2',
+    isActive
+      ? 'text-accent bg-accent-secondary hover:bg-accent-secondary-hover [&>svg]:text-accent-tertiary!'
+      : '[&>svg]:text-quaternary text-default hover:bg-hover'
+  )
 
 // TODO: this probably doesn't go to the docs root. maybe it even opens a
 // menu with links to several relevant docs for the page
 export const DocsLinkItem = () => (
   <li>
     <a
-      className={linkStyles}
+      className={linkStyles(false)}
       href="https://docs.oxide.computer"
       target="_blank"
       rel="noreferrer"
@@ -43,12 +48,12 @@ const JumpToButton = () => {
       variant="ghost"
       size="sm"
       onClick={openQuickActions}
-      className="w-full !px-2"
+      className="w-full px-2!"
       // TODO: the more I use innerClassName the wronger it feels
       innerClassName="w-full justify-between text-tertiary"
     >
       <span className="flex items-center">
-        <Action16Icon className="mr-2 text-quaternary" /> Jump to
+        <Action16Icon className="text-quaternary mr-2" /> Jump to
       </span>
       <div className="text-mono-xs">{modKey}+K</div>
     </Button>
@@ -57,7 +62,7 @@ const JumpToButton = () => {
 
 export function Sidebar({ children }: { children: React.ReactNode }) {
   return (
-    <div className="flex flex-col border-r text-sans-md text-raise border-secondary">
+    <div className="text-sans-md text-raise border-secondary flex flex-col border-r">
       <div className="mx-3 mt-4">
         <JumpToButton />
       </div>
@@ -74,7 +79,7 @@ interface SidebarNav {
 Sidebar.Nav = ({ children, heading }: SidebarNav) => (
   <div className="mx-3 my-4 space-y-1">
     {heading && (
-      <div className="mb-2 text-mono-sm text-tertiary">
+      <div className="text-mono-sm text-tertiary mb-2">
         <Truncate text={heading} maxLength={24} />
       </div>
     )}
@@ -109,10 +114,8 @@ export const NavLinkItem = ({
     <li>
       <Link
         to={to}
-        className={cn(linkStyles, {
-          'text-accent !bg-accent-secondary hover:!bg-accent-secondary-hover [&>svg]:!text-accent-tertiary':
-            isActive || currentPathIsCreateForm,
-          'pointer-events-none text-disabled': disabled,
+        className={cn(linkStyles(isActive || currentPathIsCreateForm), {
+          'text-disabled pointer-events-none': disabled,
         })}
         aria-current={isActive ? 'page' : undefined}
       >

app/components/TimeSeriesChart.tsx

@@ -150,12 +150,12 @@ const SkeletonMetric = ({
     >
       <div className="flex h-full flex-col justify-between">
         {[...Array(4)].map((_e, i) => (
-          <div key={i} className="h-px w-full bg-[--stroke-secondary]" />
+          <div key={i} className="h-px w-full bg-(--stroke-secondary)" />
         ))}
       </div>
       <div className="flex justify-between">
         {[...Array(8)].map((_e, i) => (
-          <div key={i} className="h-1.5 w-px bg-[--stroke-secondary]" />
+          <div key={i} className="h-1.5 w-px bg-(--stroke-secondary)" />
         ))}
       </div>
     </div>

app/components/ToastStack.tsx

@@ -16,7 +16,7 @@ export function ToastStack() {
 
   return (
     <div
-      className="pointer-events-auto fixed bottom-4 left-4 z-toast flex flex-col items-end space-y-2"
+      className="pointer-events-auto fixed bottom-4 left-4 z-(--z-toast) flex flex-col items-end space-y-2"
       data-testid="Toasts"
     >
       <AnimatePresence>

app/components/TopBar.tsx

@@ -136,7 +136,7 @@ function UserMenu() {
         <div
           className={cn(
             buttonStyle({ size: 'sm', variant: 'ghost' }),
-            'flex items-center gap-1.5 !px-2 !border-secondary'
+            'flex items-center gap-1.5 px-2! border-secondary!'
           )}
         >
           <Profile16Icon className="text-tertiary" />
@@ -183,10 +183,10 @@ function SystemSiloItem(props: { label: string; to: string; isSelected: boolean
   return (
     <DropdownMenu.LinkItem
       to={props.to}
-      className={cn('!pr-3', { 'is-selected': props.isSelected })}
+      className={cn('pr-3!', { 'is-selected': props.isSelected })}
     >
       <div className="flex w-full items-center gap-2">
-        <div className="flex-grow">{props.label}</div>
+        <div className="grow">{props.label}</div>
         {props.isSelected && <Success12Icon className="block" />}
       </div>
     </DropdownMenu.LinkItem>

app/components/form/Form.tsx

@@ -52,12 +52,7 @@ export const Form = {
     invariant(submit, 'Form.Actions must contain a Form.Submit component')
 
     return (
-      <div
-        className={cn(
-          'flex w-full items-center gap-[0.625rem] children:shrink-0',
-          className
-        )}
-      >
+      <div className={cn('flex w-full items-center gap-2.5 *:shrink-0', className)}>
         {cloneElement(submit, {
           form: formId,
           disabled: !!submitDisabled,
@@ -66,7 +61,7 @@ export const Form = {
         })}
         {childArray}
         {error && (
-          <div className="flex !shrink grow items-start justify-end text-mono-sm text-error 2xl+:justify-start">
+          <div className="text-mono-sm text-error 1400:justify-start flex shrink! grow items-start justify-end">
             <Error12Icon className="mx-2 mt-0.5 shrink-0" />
             <span>{error.message}</span>
           </div>

app/components/form/fields/DateTimeRangePicker.tsx

@@ -122,7 +122,7 @@ export function DateTimeRangePicker({
   return (
     <form className="flex">
       <Listbox
-        className="z-10 w-[10rem] [&_button]:!rounded-r-none [&_button]:!border-r-0"
+        className="z-10 w-40 [&_button]:rounded-r-none! [&_button]:border-r-0!"
         name="preset"
         selected={preset}
         aria-label="Choose a time range preset"
@@ -146,7 +146,7 @@ export function DateTimeRangePicker({
           minValue={minValue}
           maxValue={maxValue}
           hideTimeZone
-          className="[&_.rounded-l]:!rounded-l-none"
+          className="[&_.rounded-l]:rounded-l-none!"
         />
       </div>
     </form>