Skip to content

chore: upgrade to tailwind 4 #19247

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
chore: upgrade to tailwind 4
  • Loading branch information
aslilac committed Aug 7, 2025
commit 989020f7df071b5ca624267b69e744db61db6908
11 changes: 7 additions & 4 deletions site/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,7 @@
"@swc/core": "1.3.38",
"@swc/jest": "0.2.37",
"@tailwindcss/typography": "0.5.16",
"@tailwindcss/vite": "4.1.11",
"@testing-library/jest-dom": "6.6.3",
"@testing-library/react": "14.3.1",
"@testing-library/user-event": "14.6.1",
Expand All @@ -164,7 +165,6 @@
"@types/ua-parser-js": "0.7.36",
"@types/uuid": "9.0.2",
"@vitejs/plugin-react": "4.5.0",
"autoprefixer": "10.4.20",
"chromatic": "11.25.2",
"dpdm": "3.14.0",
"express": "4.21.2",
Expand All @@ -177,21 +177,24 @@
"jest_workaround": "0.1.14",
"knip": "5.51.0",
"msw": "2.4.8",
"postcss": "8.5.1",
"protobufjs": "7.4.0",
"rollup-plugin-visualizer": "5.14.0",
"rxjs": "7.8.1",
"ssh2": "1.16.0",
"storybook": "8.5.3",
"storybook-addon-remix-react-router": "3.1.0",
"tailwindcss": "3.4.17",
"tailwindcss": "4.1.11",
"ts-proto": "1.164.0",
"typescript": "5.6.3",
"vite": "6.3.5",
"vite-plugin-checker": "0.9.3",
"vite-plugin-turbosnap": "1.0.3"
},
"browserslist": ["chrome 110", "firefox 111", "safari 16.0"],
"browserslist": [
"chrome 110",
"firefox 111",
"safari 16.0"
],
"resolutions": {
"optionator": "0.9.3",
"semver": "7.6.2"
Expand Down
672 changes: 364 additions & 308 deletions site/pnpm-lock.yaml

Large diffs are not rendered by default.

6 changes: 0 additions & 6 deletions site/postcss.config.js

This file was deleted.

6 changes: 3 additions & 3 deletions site/src/components/Avatar/Avatar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,9 @@ const avatarVariants = cva(
{
variants: {
size: {
lg: "size-[--avatar-lg] rounded-[6px] text-sm font-medium",
md: "size-[--avatar-default] text-2xs",
sm: "size-[--avatar-sm] text-[8px]",
lg: "size-(--avatar-lg) rounded-[6px] text-sm font-medium",
md: "size-(--avatar-default) text-2xs",
sm: "size-(--avatar-sm) text-[8px]",
},
variant: {
default: null,
Expand Down
10 changes: 5 additions & 5 deletions site/src/components/Badge/Badge.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,13 @@ const badgeVariants = cva(
variants: {
variant: {
default:
"border-transparent bg-surface-secondary text-content-secondary shadow",
"border-transparent bg-surface-secondary text-content-secondary shadow-sm",
warning:
"border border-solid border-border-warning bg-surface-orange text-content-warning shadow",
"border border-solid border-border-warning bg-surface-orange text-content-warning shadow-sm",
destructive:
"border border-solid border-border-destructive bg-surface-red text-highlight-red shadow",
"border border-solid border-border-destructive bg-surface-red text-highlight-red shadow-sm",
green:
"border border-solid border-surface-green bg-surface-green text-highlight-green shadow",
"border border-solid border-surface-green bg-surface-green text-highlight-green shadow-sm",
},
size: {
xs: "text-2xs font-regular h-5 [&_svg]:hidden rounded px-1.5",
Expand All @@ -36,7 +36,7 @@ const badgeVariants = cva(
},
hover: {
false: null,
true: "no-underline focus:outline-none focus-visible:ring-2 focus-visible:ring-content-link",
true: "no-underline focus:outline-hidden focus-visible:ring-2 focus-visible:ring-content-link",
},
},
compoundVariants: [
Expand Down
2 changes: 1 addition & 1 deletion site/src/components/Button/Button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const buttonVariants = cva(
inline-flex items-center justify-center gap-1 whitespace-nowrap font-sans
border-solid rounded-md transition-colors
text-sm font-medium cursor-pointer no-underline
focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-content-link
focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-content-link
disabled:pointer-events-none disabled:text-content-disabled
[&:is(a):not([href])]:pointer-events-none [&:is(a):not([href])]:text-content-disabled
[&>svg]:pointer-events-none [&>svg]:shrink-0 [&>svg]:p-0.5
Expand Down
10 changes: 5 additions & 5 deletions site/src/components/Chart/Chart.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -58,14 +58,14 @@ export const ChartContainer = React.forwardRef<
"[&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50",
"[&_.recharts-curve.recharts-tooltip-cursor]:stroke-border",
"[&_.recharts-dot[stroke='#fff']]:stroke-transparent",
"[&_.recharts-layer]:outline-none",
"[&_.recharts-layer]:outline-hidden",
"[&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border",
"[&_.recharts-radial-bar-background-sector]:fill-muted",
"[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted",
"[&_.recharts-reference-line_[stroke='#ccc']]:stroke-border",
"[&_.recharts-sector[stroke='#fff']]:stroke-transparent",
"[&_.recharts-sector]:outline-none",
"[&_.recharts-surface]:outline-none",
"[&_.recharts-sector]:outline-hidden",
"[&_.recharts-surface]:outline-hidden",
"[&_.recharts-text]:fill-content-secondary [&_.recharts-text]:font-medium",
"[&_.recharts-cartesian-axis-line]:stroke-[hsl(var(--border-default))]",
className,
Expand Down Expand Up @@ -194,7 +194,7 @@ export const ChartTooltipContent = React.forwardRef<
<div
ref={ref}
className={cn(
"grid min-w-[8rem] items-start gap-1 rounded-lg border border-solid border-border bg-surface-primary px-3 py-2 text-xs shadow-xl",
"grid min-w-32 items-start gap-1 rounded-lg border border-solid border-border bg-surface-primary px-3 py-2 text-xs shadow-xl",
className,
)}
>
Expand Down Expand Up @@ -223,7 +223,7 @@ export const ChartTooltipContent = React.forwardRef<
!hideIndicator && (
<div
className={cn(
"shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
{
"h-2.5 w-2.5": indicator === "dot",
"w-1": indicator === "line",
Expand Down
2 changes: 1 addition & 1 deletion site/src/components/Checkbox/Checkbox.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export const Checkbox = React.forwardRef<
ref={ref}
className={cn(
`peer h-5 w-5 shrink-0 rounded-sm border border-border border-solid
focus-visible:outline-none focus-visible:ring-2
focus-visible:outline-hidden focus-visible:ring-2
focus-visible:ring-content-link focus-visible:ring-offset-4 focus-visible:ring-offset-surface-primary
disabled:cursor-not-allowed disabled:bg-surface-primary disabled:data-[state=checked]:bg-surface-tertiary
data-[state=unchecked]:bg-surface-primary
Expand Down
6 changes: 3 additions & 3 deletions site/src/components/Collapsible/Collapsible.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,14 +25,14 @@ const meta: Meta<typeof Collapsible> = {
</Button>
</CollapsibleTrigger>
</div>
<div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
<div className="rounded-md border px-4 py-2 font-mono text-sm shadow-xs">
@radix-ui/primitives
</div>
<CollapsibleContent className="space-y-2">
<div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
<div className="rounded-md border px-4 py-2 font-mono text-sm shadow-xs">
@radix-ui/colors
</div>
<div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
<div className="rounded-md border px-4 py-2 font-mono text-sm shadow-xs">
@stitches/react
</div>
</CollapsibleContent>
Expand Down
2 changes: 1 addition & 1 deletion site/src/components/Combobox/Combobox.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ export const Combobox: FC<ComboboxProps> = ({
<ChevronDown className="size-icon-sm text-content-secondary group-hover:text-content-primary" />
</Button>
</PopoverTrigger>
<PopoverContent className="w-[var(--radix-popover-trigger-width)]">
<PopoverContent className="w-(--radix-popover-trigger-width)">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this work? I'm still seeing the var syntax in some of the docs
https://tailwindcss.com/docs/theme#with-arbitrary-values

<Command>
<CommandInput
placeholder="Search or enter custom value"
Expand Down
4 changes: 2 additions & 2 deletions site/src/components/Command/Command.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ export const CommandInput = forwardRef<
<CommandPrimitive.Input
ref={ref}
className={cn(
`flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none border-none
`flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden border-none
placeholder:text-content-secondary
disabled:cursor-not-allowed disabled:opacity-50`,
className,
Expand Down Expand Up @@ -122,7 +122,7 @@ export const CommandItem = forwardRef<
<CommandPrimitive.Item
ref={ref}
className={cn(
`relative flex cursor-default gap-2 select-none text-content-secondary items-center rounded-sm px-2 py-2 text-sm font-medium outline-none
`relative flex cursor-default gap-2 select-none text-content-secondary items-center rounded-sm px-2 py-2 text-sm font-medium outline-hidden
data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50
data-[selected=true]:bg-surface-secondary data-[selected=true]:text-content-primary
[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0`,
Expand Down
16 changes: 8 additions & 8 deletions site/src/components/DropdownMenu/DropdownMenu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ const DropdownMenuSubTrigger = forwardRef<
ref={ref}
className={cn(
[
"flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-surface-secondary",
"flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-surface-secondary",
"data-[state=open]:bg-surface-secondary [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
inset && "pl-8",
],
Expand All @@ -61,7 +61,7 @@ const DropdownMenuSubContent = forwardRef<
ref={ref}
className={cn(
[
"z-50 min-w-[8rem] overflow-hidden rounded-md border border-solid bg-surface-primary p-1 text-content-secondary shadow-lg",
"z-50 min-w-32 overflow-hidden rounded-md border border-solid bg-surface-primary p-1 text-content-secondary shadow-lg",
"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",
Expand Down Expand Up @@ -111,10 +111,10 @@ export const DropdownMenuItem = forwardRef<
[
`
relative flex cursor-default select-none items-center gap-2 rounded-sm
px-2 py-1.5 text-sm text-content-secondary font-medium outline-none
px-2 py-1.5 text-sm text-content-secondary font-medium outline-hidden
no-underline
focus:bg-surface-secondary focus:text-content-primary
data-[disabled]:pointer-events-none data-[disabled]:opacity-50
data-disabled:pointer-events-none data-disabled:opacity-50
[&_svg]:size-icon-sm [&>svg]:shrink-0
[&_img]:size-icon-sm [&>img]:shrink-0
`,
Expand All @@ -135,8 +135,8 @@ const DropdownMenuCheckboxItem = forwardRef<
ref={ref}
className={cn(
[
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors",
"focus:bg-surface-secondary focus:text-content-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors",
"focus:bg-surface-secondary focus:text-content-primary data-disabled:pointer-events-none data-disabled:opacity-50",
],
className,
)}
Expand All @@ -162,8 +162,8 @@ const DropdownMenuRadioItem = forwardRef<
ref={ref}
className={cn(
[
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors",
"focus:bg-surface-secondary focus:text-content-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors",
"focus:bg-surface-secondary focus:text-content-primary data-disabled:pointer-events-none data-disabled:opacity-50",
],
className,
)}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ export const GlobalErrorBoundaryInner: FC<GlobalErrorBoundaryInnerProps> = ({
type ErrorStackProps = Readonly<{ error: Error | ErrorResponse }>;
const ErrorStack: FC<ErrorStackProps> = ({ error }) => {
return (
<aside className="p-4 text-left rounded-md border-[1px] border-content-tertiary border-solid">
<aside className="p-4 text-left rounded-md border border-content-tertiary border-solid">
{isRouteErrorResponse(error) ? (
<>
<h2 className="text-base font-bold text-content-primary m-0">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ export const FeatureStageBadge: FC<FeatureStageBadgeProps> = ({
<TooltipTrigger asChild>
<span
className={cn(
"block max-w-fit cursor-default flex-shrink-0 leading-none whitespace-nowrap border rounded-md transition-colors duration-200 ease-in-out bg-transparent border-solid border-transparent",
"block max-w-fit cursor-default shrink-0 leading-none whitespace-nowrap border rounded-md transition-colors duration-200 ease-in-out bg-transparent border-solid border-transparent",
sizeClasses,
colorClasses,
className,
Expand Down
2 changes: 1 addition & 1 deletion site/src/components/IconField/IconField.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ export const IconField: FC<IconFieldProps> = ({
/>
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger>
<Button variant="outline" size="lg" className="flex-shrink-0">
<Button variant="outline" size="lg" className="shrink-0">
Emoji
<ChevronDownIcon />
</Button>
Expand Down
4 changes: 2 additions & 2 deletions site/src/components/Input/Input.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,10 @@ export const Input = forwardRef<
type={type}
className={cn(
`flex h-10 w-full rounded-md border border-border border-solid bg-transparent px-3
text-base shadow-sm transition-colors
text-base shadow-xs transition-colors
file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-content-primary
placeholder:text-content-secondary
focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-content-link
focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-content-link
disabled:cursor-not-allowed disabled:opacity-50 md:text-sm text-inherit`,
className,
)}
Expand Down
4 changes: 2 additions & 2 deletions site/src/components/Link/Link.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ import { cn } from "utils/cn";

const linkVariants = cva(
`relative inline-flex items-center no-underline font-medium text-content-link hover:cursor-pointer
after:hover:content-[''] after:hover:absolute after:hover:left-0 after:hover:w-full after:hover:h-px after:hover:bg-current after:hover:bottom-px
focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-content-link
hover:after:content-[''] hover:after:absolute hover:after:left-0 hover:after:w-full hover:after:h-px hover:after:bg-current hover:after:bottom-px
focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-content-link
focus-visible:ring-offset-2 focus-visible:ring-offset-surface-primary focus-visible:rounded-sm
visited:text-content-link pl-0.5`, //pl-0.5 adjusts the underline spacing to align with the icon on the right.
{
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -492,8 +492,8 @@ export const MultiSelectCombobox = forwardRef<
<Badge
key={option.value}
className={cn(
"data-[disabled]:bg-content-disabled data-[disabled]:text-surface-tertiarydata-[disabled]:hover:bg-content-disabled",
"data-[fixed]:bg-content-disabled data-[fixed]:text-surface-tertiary data-[fixed]:hover:bg-surface-secondary",
"data-disabled:bg-content-disabled data-[disabled]:text-surface-tertiarydata-[disabled]:hover:bg-content-disabled",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like only some of them got changed. There's also some broken spaces

"data-fixed:bg-content-disabled data-fixed:text-surface-tertiary data-fixed:hover:bg-surface-secondary",
badgeClassName,
)}
data-fixed={option.fixed}
Expand All @@ -513,7 +513,7 @@ export const MultiSelectCombobox = forwardRef<
type="button"
data-testid="clear-option-button"
className={cn(
`ml-1 pr-0 rounded-sm bg-transparent border-none outline-none
`ml-1 pr-0 rounded-sm bg-transparent border-none outline-hidden
focus:ring-2 focus:ring-content-link focus:ml-2.5 focus:pl-0 cursor-pointer`,
(disabled || option.fixed) && "hidden",
)}
Expand Down Expand Up @@ -560,7 +560,7 @@ export const MultiSelectCombobox = forwardRef<
: placeholder
}
className={cn(
"flex-1 border-none outline-none bg-transparent placeholder:text-content-secondary",
"flex-1 border-none outline-hidden bg-transparent placeholder:text-content-secondary",
{
"w-full": hidePlaceholderWhenSelected,
"px-3 py-2.5": selected.length === 0,
Expand All @@ -585,7 +585,7 @@ export const MultiSelectCombobox = forwardRef<
}
}}
className={cn(
"bg-transparent mt-1 border-none rounded-sm cursor-pointer text-content-secondary hover:text-content-primary outline-none focus:ring-2 focus:ring-content-link",
"bg-transparent mt-1 border-none rounded-sm cursor-pointer text-content-secondary hover:text-content-primary outline-hidden focus:ring-2 focus:ring-content-link",
(hideClearAllButton ||
disabled ||
selected.length < 1 ||
Expand All @@ -604,7 +604,7 @@ export const MultiSelectCombobox = forwardRef<
<CommandList
className={`absolute top-1 z-10 w-full rounded-md
border border-solid border-border
bg-surface-primary text-content-primary shadow-md outline-none
bg-surface-primary text-content-primary shadow-md outline-hidden
animate-in`}
onPointerLeave={() => {
setOnScrollbar(false);
Expand Down Expand Up @@ -674,7 +674,7 @@ export const MultiSelectCombobox = forwardRef<
<Tooltip>
<TooltipTrigger asChild>
<span className="flex items-center pointer-events-auto">
<Info className="!w-3.5 !h-3.5 text-content-secondary" />
<Info className="w-3.5! h-3.5! text-content-secondary" />
</span>
</TooltipTrigger>
<TooltipContent
Expand Down
2 changes: 1 addition & 1 deletion site/src/components/Popover/Popover.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export const PopoverContent = forwardRef<
sideOffset={sideOffset}
className={cn(
`z-50 w-72 rounded-md border border-solid bg-surface-primary
text-content-primary shadow-md outline-none
text-content-primary 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
Expand Down
2 changes: 1 addition & 1 deletion site/src/components/RadioGroup/RadioGroup.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export const RadioGroupItem = React.forwardRef<
ref={ref}
className={cn(
`aspect-square h-4 w-4 rounded-full border border-solid border-border text-content-primary bg-surface-primary
focus:outline-none focus-visible:ring-2 focus-visible:ring-content-link
focus:outline-hidden focus-visible:ring-2 focus-visible:ring-content-link
focus-visible:ring-offset-4 focus-visible:ring-offset-surface-primary
disabled:cursor-not-allowed disabled:opacity-25 disabled:border-surface-invert-primary
hover:border-border-hover data-[state=checked]:border-border-hover`,
Expand Down
4 changes: 2 additions & 2 deletions site/src/components/ScrollArea/ScrollArea.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,9 @@ const ScrollBar = React.forwardRef<
className={cn(
"border-0 border-solid border-border flex touch-none select-none transition-colors",
orientation === "vertical" &&
"h-full w-2.5 border-l border-l-transparent p-[1px]",
"h-full w-2.5 border-l border-l-transparent p-px",
orientation === "horizontal" &&
"h-2.5 flex-col border-t border-t-transparent p-[1px]",
"h-2.5 flex-col border-t border-t-transparent p-px",
className,
)}
{...props}
Expand Down
Loading
Loading