chore: upgrade tailwind to v4

package.json

@@ -54,12 +54,13 @@
     "react18-json-view": "^0.2.9",
     "rxjs": "^7.8.1",
     "save-as": "^0.1.8",
-    "tailwind-merge": "^2.6.0",
+    "tailwind-merge": "^3.2.0",
     "tailwindcss-animate": "^1.0.7",
     "uuid": "^11.1.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.25.1",
+    "@tailwindcss/vite": "^4.1.4",
     "@types/node": "^22.15.2",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
@@ -67,14 +68,12 @@
     "@types/uuid": "^10.0.0",
     "@vitejs/plugin-react": "^4.4.1",
     "@walletconnect/types": "^2.20.0",
-    "autoprefixer": "^10.4.21",
     "eslint": "^9.25.1",
     "eslint-plugin-react-hooks": "5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
     "globals": "^16.0.0",
-    "postcss": "^8.5.3",
     "prettier": "^3.5.3",
-    "tailwindcss": "^3.4.15",
+    "tailwindcss": "^4.1.4",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.31.0",
     "vite": "^6.3.3"

postcss.config.js

@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}

src/App.tsx

@@ -13,7 +13,7 @@ export default function App() {
     <div className="w-full h-screen bg-background flex flex-col">
       <Header />
       <div className="flex-1 overflow-auto relative">
-        <div className="max-w-screen-lg m-auto">
+        <div className="max-w-(--breakpoint-lg) m-auto">
           <Routes>
             <Route path="explorer/*" element={<Explorer />} />
             <Route path="extrinsics/*" element={<Extrinsics />} />

src/codec-components/EditCodec/CAccountId.tsx

@@ -107,7 +107,7 @@ export const CAccountId: EditAccountId = ({ value, onValueChanged }) => {
           ) : (
             <span className="opacity-80">Select…</span>
           )}
-          <ChevronsUpDown size={14} className="opacity-50 flex-shrink-0" />
+          <ChevronsUpDown size={14} className="opacity-50 shrink-0" />
         </Button>
       </PopoverTrigger>
       <PopoverContent className="w-64 p-0">
@@ -181,7 +181,7 @@ const AccountOption: FC<{
       <Check
         size={12}
         className={cn(
-          "ml-auto flex-shrink-0",
+          "ml-auto shrink-0",
           selected ? "opacity-100" : "opacity-0",
         )}
       />

src/codec-components/EditCodec/CEthAccount.tsx

@@ -110,7 +110,7 @@ export const CEthAccount: EditEthAccount = ({ value, onValueChanged }) => {
           ) : (
             <span className="opacity-80">Select…</span>
           )}
-          <ChevronsUpDown size={14} className="opacity-50 flex-shrink-0" />
+          <ChevronsUpDown size={14} className="opacity-50 shrink-0" />
         </Button>
       </PopoverTrigger>
       <PopoverContent className="w-64 p-0">
