chore: update tailwindcss to v4

apps/website/app/global.css

@@ -1,6 +1,24 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@config '../tailwind.config.ts';
+
+/*
+  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);
+  }
+}
 
 html {
   font-size: 14px;

apps/website/app/ui/page.tsx

@@ -24,7 +24,7 @@ import {
 
 export default function UI() {
   return (
-    <main className="lg:max-w-screen-lg 2xl:max-w-screen-xl px-5 sm:px-10 lg:px-5 mx-auto my-10 overflow-auto relative">
+    <main className="lg:max-w-(--breakpoint-lg) 2xl:max-w-(--breakpoint-xl) px-5 sm:px-10 lg:px-5 mx-auto my-10 overflow-auto relative">
       <Sidenav />
       <div className="space-y-8 mb-20">
         <HeroSection />

apps/website/package.json

@@ -23,15 +23,15 @@
     "@swapr-ui/eslint-config": "workspace:*",
     "@swapr-ui/typescript-config": "workspace:*",
     "@swapr/ui": "workspace:*",
+    "@tailwindcss/postcss": "^4.1.3",
     "@types/eslint": "^8.56.5",
     "@types/node": "latest",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
-    "autoprefixer": "latest",
     "eslint": "^8.57.0",
     "eslint-config-next": "^14.2.25",
     "postcss": "latest",
-    "tailwindcss": "3.4.7",
+    "tailwindcss": "^4.1.3",
     "typescript": "^5.3.3"
   }
 }

apps/website/postcss.config.js

@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 }

packages/ui/package.json

@@ -18,7 +18,7 @@
   "scripts": {
     "build": "rollup -c && bun run build:tailwind",
     "build:storybook": "bun run build && storybook build",
-    "build:tailwind": "npx tailwindcss -i ./src/global.css",
+    "build:tailwind": "npx @tailwindcss/cli -i ./src/global.css",
     "lint": "eslint . --max-warnings 5",
     "storybook": "bun run build:tailwind && storybook dev -p 6006",
     "clean": "npx rimraf node_modules && npx rimraf dist && npx rimraf storybook-static && npx rimraf .turbo && npx rimraf src/tailwind.css",
@@ -53,6 +53,7 @@
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-tooltip": "^1.1.1",
+    "autoprefixer": "^10.4.21",
     "class-variance-authority": "^0.7.0",
     "sonner": "^1.4.41",
     "tailwind-merge": "^2.2.2"
@@ -72,9 +73,9 @@
     "@svgr/rollup": "^8.1.0",
     "@swapr-ui/eslint-config": "workspace:*",
     "@swapr-ui/typescript-config": "workspace:*",
+    "@tailwindcss/postcss": "^4.1.3",
     "@types/eslint": "^8.56.5",
     "@types/react": "^18.0.15",
-    "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
     "postcss-loader": "^8.1.1",
     "rollup": "^2.60.0",
@@ -85,12 +86,12 @@
     "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-typescript2": "^0.36.0",
     "storybook": "^8.0.5",
-    "tailwindcss": "^3.4.1",
+    "tailwindcss": "^4.1.3",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
     "typescript": "^5.3.3"
   },
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   }
-}
+}

packages/ui/postcss.config.js

@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    "@tailwindcss/postcss": {},
   },
 };

packages/ui/rollup.config.js

@@ -76,10 +76,7 @@ export default [
     input: resolve("./src/global.css"),
     plugins: [
       postcss({
-        plugins: [
-          tailwindcss({ config: "./tailwind.config.ts" }),
-          autoprefixer,
-        ],
+        plugins: [autoprefixer],
         extract: "styles.css",
       }),
     ],

packages/ui/src/components/Button/styles.ts

@@ -3,7 +3,7 @@ import { cva } from "class-variance-authority";
 export const buttonStyles = cva(
   [
     "flex items-center justify-center h-fit",
-    "select-none font-semibold text-nowrap outline-none",
+    "select-none font-semibold text-nowrap outline-hidden",
     "disabled:cursor-not-allowed disabled:ring-0 disabled:text-text-base-em",
     "focus:ring-[3px]",
     "active:ring-[3px]",

packages/ui/src/components/ChipButton/ChipButton.tsx

@@ -8,7 +8,7 @@ export const chipButtonStyles = cva(
     "select-none font-medium rounded-100 text-nowrap",
     "disabled:text-text-base-em disabled:cursor-not-allowed disabled:ring-0 disabled:shadow-none disabled:bg-surface-disabled-low-em disabled:border-0",
     "hover:bg-surface-surface-2",
-    "focus:outline-none",
+    "focus:outline-hidden",
   ],
   {
     variants: {

packages/ui/src/components/Dialog/Dialog.tsx

@@ -29,7 +29,7 @@ const DialogOverlay = forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={twMerge(
-      "fixed inset-0 z-50 bg-black-12 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-black-12 backdrop-blur-xs data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}

packages/ui/src/components/IconButton/IconButton.tsx

@@ -43,7 +43,7 @@ export const IconButton = forwardRef(
       {...props}
       ref={ref}
     >
-      <Icon size={iconSize[size]} name={name} className="flex-shrink-0" />
+      <Icon size={iconSize[size]} name={name} className="shrink-0" />
     </Button>
   )
 );

packages/ui/src/components/Input/Input.tsx

@@ -7,8 +7,8 @@ const inputStyles = cva(
   [
     "flex w-full items-center text-text-high-em",
     "border-outline-med-em",
-    "group-has-[:disabled]:cursor-not-allowed group-has-[:disabled]:text-text-disabled group-has-[:disabled]:bg-surface-surface-1 group-has-[:disabled]:shadow-none group-has-[:disabled]:border-transparent",
-    "group-has-[:invalid]:shadow-focus-danger",
+    "group-has-disabled:cursor-not-allowed group-has-disabled:text-text-disabled group-has-disabled:bg-surface-surface-1 group-has-disabled:shadow-none group-has-disabled:border-transparent",
+    "group-has-invalid:shadow-focus-danger",
   ],
   {
     variants: {
@@ -36,7 +36,7 @@ const inputStyles = cva(
 );
 
 const inputFieldStyles = cva(
-  ["bg-[inherit] group-has-[:disabled]:placeholder:text-text-base-em"],
+  ["bg-inherit group-has-disabled:placeholder:text-text-base-em"],
   {
     variants: {
       variant: {
@@ -97,7 +97,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           <LabelPrimitive.Root
             className={cx([
               "text-sm text-text-low-em",
-              "group-has-[:disabled]:text-text-base-em",
+              "group-has-disabled:text-text-base-em",
             ])}
             htmlFor={id}
           >
@@ -138,12 +138,12 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           <div
             className={cx([
               "flex space-x-1 mt-2",
-              "group-has-[:disabled]:text-text-base-em",
-              "group-has-[:invalid]:text-text-danger-high-em",
+              "group-has-disabled:text-text-base-em",
+              "group-has-invalid:text-text-danger-high-em",
             ])}
           >
             <Icon size={14} name="info-fill" />
-            <p className="text-sm text-text-med-em group-has-[:disabled]:text-text-base-em">
+            <p className="text-sm text-text-med-em group-has-disabled:text-text-base-em">
               {message}
             </p>
           </div>
@@ -162,7 +162,7 @@ const InputField = forwardRef<
   return (
     <input
       className={cx(
-        "focus:outline-none bg-transparent w-full disabled:cursor-not-allowed disabled:text-text-low-em",
+        "focus:outline-hidden bg-transparent w-full disabled:cursor-not-allowed disabled:text-text-low-em",
         className
       )}
       ref={ref}

packages/ui/src/components/LogoPair/LogoPair.tsx

@@ -19,27 +19,27 @@ export const logoPairStyles = cva(["flex items-center w-fit h-fit relative"], {
     {
       size: "xl",
       variant: "highlight",
-      class: ["!mr-3"],
+      class: ["mr-3!"],
     },
     {
       size: "lg",
       variant: "highlight",
-      class: ["!mr-2"],
+      class: ["mr-2!"],
     },
     {
       size: "md",
       variant: "highlight",
-      class: ["!mr-2"],
+      class: ["mr-2!"],
     },
     {
       size: "sm",
       variant: "highlight",
-      class: ["!mr-2"],
+      class: ["mr-2!"],
     },
     {
       size: "xs",
       variant: "highlight",
-      class: ["!mr-2"],
+      class: ["mr-2!"],
     },
   ],
   defaultVariants: {

packages/ui/src/components/ToggleGroup/ToggleGroup.tsx

@@ -10,7 +10,7 @@ import { twMerge } from "@/utils";
 export const toggleOptionStyles = cva(
   [
     "flex items-center py-2 font-medium leading-5 rounded-12",
-    "outline-none cursor-pointer",
+    "outline-hidden cursor-pointer",
   ],
   {
     variants: {

packages/ui/src/global.css

@@ -1,10 +1,30 @@
-html {
-  font-size: 14px;
-  line-height: 24px;
-}
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
 
 @import url("colors.css");
+
+@config '../tailwind.config.ts';
+
+/*
+  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);
+  }
+}
+
+@layer base {
+  html {
+    font-size: 14px;
+    line-height: 24px;
+  }
+}