feat: upgrade to tailwindcss v4

app/components/Attribute.tsx

@@ -38,7 +38,7 @@ export default function Attribute({
 					'min-w-0 px-1.5 py-1 rounded-lg border border-transparent',
 					...(isCopyable
 						? [
-								'cursor-pointer hover:shadow-sm',
+								'cursor-pointer hover:shadow-xs',
 								'hover:bg-headplane-50 dark:hover:bg-headplane-800',
 								'hover:border-headplane-100 dark:hover:border-headplane-700',
 							]
@@ -70,8 +70,8 @@ export default function Attribute({
 						</div>
 						{isCopyable ? (
 							<div>
-								<Check className="size-4 hidden data-[copied]:block" />
-								<Copy className="size-4 block data-[copied]:hidden" />
+								<Check className="size-4 hidden data-copied:block" />
+								<Copy className="size-4 block data-copied:hidden" />
 							</div>
 						) : undefined}
 					</button>

app/components/Button.tsx

@@ -20,7 +20,7 @@ export default function Button({ variant = 'light', ...props }: ButtonProps) {
 			{...buttonProps}
 			className={cn(
 				'w-fit text-sm rounded-xl px-3 py-2',
-				'focus:outline-none focus:ring',
+				'focus:outline-hidden focus:ring-3',
 				props.isDisabled && 'opacity-60 cursor-not-allowed',
 				...(variant === 'heavy'
 					? [

app/components/Card.tsx

@@ -15,7 +15,7 @@ function Card({ variant = 'raised', ...props }: Props) {
 				'w-full max-w-md rounded-3xl p-5',
 				variant === 'flat'
 					? 'bg-transparent shadow-none'
-					: 'bg-headplane-50/50 dark:bg-headplane-950/50 shadow-sm',
+					: 'bg-headplane-50/50 dark:bg-headplane-950/50 shadow-xs',
 				'border border-headplane-100 dark:border-headplane-800',
 				props.className,
 			)}

app/components/Code.tsx

@@ -13,7 +13,7 @@ export default function Code({ isCopyable, children, className }: CodeProps) {
 		<code
 			className={cn(
 				'bg-headplane-100 dark:bg-headplane-800 px-1 py-0.5 font-mono',
-				'rounded-lg focus-within:outline-none focus-within:ring-2',
+				'rounded-lg focus-within:outline-hidden focus-within:ring-2',
 				isCopyable && 'relative pr-7',
 				className,
 			)}
@@ -41,8 +41,8 @@ export default function Code({ isCopyable, children, className }: CodeProps) {
 						}, 1000);
 					}}
 				>
-					<Check className="h-4.5 w-4.5 p-1 hidden data-[copied]:block" />
-					<Copy className="h-4.5 w-4.5 p-1 block data-[copied]:hidden" />
+					<Check className="h-4.5 w-4.5 p-1 hidden data-copied:block" />
+					<Copy className="h-4.5 w-4.5 p-1 block data-copied:hidden" />
 				</button>
 			)}
 		</code>

app/components/Dialog.tsx

@@ -117,7 +117,7 @@ function Panel(props: DialogPanelProps) {
 			method={method ?? 'POST'}
 			ref={ref}
 			className={cn(
-				'outline-none rounded-3xl w-full max-w-lg',
+				'outline-hidden rounded-3xl w-full max-w-lg',
 				'bg-white dark:bg-headplane-900',
 			)}
 		>

app/components/Footer.tsx

@@ -46,7 +46,7 @@ export default function Footer({ url, debug, healthy }: FooterProps) {
 							tabIndex={0} // Allows keyboard focus
 							className={cn(
 								'blur-sm hover:blur-none focus:blur-none transition',
-								'focus:outline-none focus:ring-2 rounded-sm',
+								'focus:outline-hidden focus:ring-2 rounded-xs',
 							)}
 						>
 							{url}

app/components/Header.tsx

@@ -50,7 +50,7 @@ function TabLink({ name, to, icon }: TabLinkProps) {
 						'after:absolute after:bottom-0 after:left-3 after:right-3',
 						'after:h-0.5 after:bg-headplane-900 dark:after:bg-headplane-200',
 						'hover:bg-headplane-200 dark:hover:bg-headplane-900',
-						'focus:outline-none focus:ring',
+						'focus:outline-hidden focus:ring-3',
 						isActive ? 'after:visible' : 'after:invisible',
 					)
 				}
@@ -69,7 +69,7 @@ function Link({ href, text }: LinkProps) {
 			rel="noreferrer"
 			className={cn(
 				'hidden sm:block hover:underline text-sm',
-				'focus:outline-none focus:ring rounded-md',
+				'focus:outline-hidden focus:ring-3 rounded-md',
 			)}
 		>
 			{text}

app/components/IconButton.tsx

@@ -25,7 +25,7 @@ export default function IconButton({
 			aria-label={props.label}
 			className={cn(
 				'rounded-full flex items-center justify-center p-1',
-				'focus:outline-none focus:ring',
+				'focus:outline-hidden focus:ring-3',
 				props.isDisabled && 'opacity-60 cursor-not-allowed',
 				...(variant === 'heavy'
 					? [

app/components/Input.tsx

@@ -54,7 +54,7 @@ export default function Input(props: InputProps) {
 				ref={ref}
 				className={cn(
 					'rounded-xl px-3 py-2',
-					'focus:outline-none focus:ring',
+					'focus:outline-hidden focus:ring-3',
 					'bg-white dark:bg-headplane-900',
 					'border border-headplane-100 dark:border-headplane-800',
 					className,

app/components/Link.tsx

@@ -24,7 +24,7 @@ export default function Link({
 				'inline-flex items-center gap-x-0.5',
 				'text-blue-500 hover:text-blue-700',
 				'dark:text-blue-400 dark:hover:text-blue-300',
-				'focus:outline-none focus:ring rounded-md',
+				'focus:outline-hidden focus:ring-3 rounded-md',
 				className,
 			)}
 		>

app/components/Menu.tsx

@@ -74,7 +74,7 @@ function Panel(props: MenuPanelProps) {
 		<ul
 			{...menuProps}
 			ref={ref}
-			className="pt-1 pb-1 shadow-xs rounded-md min-w-[200px] focus:outline-none"
+			className="pt-1 pb-1 shadow-2xs rounded-md min-w-[200px] focus:outline-hidden"
 		>
 			{[...state.collection].map((item) => (
 				<MenuSection
@@ -149,7 +149,7 @@ function MenuItem<T>({ item, state, isDisabled }: MenuItemProps<T>) {
 			ref={ref}
 			className={cn(
 				'py-2 px-3 mx-1 rounded-lg',
-				'focus:outline-none select-none',
+				'focus:outline-hidden select-none',
 				isFocused && 'bg-headplane-100/50 dark:bg-headplane-800',
 				isDisabled
 					? 'text-headplane-400 dark:text-headplane-600'

app/components/NumberInput.tsx

@@ -50,7 +50,7 @@ export default function NumberInput(props: InputProps) {
 				{...groupProps}
 				className={cn(
 					'flex items-center gap-1 rounded-xl pr-1',
-					'focus-within:outline-none focus-within:ring',
+					'focus-within:outline-hidden focus-within:ring-3',
 					'bg-white dark:bg-headplane-900',
 					'border border-headplane-100 dark:border-headplane-800',
 				)}
@@ -60,7 +60,7 @@ export default function NumberInput(props: InputProps) {
 					required={props.isRequired}
 					ref={ref}
 					id={id}
-					className="w-full pl-3 py-2 rounded-l-xl bg-transparent focus:outline-none"
+					className="w-full pl-3 py-2 rounded-l-xl bg-transparent focus:outline-hidden"
 				/>
 				<input type="hidden" name={name} value={state.numberValue} />
 				<IconButton

app/components/Options.tsx

@@ -52,7 +52,7 @@ function Option({ item, state }: OptionsOptionProps) {
 			className={cn(
 				'pl-0.5 pr-2 py-0.5 rounded-lg cursor-pointer',
 				'aria-selected:bg-headplane-100 dark:aria-selected:bg-headplane-950',
-				'focus:outline-none focus:ring z-10',
+				'focus:outline-hidden focus:ring-3 z-10',
 				'border border-headplane-100 dark:border-headplane-800',
 			)}
 		>

app/components/Popover.tsx

@@ -34,7 +34,7 @@ export default function Popover(props: PopoverProps) {
 				{...popoverProps}
 				ref={ref}
 				className={cn(
-					'z-10 shadow-sm rounded-xl',
+					'z-10 shadow-xs rounded-xl',
 					'bg-white dark:bg-headplane-900',
 					'border border-headplane-200 dark:border-headplane-800',
 					className,

app/components/Select.tsx

@@ -60,7 +60,7 @@ function Select(props: SelectProps) {
 			</label>
 			<div
 				className={cn(
-					'flex rounded-xl focus:outline-none focus-within:ring',
+					'flex rounded-xl focus:outline-hidden focus-within:ring-3',
 					'bg-white dark:bg-headplane-900',
 					'border border-headplane-100 dark:border-headplane-800',
 				)}
@@ -69,7 +69,7 @@ function Select(props: SelectProps) {
 					{...inputProps}
 					ref={inputRef}
 					id={id}
-					className="outline-none px-3 py-2 rounded-l-xl w-full bg-transparent"
+					className="outline-hidden px-3 py-2 rounded-l-xl w-full bg-transparent"
 					data-1p-ignore
 				/>
 				<button
@@ -127,7 +127,7 @@ function ListBox(props: ListBoxProps) {
 		<ul
 			{...listBoxProps}
 			ref={listBoxRef}
-			className="w-full max-h-72 overflow-auto outline-none pt-1"
+			className="w-full max-h-72 overflow-auto outline-hidden pt-1"
 		>
 			{[...state.collection].map((item) => (
 				<Option key={item.key} item={item} state={state} />
@@ -158,7 +158,7 @@ function Option({ item, state }: OptionProps) {
 			className={cn(
 				'flex items-center justify-between',
 				'py-2 px-3 mx-1 rounded-lg mb-1',
-				'focus:outline-none select-none',
+				'focus:outline-hidden select-none',
 				isFocused || isSelected
 					? 'bg-headplane-100/50 dark:bg-headplane-800'
 					: 'hover:bg-headplane-100/50 dark:hover:bg-headplane-800',

app/components/Switch.tsx

@@ -51,8 +51,8 @@ export default function Switch(props: SwitchProps) {
 					className={cn(
 						'h-[18px] w-[18px] transform rounded-full',
 						'bg-white transition duration-50 ease-in-out',
-						'translate-x-0 group-selected:translate-x-[100%]',
-						state.isSelected && 'translate-x-[100%]',
+						'translate-x-0 group-selected:translate-x-full',
+						state.isSelected && 'translate-x-full',
 					)}
 				/>
 			</div>

app/components/Tabs.tsx

@@ -56,7 +56,7 @@ function Tab({ item, state }: TabsTabProps) {
 			className={cn(
 				'pl-2 pr-3 py-2.5',
 				'aria-selected:bg-headplane-100 dark:aria-selected:bg-headplane-950',
-				'focus:outline-none focus:ring z-10',
+				'focus:outline-hidden focus:ring-3 z-10',
 				'border-r border-headplane-100 dark:border-headplane-800',
 				'first:rounded-tl-xl last:rounded-tr-xl last:border-r-0',
 			)}

app/components/Tooltip.tsx

@@ -38,7 +38,7 @@ function Tooltip(props: TooltipProps) {
 				{...triggerProps}
 				className={cn(
 					'flex items-center justify-center',
-					'focus:outline-none focus:ring rounded-xl',
+					'focus:outline-hidden focus:ring-3 rounded-xl',
 				)}
 			>
 				{component}
@@ -65,7 +65,7 @@ function Body({ state, className, ...props }: TooltipBodyProps) {
 			{...mergeProps(props, tooltipProps)}
 			className={cn(
 				'absolute z-50 p-3 top-full mt-1',
-				'outline-none rounded-3xl text-sm w-48',
+				'outline-hidden rounded-3xl text-sm w-48',
 				'bg-white dark:bg-headplane-950',
 				'text-black dark:text-white',
 				'shadow-lg dark:shadow-md rounded-xl',

app/routes/dns/components/manage-domains.tsx

@@ -167,7 +167,7 @@ function Domain({ domain, id, isDragging, isDisabled }: DomainProps) {
 			ref={setNodeRef}
 			className={cn(
 				isSortableDragging ? 'opacity-50' : '',
-				isDragging ? 'ring bg-white dark:bg-headplane-900' : '',
+				isDragging ? 'ring-3 bg-white dark:bg-headplane-900' : '',
 			)}
 			style={{
 				transform: CSS.Transform.toString(transform),
@@ -179,7 +179,7 @@ function Domain({ domain, id, isDragging, isDisabled }: DomainProps) {
 					<GripVertical
 						{...attributes}
 						{...listeners}
-						className="p-0.5 focus:ring outline-none rounded-md"
+						className="p-0.5 focus:ring-3 outline-hidden rounded-md"
 					/>
 				)}
 				{domain}

app/routes/dns/overview.tsx

@@ -70,7 +70,7 @@ export default function Page() {
 	const isDisabled = data.access === false || data.writable === false;
 
 	return (
-		<div className="flex flex-col gap-16 max-w-screen-lg">
+		<div className="flex flex-col gap-16 max-w-(--breakpoint-lg)">
 			{data.writable ? undefined : (
 				<Notice>
 					The Headscale configuration is read-only. You cannot make changes to

app/routes/machines/components/machine-row.tsx

@@ -49,16 +49,16 @@ export default function MachineRow({
 			key={node.id}
 			className="group hover:bg-headplane-50 dark:hover:bg-headplane-950"
 		>
-			<td className="pl-0.5 py-2 focus-within:ring">
+			<td className="pl-0.5 py-2 focus-within:ring-3">
 				<Link
 					to={`/machines/${node.id}`}
-					className={cn('group/link h-full focus:outline-none')}
+					className={cn('group/link h-full focus:outline-hidden')}
 				>
 					<p
 						className={cn(
 							'font-semibold leading-snug',
 							'group-hover/link:text-blue-600',
-							'group-hover/link:dark:text-blue-400',
+							'dark:group-hover/link:text-blue-400',
 						)}
 					>
 						{node.givenName}

app/routes/machines/dialogs/tags.tsx

@@ -59,10 +59,10 @@ export default function Tags({ machine, isOpen, setIsOpen }: TagsProps) {
 					)}
 					<TableList.Item
 						className={cn(
-							'rounded-b-xl focus-within:ring',
+							'rounded-b-xl focus-within:ring-3',
 							tag.length > 0 &&
 								(!tag.startsWith('tag:') || tags.includes(tag)) &&
-								'ring ring-red-500 ring-opacity-50',
+								'ring-3 ring-red-500 ring-opacity-50',
 						)}
 					>
 						<Input

app/routes/settings/local-agent.tsx

@@ -29,7 +29,7 @@ export default function Page() {
 	}, [data.configured, data.onboarding]);
 
 	return (
-		<div className="flex flex-col gap-8 max-w-screen-lg">
+		<div className="flex flex-col gap-8 max-w-(--breakpoint-lg)">
 			{management ? (
 				<AgentManagement reachable={true} hostInfo={data.stats} />
 			) : (

app/routes/settings/overview.tsx

@@ -18,7 +18,7 @@ export default function Page() {
 	const { config, oidc } = useLoaderData<typeof loader>();
 
 	return (
-		<div className="flex flex-col gap-8 max-w-screen-lg">
+		<div className="flex flex-col gap-8 max-w-(--breakpoint-lg)">
 			<div className="flex flex-col w-2/3">
 				<h1 className="text-2xl font-medium mb-4">Settings</h1>
 				<p>

app/routes/settings/restrictions/overview.tsx

@@ -52,7 +52,7 @@ export default function Page() {
 	const isDisabled = writable ? !access : true;
 
 	return (
-		<div className="flex flex-col gap-4 max-w-screen-lg">
+		<div className="flex flex-col gap-4 max-w-(--breakpoint-lg)">
 			<div className="flex flex-col w-2/3">
 				<p className="mb-4 text-md">
 					<RemixLink to="/settings" className="font-medium">

app/tailwind.css

@@ -1,6 +1,91 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+
+@plugin "tailwindcss-animate";
+@plugin "tailwindcss-react-aria-components";
+
+@theme {
+	--blur-xs: 2px;
+
+	--height-editor: calc(100vh - 20rem);
+
+	--font-sans: Inter, -apple-system, BlinkMacSystemFont, Helvetica, Arial,
+		sans-serif;
+
+	--transition-duration-25: 25ms;
+	--transition-duration-50: 50ms;
+
+	--color-main-50: #f8fafc;
+	--color-main-100: #f1f5f9;
+	--color-main-200: #e2e8f0;
+	--color-main-300: #cbd5e1;
+	--color-main-400: #94a3b8;
+	--color-main-500: #64748b;
+	--color-main-600: #475569;
+	--color-main-700: #334155;
+	--color-main-800: #1e293b;
+	--color-main-900: #0f172a;
+	--color-main-950: #020617;
+
+	--color-ui-50: #fafafa;
+	--color-ui-100: #f5f5f5;
+	--color-ui-200: #e5e5e5;
+	--color-ui-300: #d4d4d4;
+	--color-ui-400: #a3a3a3;
+	--color-ui-500: #737373;
+	--color-ui-600: #525252;
+	--color-ui-700: #404040;
+	--color-ui-800: #262626;
+	--color-ui-900: #171717;
+	--color-ui-950: #0a0a0a;
+
+	--color-headplane-50: #f2f2f2;
+	--color-headplane-100: #e6e6e6;
+	--color-headplane-200: #cccccc;
+	--color-headplane-300: #b3b3b3;
+	--color-headplane-400: #999999;
+	--color-headplane-500: #808080;
+	--color-headplane-600: #666666;
+	--color-headplane-700: #4d4d4d;
+	--color-headplane-800: #343434;
+	--color-headplane-900: #1a1a1a;
+	--color-headplane-950: #0d0d0d;
+
+	--animate-loading: loader 0.8s infinite ease-in-out;
+
+	@keyframes loader {
+		from {
+			transform: translateX(-100%);
+		}
+		to {
+			transform: translateX(100%);
+		}
+	}
+}
+
+@utility container {
+	margin-inline: auto;
+	padding-inline: 1rem;
+
+	/* biome-ignore lint/correctness/noUnknownFunction: Tailwind CSS */
+	@media (width >= theme(--breakpoint-sm)) {
+		padding-inline: 2rem;
+	}
+
+	/* biome-ignore lint/correctness/noUnknownFunction: Tailwind CSS */
+	@media (width >= theme(--breakpoint-lg)) {
+		padding-inline: 4rem;
+	}
+
+	/* biome-ignore lint/correctness/noUnknownFunction: Tailwind CSS */
+	@media (width >= theme(--breakpoint-xl)) {
+		padding-inline: 5rem;
+	}
+
+	/* biome-ignore lint/correctness/noUnknownFunction: Tailwind CSS */
+	@media (width >= theme(--breakpoint-2xl)) {
+		padding-inline: 6rem;
+	}
+}
 
 @supports (scrollbar-gutter: stable) {
 	html {