@@ -183,7 +183,7 @@ const AccountOption: FC<{
       <Check
         size={12}
         className={cn(
-          "ml-auto flex-shrink-0",
+          "ml-auto shrink-0",
           selected ? "opacity-100" : "opacity-0",
         )}
       />

src/codec-components/EditCodec/CStr.tsx

@@ -6,7 +6,7 @@ export const CStr: EditStr = ({ value, onValueChanged }) => {
   return (
     <div>
       <input
-        className="bg-gray-700 border-none hover:border-none outline-none text-right min-w-96"
+        className="bg-gray-700 border-none hover:border-none outline-hidden text-right min-w-96"
         value={withDefault(value, "")}
         onChange={(evt) => {
           onValueChanged(evt.target.value)

src/codec-components/EditCodec/Tree/CEnum.tsx

@@ -25,7 +25,7 @@ export const CEnum: EditEnum = ({
 }) => {
   const pathId = useContext(PathsRoot)
   const className =
-    "text-slate-500 hover:text-polkadot-500 cursor-pointer whitespace-nowrap [&:not(:first-child)]:ml-1"
+    "text-slate-500 hover:text-polkadot-500 cursor-pointer whitespace-nowrap not-first:ml-1"
 
   const titleContainer = useContext(TitleContext)
   const titleElement = useAppendTitle(titleContainer, className)

src/codec-components/EditCodec/Tree/codec-components.tsx

@@ -153,7 +153,7 @@ export const ItemTitle: FC<
       >
         <span
           className={twMerge(
-            "hover:text-primary flex-shrink-0 flex items-center",
+            "hover:text-primary shrink-0 flex items-center",
             onNavigate && "cursor-pointer",
           )}
           onClick={onNavigate}

src/codec-components/LookupTypeEdit/FocusPath.tsx

@@ -13,7 +13,7 @@ export const FocusPath: FC<{
   const breadcrumbs = getBreadcrumbs(metadata, typeId, value ?? [], onFocus)
 
   return (
-    <div className="flex-shrink-0 px-2">
+    <div className="shrink-0 px-2">
       <div className="flex max-w-full flex-wrap gap-1 items-center border border-treeBorder text-sm px-2 py-1">
         {breadcrumbs.map((v, i) => (
           <span key={i} className="whitespace-nowrap flex gap-1 items-center">

src/codec-components/ViewCodec/CBytes.tsx

@@ -6,7 +6,7 @@ export const CBytes: ViewBytes = ({ value, encodedValue }) => {
   useReportBinary(encodedValue)
 
   return (
-    <div className="min-w-80 border-none p-0 outline-none bg-transparent flex-1 overflow-hidden text-ellipsis">
+    <div className="min-w-80 border-none p-0 outline-hidden bg-transparent flex-1 overflow-hidden text-ellipsis">
       {bytesToString(value)}
     </div>
   )

src/components/AccountIdDisplay.tsx

@@ -19,7 +19,7 @@ export const AccountIdDisplay: FC<{
   return (
     <div className={twMerge("flex items-center gap-2", className)}>
       <PolkadotIdenticon
-        className="flex-shrink-0"
+        className="shrink-0"
         publicKey={getPublicKey(value)}
         size={28}
       />

src/components/BinaryEditButton.tsx

@@ -168,7 +168,7 @@ const BinaryEditModalContent: FC<
         <textarea
           className={twMerge(
             "bg-white rounded w-full min-h-20 text-slate-950 p-1 tabular-nums border-2",
-            !isValid && "border-red-600 outline-none",
+            !isValid && "border-red-600 outline-hidden",
           )}
           value={textareaValue}
           onChange={(e) => setInputValue(e.target.value)}

src/components/BinaryInput.tsx

@@ -64,7 +64,7 @@ export const BinaryInput: React.FC<{
         setLocalInput(v)
       }}
       placeholder={placeholder}
-      className="min-w-80 border-none p-0 outline-none bg-transparent flex-1"
+      className="min-w-80 border-none p-0 outline-hidden bg-transparent flex-1"
       warn={warn}
       error={uploadError}
     >

src/components/Modal.tsx

@@ -127,11 +127,11 @@ const ModalContent: FC<
   }>
 > = ({ title, onClose, children, className }) => (
   <>
-    <div className="px-2 py-1 border-b flex overflow-hidden min-w-[10rem] flex-shrink-0">
+    <div className="px-2 py-1 border-b flex overflow-hidden min-w-[10rem] shrink-0">
       <div className="flex-1 flex font-bold">{title}</div>
       <button
         type="button"
-        className="flex-shrink-0 text-card-foreground/70 "
+        className="shrink-0 text-card-foreground/70 "
         onClick={onClose}
       >
         <XSquare />

src/components/ui/button.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {

src/components/ui/command.tsx

@@ -44,7 +44,7 @@ const CommandInput = React.forwardRef<
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
-        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       {...props}
@@ -117,7 +117,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50",
+      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50",
       forceSvgSize &&
         "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
       className,

src/components/ui/dialog.tsx

@@ -42,7 +42,7 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>

src/components/ui/popover.tsx

@@ -17,7 +17,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 w-72 rounded-md border border-neutral-200 bg-white p-4 text-neutral-950 shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
+        "z-50 w-72 rounded-md border border-neutral-200 bg-white p-4 text-neutral-950 shadow-md outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
         className,
       )}
       {...props}

src/components/ui/radio-group.tsx

@@ -26,7 +26,7 @@ const RadioGroupItem = React.forwardRef<
     <RadioGroupPrimitive.Item
       ref={ref}
       className={cn(
-        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       {...props}

src/components/ui/select.tsx

@@ -17,7 +17,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       className,
     )}
     {...props}
@@ -117,7 +117,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
       className,
     )}
     {...props}

src/components/ui/tabs.tsx

@@ -27,9 +27,9 @@ export const TabsTrigger: React.FC<DivProps & { active?: boolean }> = ({
   <div
     {...props}
     className={cn(
-      "cursor-pointer inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+      "cursor-pointer inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
       "border border-primary/50",
-      active ? "bg-primary/50 text-foreground shadow-sm" : "",
+      active ? "bg-primary/50 text-foreground shadow-xs" : "",
       className,
     )}
   >

src/index.css

@@ -1,39 +1,59 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
 
-input,
-dialog {
-  @apply bg-transparent;
+@config '../tailwind.config.js';
+
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
 }
 
-.karla-400 {
-  font-family: "Karla", sans-serif;
-  font-optical-sizing: auto;
-  font-weight: 400;
-  font-style: normal;
-}
+@layer utilities {
+  input,
+  dialog {
+    @apply bg-transparent;
+  }
 
-.poppins-extralight {
-  font-family: "Poppins", sans-serif;
-  font-weight: 200;
-  font-style: normal;
-}
+  .karla-400 {
+    font-family: 'Karla', sans-serif;
+    font-optical-sizing: auto;
+    font-weight: 400;
+    font-style: normal;
+  }
 
-.poppins-regular {
-  font-family: "Poppins", sans-serif;
-  font-weight: 400;
-  font-style: normal;
-}
+  .poppins-extralight {
+    font-family: 'Poppins', sans-serif;
+    font-weight: 200;
+    font-style: normal;
+  }
 
-.visible_when_parent_hover {
-  opacity: 0;
-  pointer-events: none;
-  transition: 0.2s opacity;
-}
-*:hover > .visible_when_parent_hover {
-  opacity: 1;
-  pointer-events: all;
+  .poppins-regular {
+    font-family: 'Poppins', sans-serif;
+    font-weight: 400;
+    font-style: normal;
+  }
+
+  .visible_when_parent_hover {
+    opacity: 0;
+    pointer-events: none;
+    transition: 0.2s opacity;
+  }
+  *:hover > .visible_when_parent_hover {
+    opacity: 1;
+    pointer-events: all;
+  }
 }
 
 @layer base {

src/pages/Explorer/Detail/BlockBody.tsx

@@ -88,7 +88,7 @@ export const BlockBody: FC<{
         value={effectiveTab}
         onValueChange={(t) => setSelectedTab(t as any)}
       >
-        <Tabs.List className="flex-shrink-0 flex border-b border-polkadot-200">
+        <Tabs.List className="shrink-0 flex border-b border-polkadot-200">
           <Tabs.Trigger
             className={twMerge(
               "bg-secondary text-secondary-foreground/80 px-4 py-2 hover:text-polkadot-500 border-t border-x rounded-tl border-polkadot-200",

src/pages/Extrinsics/Extrinsics.tsx

@@ -71,7 +71,7 @@ export const Extrinsics = withSubscribe(
         className={twMerge(
           "flex flex-col overflow-hidden gap-2 p-4 pb-0",
           // Bypassing top-level scroll area, since we need a specific scroll area for the tree view
-          "absolute w-full h-full max-w-screen-lg",
+          "absolute w-full h-full max-w-(--breakpoint-lg)",
         )}
       >
         <BinaryDisplay

src/pages/Header.tsx

@@ -5,8 +5,8 @@ import { twMerge } from "tailwind-merge"
 import { NetworkSwitcher } from "./Network/Network"
 
 export const Header = () => (
-  <div className="flex-shrink-0 border-b">
-    <div className="flex p-4 pb-2 items-center gap-2 max-w-screen-lg m-auto">
+  <div className="shrink-0 border-b">
+    <div className="flex p-4 pb-2 items-center gap-2 max-w-(--breakpoint-lg) m-auto">
       <div className="flex flex-1 items-center flex-row gap-2 relative">
         <img
           className="w-14 min-w-14 hidden dark:inline-block"
@@ -47,7 +47,7 @@ const NavLink: FC<PropsWithChildren<{ to: string }>> = ({ to, children }) => {
       to={to}
       className={twMerge(
         "transition-colors text-foreground/75 hover:text-foreground cursor-pointer px-3 py-1 rounded",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
         active && "text-foreground font-bold",
       )}
     >

src/pages/Network/Network.tsx

@@ -80,7 +80,7 @@ const Empty: React.FC<{
     }
   }, [enteredText, isValid])
   return isValid ? (
-    <div className="relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50">
+    <div className="relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50">
       <Check className="mr-2 h-4 w-4 opacity-100" />
       {enteredText}
     </div>

src/pages/RuntimeCalls/RuntimeCallResults.tsx

@@ -41,7 +41,7 @@ const RuntimeCallResultBox: FC<{ subscription: string }> = ({
         <h3 className="overflow-hidden text-ellipsis whitespace-nowrap">
           {runtimeCallResult.name}
         </h3>
-        <div className="flex items-center flex-shrink-0 gap-2">
+        <div className="flex items-center shrink-0 gap-2">
           <ButtonGroup
             value={mode}
             onValueChange={setMode as any}

src/pages/Storage/StorageQuery.tsx

@@ -314,7 +314,7 @@ const KeyDisplay: FC = () => {
 
   return (
     <div className="flex w-full overflow-hidden border border-card-foreground/60 px-3 p-2 gap-2 items-center bg-card text-card-foreground">
-      <div className="flex-shrink-0 text-sm font-bold">Encoded key:</div>
+      <div className="shrink-0 text-sm font-bold">Encoded key:</div>
       <div
         className={twMerge(
           "flex-1 overflow-hidden whitespace-nowrap text-ellipsis text-sm tabular-nums",

src/pages/Storage/StorageSubscriptions.tsx

@@ -55,7 +55,7 @@ const StorageSubscriptionBox: FC<{ subscription: string }> = ({
         <h3 className="overflow-hidden text-ellipsis whitespace-nowrap">
           {storageSubscription.name}
         </h3>
-        <div className="flex items-center flex-shrink-0 gap-2">
+        <div className="flex items-center shrink-0 gap-2">
           <ButtonGroup
             value={mode}
             onValueChange={setMode as any}

src/pages/Transactions/Transactions.tsx

@@ -28,7 +28,7 @@ export function Transactions() {
   return !nTxs ? null : (
     <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
       <Dialog.Trigger asChild>
-        <button className="fixed bottom-4 right-4 bg-primary/90 text-primary-foreground px-4 py-2 rounded-full shadow-lg hover:bg-primary hover:font-bold focus:outline-none focus:ring-2 focus:ring-ring focus:ring-opacity-50 flex items-center space-x-2">
+        <button className="fixed bottom-4 right-4 bg-primary/90 text-primary-foreground px-4 py-2 rounded-full shadow-lg hover:bg-primary hover:font-bold focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-opacity-50 flex items-center space-x-2">
           {nOngoing > 0 && (
             <>
               <Loader2 className="animate-spin" size={20} />
@@ -40,7 +40,7 @@ export function Transactions() {
       </Dialog.Trigger>
       <Dialog.Portal>
         <Dialog.Overlay className="fixed inset-0 bg-black/50" />
-        <Dialog.Content className="fixed bottom-0 border-t border-x border-border right-0 w-full sm:w-96 h-96 bg-card text-card-foreground rounded-t-xl shadow-xl focus:outline-none">
+        <Dialog.Content className="fixed bottom-0 border-t border-x border-border right-0 w-full sm:w-96 h-96 bg-card text-card-foreground rounded-t-xl shadow-xl focus:outline-hidden">
           <div className="flex justify-between items-center p-4 border-b border-border">
             <Dialog.Title className="text-lg font-semibold">
               Transactions

vite.config.ts

@@ -1,6 +1,7 @@
 import { defineConfig } from "vite"
 import react from "@vitejs/plugin-react"
 import path from "node:path"
+import tailwindcss from "@tailwindcss/vite"
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -9,5 +10,5 @@ export default defineConfig({
       "@": path.resolve(__dirname, "./src"),
     },
   },
-  plugins: [react()],
+  plugins: [react(), tailwindcss()],
 })