From 45066a009589ec64362e5f449491e18e1e808bf5 Mon Sep 17 00:00:00 2001 From: gearnode Date: Sun, 2 Mar 2025 09:24:05 +0100 Subject: [PATCH] Upgrade from tailwind v3 to v4 Signed-off-by: gearnode --- apps/console/package.json | 3 +- apps/console/scripts/esbuild.mjs | 5 +- apps/console/src/App.css | 68 +- apps/console/src/components/NavUser.tsx | 2 +- .../src/components/OrganizationSwitcher.tsx | 2 +- apps/console/src/components/ui/badge.tsx | 6 +- apps/console/src/components/ui/button.tsx | 10 +- apps/console/src/components/ui/card.tsx | 2 +- apps/console/src/components/ui/checkbox.tsx | 2 +- apps/console/src/components/ui/dialog.tsx | 4 +- .../src/components/ui/dropdown-menu.tsx | 8 +- apps/console/src/components/ui/input.tsx | 2 +- .../console/src/components/ui/radio-group.tsx | 2 +- apps/console/src/components/ui/select.tsx | 4 +- apps/console/src/components/ui/sheet.tsx | 2 +- apps/console/src/components/ui/sidebar.tsx | 44 +- apps/console/src/components/ui/textarea.tsx | 2 +- apps/console/src/components/ui/toast.tsx | 8 +- apps/console/src/layouts/AuthLayout.tsx | 2 +- .../console/src/pages/ControlOverviewPage.tsx | 4 +- apps/console/src/pages/ErrorPage.tsx | 2 +- apps/console/src/pages/PeopleListPage.tsx | 2 +- apps/console/src/pages/SettingsPage.tsx | 8 +- apps/console/src/pages/VendorListPage.tsx | 2 +- apps/console/tailwind.config.ts | 62 - package-lock.json | 1354 +++++++---------- 26 files changed, 695 insertions(+), 917 deletions(-) delete mode 100644 apps/console/tailwind.config.ts diff --git a/apps/console/package.json b/apps/console/package.json index b38684b80..c9f61d3ab 100644 --- a/apps/console/package.json +++ b/apps/console/package.json @@ -45,6 +45,7 @@ "@deanc/esbuild-plugin-postcss": "^1.0.2", "@eslint/js": "^9.21.0", "@probo/tsconfig": "^0.0.1", + "@tailwindcss/postcss": "^4.0.9", "@types/babel-core": "^6.25.10", "@types/node": "^22.13.0", "@types/react": "^18.3.18", @@ -58,7 +59,7 @@ "eslint-plugin-react": "^7.37.4", "globals": "^16.0.0", "relay-compiler": "^18.2.0", - "tailwindcss": "^3.4.17", + "tailwindcss": "^4.0.9", "typescript": "^5.7.3", "typescript-eslint": "^8.25.0" }, diff --git a/apps/console/scripts/esbuild.mjs b/apps/console/scripts/esbuild.mjs index 60c4ad852..a3611d82b 100644 --- a/apps/console/scripts/esbuild.mjs +++ b/apps/console/scripts/esbuild.mjs @@ -6,7 +6,8 @@ import * as esbuild from "esbuild"; import fs from "node:fs/promises"; import http from "node:http"; import path from "node:path"; -import tailwindcss from "tailwindcss"; +import tailwindcssPlugin from "@tailwindcss/postcss"; + async function copyRecursive(src, dest) { await fs.mkdir(dest, { recursive: true }); @@ -147,7 +148,7 @@ const defaultOptions = { relayPlugin, hotReloading, postCssPlugin({ - plugins: [tailwindcss(), autoprefixer()], + plugins: [tailwindcssPlugin(), autoprefixer()], }), ], define: { diff --git a/apps/console/src/App.css b/apps/console/src/App.css index a4f06b80f..697db477c 100644 --- a/apps/console/src/App.css +++ b/apps/console/src/App.css @@ -1,6 +1,68 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; +@import 'tailwindcss'; + +@plugin 'tailwindcss-animate'; + +@custom-variant dark (&:is(.dark *)); + +@theme { + --color-border: hsl(var(--border)); + --color-input: hsl(var(--input)); + --color-ring: hsl(var(--ring)); + --color-background: hsl(var(--background)); + --color-foreground: hsl(var(--foreground)); + + --color-primary: hsl(var(--primary)); + --color-primary-foreground: hsl(var(--primary-foreground)); + + --color-secondary: hsl(var(--secondary)); + --color-secondary-foreground: hsl(var(--secondary-foreground)); + + --color-destructive: hsl(var(--destructive)); + --color-destructive-foreground: hsl(var(--destructive-foreground)); + + --color-muted: hsl(var(--muted)); + --color-muted-foreground: hsl(var(--muted-foreground)); + + --color-accent: hsl(var(--accent)); + --color-accent-foreground: hsl(var(--accent-foreground)); + + --color-popover: hsl(var(--popover)); + --color-popover-foreground: hsl(var(--popover-foreground)); + + --color-card: hsl(var(--card)); + --color-card-foreground: hsl(var(--card-foreground)); + + --color-sidebar: hsl(var(--sidebar-background)); + --color-sidebar-foreground: hsl(var(--sidebar-foreground)); + --color-sidebar-primary: hsl(var(--sidebar-primary)); + --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground)); + --color-sidebar-accent: hsl(var(--sidebar-accent)); + --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground)); + --color-sidebar-border: hsl(var(--sidebar-border)); + --color-sidebar-ring: hsl(var(--sidebar-ring)); + + --radius-lg: `var(--radius) `; + --radius-md: `calc(var(--radius) - 2px) `; + --radius-sm: calc(var(--radius) - 4px); +} + +/* + 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 { :root { diff --git a/apps/console/src/components/NavUser.tsx b/apps/console/src/components/NavUser.tsx index 65acf9584..e4d78046d 100644 --- a/apps/console/src/components/NavUser.tsx +++ b/apps/console/src/components/NavUser.tsx @@ -95,7 +95,7 @@ export function NavUser({ viewer }: { viewer: NavUser_viewer$key }) { {children} - + Close diff --git a/apps/console/src/components/ui/dropdown-menu.tsx b/apps/console/src/components/ui/dropdown-menu.tsx index 16dbc4db4..4dcea3cdb 100644 --- a/apps/console/src/components/ui/dropdown-menu.tsx +++ b/apps/console/src/components/ui/dropdown-menu.tsx @@ -27,7 +27,7 @@ const DropdownMenuSubTrigger = React.forwardRef< svg]:size-4 [&>svg]:shrink-0", + "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0", inset && "pl-8", className, )} @@ -100,7 +100,7 @@ const DropdownMenuCheckboxItem = React.forwardRef< >( - + Close diff --git a/apps/console/src/components/ui/sidebar.tsx b/apps/console/src/components/ui/sidebar.tsx index a7eda2956..90274ad49 100644 --- a/apps/console/src/components/ui/sidebar.tsx +++ b/apps/console/src/components/ui/sidebar.tsx @@ -147,7 +147,7 @@ const SidebarProvider = React.forwardRef< } as React.CSSProperties } className={cn( - "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar", + "group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar", className, )} ref={ref} @@ -187,7 +187,7 @@ const Sidebar = React.forwardRef< return (