From 00cdf7fc7b76f35628383d3329e00e0b87501531 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Mon, 15 Dec 2025 08:19:25 +0000
Subject: [PATCH 1/2] feat: first implementation of templates `css` removal

---
 .../TemplateExampleCard.tsx                   | 102 ++----
 .../TemplateFileTree.stories.tsx              |  10 +-
 .../templates/TemplateFiles/TemplateFiles.tsx |  77 ++--
 .../CreateTemplateGalleryPageView.tsx         |  75 +---
 .../StarterTemplates.tsx                      |  66 +---
 .../CreateTemplatePage/CreateTemplateForm.tsx |  20 +-
 .../StarterTemplatePageView.tsx               |  24 +-
 .../TemplateDocsPage/TemplateDocsPage.tsx     |  25 +-
 .../TemplateEmbedPage/TemplateEmbedPage.tsx   |  35 +-
 .../TemplateInsightsPage/IntervalMenu.tsx     |   4 +-
 .../TemplateInsightsPage.tsx                  | 219 +++--------
 .../TemplateInsightsPage/WeekPicker.tsx       |   4 +-
 .../TemplateVersionsPage/VersionsTable.tsx    |   2 +-
 .../TemplateSettingsForm.tsx                  |   2 +-
 .../TemplateSchedulePage/ScheduleDialog.tsx   |  71 ++--
 .../TemplateSettingsLayout.tsx                |   4 +-
 .../TemplateVariablesPageView.tsx             |   2 +-
 .../ProvisionerTagsPopover.tsx                |  18 +-
 .../TemplateVersionEditor.tsx                 | 339 +++++-------------
 .../pages/TemplatesPage/EmptyTemplates.tsx    |   2 +-
 .../pages/TemplatesPage/TemplatesPageView.tsx |  75 ++--
 21 files changed, 297 insertions(+), 879 deletions(-)

diff --git a/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx b/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx
index 6ecdc11ed84d9..39b17aa803e2a 100644
--- a/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx
+++ b/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx
@@ -1,4 +1,3 @@
-import type { Interpolation, Theme } from "@emotion/react";
 import Link from "@mui/material/Link";
 import type { TemplateExample } from "api/typesGenerated";
 import { Button } from "components/Button/Button";
@@ -6,6 +5,7 @@ import { ExternalImage } from "components/ExternalImage/ExternalImage";
 import { Pill } from "components/Pill/Pill";
 import type { FC, HTMLAttributes } from "react";
 import { Link as RouterLink } from "react-router";
+import { cn } from "utils/cn";
 
 type TemplateExampleCardProps = HTMLAttributes<HTMLDivElement> & {
 	example: TemplateExample;
@@ -18,19 +18,24 @@ export const TemplateExampleCard: FC<TemplateExampleCardProps> = ({
 	...divProps
 }) => {
 	return (
-		<div css={styles.card} {...divProps}>
-			<div css={styles.header}>
-				<div css={styles.icon}>
+		<div className={classNames.card} {...divProps}>
+			<div className={classNames.header}>
+				<div className={classNames.icon}>
 					<ExternalImage
 						src={example.icon}
-						css={{ width: "100%", height: "100%", objectFit: "contain" }}
+						className="w-full h-full object-contain"
 					/>
 				</div>
 
-				<div css={styles.tags}>
+				<div className={classNames.tags}>
 					{example.tags.map((tag) => (
 						<RouterLink key={tag} to={`/starter-templates?tag=${tag}`}>
-							<Pill css={[styles.tag, activeTag === tag && styles.activeTag]}>
+							<Pill
+								className={cn([
+									classNames.tag,
+									activeTag === tag && classNames.activeTag,
+								])}
+							>
 								{tag}
 							</Pill>
 						</RouterLink>
@@ -39,22 +44,20 @@ export const TemplateExampleCard: FC<TemplateExampleCardProps> = ({
 			</div>
 
 			<div>
-				<h4 css={{ fontSize: 14, fontWeight: 600, margin: 0, marginBottom: 4 }}>
-					{example.name}
-				</h4>
-				<span css={styles.description}>
+				<h4 className="text-sm font-semibold m-0 mb-1">{example.name}</h4>
+				<span className={classNames.description}>
 					{example.description}{" "}
 					<Link
 						component={RouterLink}
 						to={`/starter-templates/${example.id}`}
-						css={{ display: "inline-block", fontSize: 13, marginTop: 4 }}
+						className="inline-block text-[13px] leading-none mt-2"
 					>
 						Read more
 					</Link>
 				</span>
 			</div>
 
-			<div css={styles.useButtonContainer}>
+			<div className={classNames.useButtonContainer}>
 				<Button asChild className="w-full">
 					<RouterLink to={`/templates/new?exampleId=${example.id}`}>
 						Use template
@@ -65,66 +68,13 @@ export const TemplateExampleCard: FC<TemplateExampleCardProps> = ({
 	);
 };
 
-const styles = {
-	card: (theme) => ({
-		width: "320px",
-		padding: 24,
-		borderRadius: 6,
-		border: `1px solid ${theme.palette.divider}`,
-		textAlign: "left",
-		color: "inherit",
-		display: "flex",
-		flexDirection: "column",
-	}),
-
-	header: {
-		display: "flex",
-		alignItems: "center",
-		justifyContent: "space-between",
-		marginBottom: 24,
-	},
-
-	icon: {
-		flexShrink: 0,
-		paddingTop: 4,
-		width: 32,
-		height: 32,
-	},
-
-	tags: {
-		display: "flex",
-		flexWrap: "wrap",
-		gap: 8,
-		justifyContent: "end",
-	},
-
-	tag: (theme) => ({
-		borderColor: theme.palette.divider,
-		textDecoration: "none",
-		cursor: "pointer",
-		"&: hover": {
-			borderColor: theme.palette.primary.main,
-		},
-	}),
-
-	activeTag: (theme) => ({
-		borderColor: theme.roles.active.outline,
-		backgroundColor: theme.roles.active.background,
-	}),
-
-	description: (theme) => ({
-		fontSize: 13,
-		color: theme.palette.text.secondary,
-		lineHeight: "1.6",
-		display: "block",
-	}),
-
-	useButtonContainer: {
-		display: "flex",
-		gap: 12,
-		flexDirection: "column",
-		paddingTop: 24,
-		marginTop: "auto",
-		alignItems: "center",
-	},
-} satisfies Record<string, Interpolation<Theme>>;
+const classNames = {
+	card: "w-[320px] p-6 rounded-md border border-solid border-border dark:border-surface-quaternary text-left text-inherit flex flex-col",
+	header: "flex items-center justify-between mb-6",
+	icon: "flex-shrink-0 pt-1 w-8 h-8",
+	tags: "flex flex-wrap gap-2 justify-end",
+	tag: "border border-solid border-border dark:border-surface-quaternary text-decoration-none cursor-pointer hover:border-sky-500",
+	activeTag: "bg-sky-950 border-sky-500 dark:border-sky-500",
+	description: "text-[13px] leading-relaxed block text-content-secondary",
+	useButtonContainer: "flex flex-col items-center gap-3 pt-6 mt-auto",
+};
diff --git a/site/src/modules/templates/TemplateFiles/TemplateFileTree.stories.tsx b/site/src/modules/templates/TemplateFiles/TemplateFileTree.stories.tsx
index 56e86d16982ed..f235c494cbb50 100644
--- a/site/src/modules/templates/TemplateFiles/TemplateFileTree.stories.tsx
+++ b/site/src/modules/templates/TemplateFiles/TemplateFileTree.stories.tsx
@@ -1,5 +1,4 @@
 import { chromatic } from "testHelpers/chromatic";
-import { useTheme } from "@emotion/react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import type { FileTree } from "utils/filetree";
 import { TemplateFileTree } from "./TemplateFileTree";
@@ -30,15 +29,8 @@ const meta: Meta<typeof TemplateFileTree> = {
 	},
 	decorators: [
 		(Story) => {
-			const theme = useTheme();
 			return (
-				<div
-					css={{
-						maxWidth: 260,
-						borderRadius: 8,
-						border: `1px solid ${theme.palette.divider}`,
-					}}
-				>
+				<div className="max-w-[260px] rounded-lg border border-solid border-border">
 					<Story />
 				</div>
 			);
diff --git a/site/src/modules/templates/TemplateFiles/TemplateFiles.tsx b/site/src/modules/templates/TemplateFiles/TemplateFiles.tsx
index e23a42762013a..d052370aeaa39 100644
--- a/site/src/modules/templates/TemplateFiles/TemplateFiles.tsx
+++ b/site/src/modules/templates/TemplateFiles/TemplateFiles.tsx
@@ -1,4 +1,4 @@
-import { type Interpolation, type Theme, useTheme } from "@emotion/react";
+import { useTheme } from "@emotion/react";
 import { SyntaxHighlighter } from "components/SyntaxHighlighter/SyntaxHighlighter";
 import set from "lodash/set";
 import { EditIcon } from "lucide-react";
@@ -61,8 +61,8 @@ export const TemplateFiles: FC<TemplateFilesProps> = ({
 
 	return (
 		<div>
-			<div css={{ display: "flex", alignItems: "flex-start", gap: 32 }}>
-				<div css={styles.sidebar}>
+			<div className="flex items-start gap-8">
+				<div className={classNames.sidebar}>
 					<TemplateFileTree
 						fileTree={fileTree}
 						onSelect={(path: string) => {
@@ -85,15 +85,19 @@ export const TemplateFiles: FC<TemplateFilesProps> = ({
 					/>
 				</div>
 
-				<div css={styles.files} data-testid="template-files-content">
+				<div className={classNames.files} data-testid="template-files-content">
 					{Object.keys(currentFiles)
 						.sort((a, b) => a.localeCompare(b))
 						.map((filename) => {
 							const info = fileInfo(filename);
 
 							return (
-								<div key={filename} css={styles.filePanel} id={filename}>
-									<header css={styles.fileHeader}>
+								<div
+									key={filename}
+									className={classNames.filePanel}
+									id={filename}
+								>
+									<header className={classNames.fileHeader}>
 										<span
 											className={cn({
 												"text-content-warning": info.hasDiff,
@@ -102,21 +106,13 @@ export const TemplateFiles: FC<TemplateFilesProps> = ({
 											{filename}
 										</span>
 
-										<div css={{ marginLeft: "auto" }}>
+										<div className="ml-auto">
 											<Link
 												to={`${versionLink}/edit?path=${filename}`}
-												css={{
-													display: "flex",
-													gap: 4,
-													alignItems: "center",
-													fontSize: 14,
-													color: theme.palette.text.secondary,
-													textDecoration: "none",
-
-													"&:hover": {
-														color: theme.palette.text.primary,
-													},
-												}}
+												className={cn([
+													"flex gap-1 items-center text-sm leading-none no-underline",
+													"text-content-secondary hover:text-content-primary",
+												])}
 											>
 												<EditIcon className="text-inherit size-icon-xs" />
 												Edit
@@ -171,38 +167,11 @@ const numberOfLines = (content: string) => {
 	return content.split("\n").length;
 };
 
-const styles = {
-	sidebar: (theme) => ({
-		width: 240,
-		flexShrink: 0,
-		borderRadius: 8,
-		overflow: "auto",
-		border: `1px solid ${theme.palette.divider}`,
-		padding: "4px 0",
-		position: "sticky",
-		top: 32,
-	}),
-
-	files: {
-		display: "flex",
-		flexDirection: "column",
-		gap: 16,
-		flex: 1,
-	},
-
-	filePanel: (theme) => ({
-		borderRadius: 8,
-		border: `1px solid ${theme.palette.divider}`,
-		overflow: "hidden",
-	}),
-
-	fileHeader: (theme) => ({
-		padding: "8px 16px",
-		borderBottom: `1px solid ${theme.palette.divider}`,
-		fontSize: 13,
-		fontWeight: 500,
-		display: "flex",
-		gap: 8,
-		alignItems: "center",
-	}),
-} satisfies Record<string, Interpolation<Theme>>;
+const classNames = {
+	sidebar:
+		"w-60 flex-shrink-0 rounded-lg overflow-auto border border-solid border-zinc-700 py-1 sticky top-8",
+	files: "flex flex-col gap-4 flex-1",
+	filePanel: "rounded-lg border border-solid border-zinc-700 overflow-hidden",
+	fileHeader:
+		"py-2 px-4 flex gap-2 items-center border-0 border-b border-solid border-zinc-700 text-[13px] font-medium",
+};
diff --git a/site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPageView.tsx b/site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPageView.tsx
index 0dfdb4a219504..6256398e17d71 100644
--- a/site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPageView.tsx
+++ b/site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPageView.tsx
@@ -1,4 +1,3 @@
-import type { Interpolation, Theme } from "@emotion/react";
 import Card from "@mui/material/Card";
 import CardActionArea from "@mui/material/CardActionArea";
 import CardContent from "@mui/material/CardContent";
@@ -44,43 +43,29 @@ export const CreateTemplateGalleryPageView: FC<
 			</PageHeader>
 			<Stack spacing={8}>
 				<Stack direction="row" spacing={4}>
-					<div css={{ width: 202 }}>
-						<h2 css={styles.sectionTitle}>
+					<div className="w-[202px]">
+						<h2 className={classNames.sectionTitle}>
 							Choose a starting point for your new template
 						</h2>
 					</div>
-					<div
-						css={{
-							display: "flex",
-							flexWrap: "wrap",
-							gap: 32,
-							height: "max-content",
-						}}
-					>
-						<Card variant="outlined" css={{ width: 320, borderRadius: 6 }}>
+					<div className="flex flex-wrap gap-8 h-max">
+						<Card variant="outlined" className="w-[320px] rounded-md">
 							<CardActionArea
 								component={RouterLink}
 								to="/templates/new"
 								sx={{ height: 115, padding: 1 }}
 							>
 								<CardContent>
-									<Stack
-										direction="row"
-										spacing={3}
-										css={{ alignItems: "center" }}
-									>
-										<div css={styles.icon}>
+									<Stack direction="row" spacing={3} className="items-center">
+										<div className={classNames.icon}>
 											<ExternalImage
 												src="/emojis/1f4e1.png"
-												css={{
-													width: "100%",
-													height: "100%",
-												}}
+												className="w-full h-full"
 											/>
 										</div>
 										<div>
-											<h4 css={styles.cardTitle}>Upload Template</h4>
-											<span css={styles.cardDescription}>
+											<h4 className={classNames.cardTitle}>Upload Template</h4>
+											<span className={classNames.cardDescription}>
 												Get started by uploading an existing template
 											</span>
 										</div>
@@ -101,38 +86,10 @@ export const CreateTemplateGalleryPageView: FC<
 	);
 };
 
-const styles = {
-	sectionTitle: (theme) => ({
-		color: theme.palette.text.primary,
-		fontSize: 16,
-		fontWeight: 400,
-		margin: 0,
-	}),
-
-	cardTitle: (theme) => ({
-		color: theme.palette.text.secondary,
-		fontSize: 14,
-		fontWeight: 600,
-		margin: 0,
-		marginBottom: 4,
-	}),
-
-	cardDescription: (theme) => ({
-		fontSize: 13,
-		color: theme.palette.text.secondary,
-		lineHeight: "1.6",
-		display: "block",
-	}),
-
-	icon: {
-		flexShrink: 0,
-		width: 32,
-		height: 32,
-	},
-
-	menuItemIcon: (theme) => ({
-		color: theme.palette.text.secondary,
-		width: 20,
-		height: 20,
-	}),
-} satisfies Record<string, Interpolation<Theme>>;
+const classNames = {
+	sectionTitle: "text-content-primary text-base font-normal m-0",
+	cardTitle: "text-content-secondary text-sm font-medium m-0 mb-1",
+	cardDescription: "text-[13px] leading-relaxed block text-content-secondary",
+	icon: "flex-shrink-0 w-8 h-8",
+	menuItemIcon: "text-content-secondary size-5",
+};
diff --git a/site/src/pages/CreateTemplateGalleryPage/StarterTemplates.tsx b/site/src/pages/CreateTemplateGalleryPage/StarterTemplates.tsx
index 7f7171af551dd..1898bc54158b5 100644
--- a/site/src/pages/CreateTemplateGalleryPage/StarterTemplates.tsx
+++ b/site/src/pages/CreateTemplateGalleryPage/StarterTemplates.tsx
@@ -1,9 +1,9 @@
-import type { Interpolation, Theme } from "@emotion/react";
 import type { TemplateExample } from "api/typesGenerated";
 import { Stack } from "components/Stack/Stack";
 import { TemplateExampleCard } from "modules/templates/TemplateExampleCard/TemplateExampleCard";
 import type { FC } from "react";
 import { Link, useSearchParams } from "react-router";
+import { cn } from "utils/cn";
 import type { StarterTemplatesByTag } from "utils/starterTemplates";
 
 const getTagLabel = (tag: string) => {
@@ -66,14 +66,17 @@ export const StarterTemplates: FC<StarterTemplatesProps> = ({
 	return (
 		<Stack direction="row" spacing={4} alignItems="flex-start">
 			{starterTemplatesByTag && tags && (
-				<Stack css={{ width: 202, flexShrink: 0, position: "sticky" }}>
-					<h2 css={styles.sectionTitle}>Choose a starter template</h2>
-					<span css={styles.filterCaption}>Filter</span>
+				<Stack className="w-[202px] flex-shrink-0 sticky">
+					<h2 className={classNames.sectionTitle}>Choose a starter template</h2>
+					<span className={classNames.filterCaption}>Filter</span>
 					{tags.map((tag) => (
 						<Link
 							key={tag}
 							to={`?tag=${tag}`}
-							css={[styles.tagLink, tag === activeTag && styles.tagLinkActive]}
+							className={cn(
+								classNames.tagLink,
+								tag === activeTag && classNames.tagLinkActive,
+							)}
 						>
 							{getTagLabel(tag)} ({starterTemplatesByTag[tag].length})
 						</Link>
@@ -81,19 +84,10 @@ export const StarterTemplates: FC<StarterTemplatesProps> = ({
 				</Stack>
 			)}
 
-			<div
-				css={{
-					display: "flex",
-					flexWrap: "wrap",
-					gap: 32,
-					height: "max-content",
-				}}
-			>
+			<div className="flex flex-wrap gap-8 h-max">
 				{visibleTemplates?.map((example) => (
 					<TemplateExampleCard
-						css={(theme) => ({
-							backgroundColor: theme.palette.background.paper,
-						})}
+						className="bg-content-primary"
 						example={example}
 						key={example.id}
 						activeTag={activeTag}
@@ -104,35 +98,11 @@ export const StarterTemplates: FC<StarterTemplatesProps> = ({
 	);
 };
 
-const styles = {
-	filterCaption: (theme) => ({
-		textTransform: "uppercase",
-		fontWeight: 600,
-		fontSize: 12,
-		color: theme.palette.text.secondary,
-		letterSpacing: "0.1em",
-	}),
-
-	tagLink: (theme) => ({
-		color: theme.palette.text.secondary,
-		textDecoration: "none",
-		fontSize: 14,
-		textTransform: "capitalize",
-
-		"&:hover": {
-			color: theme.palette.text.primary,
-		},
-	}),
-
-	tagLinkActive: (theme) => ({
-		color: theme.palette.text.primary,
-		fontWeight: 600,
-	}),
-
-	sectionTitle: (theme) => ({
-		color: theme.palette.text.primary,
-		fontSize: 16,
-		fontWeight: 400,
-		margin: 0,
-	}),
-} satisfies Record<string, Interpolation<Theme>>;
+const classNames = {
+	filterCaption:
+		"uppercase font-semibold text-sm text-content-secondary tracking-[0.1em]",
+	tagLink:
+		"text-content-secondary no-underline text-sm uppercase hover:text-content-primary",
+	tagLinkActive: "text-content-primary font-semibold",
+	sectionTitle: "text-content-primary text-base font-normal m-0",
+};
diff --git a/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx b/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx
index e3528e9b707be..507e1752275d9 100644
--- a/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx
+++ b/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx
@@ -30,6 +30,7 @@ import { SelectedTemplate } from "pages/CreateWorkspacePage/SelectedTemplate";
 import { type FC, useState } from "react";
 import { useQuery } from "react-query";
 import { useSearchParams } from "react-router";
+import { cn } from "utils/cn";
 import { docs } from "utils/docs";
 import {
 	displayNameValidator,
@@ -388,20 +389,11 @@ export const CreateTemplateForm: FC<CreateTemplateFormProps> = (props) => {
 					<button
 						type="button"
 						onClick={onOpenBuildLogsDrawer}
-						css={(theme) => ({
-							backgroundColor: "transparent",
-							border: 0,
-							fontWeight: 500,
-							fontSize: 14,
-							cursor: "pointer",
-							color: theme.palette.text.secondary,
-
-							"&:hover": {
-								textDecoration: "underline",
-								textUnderlineOffset: 4,
-								color: theme.palette.text.primary,
-							},
-						})}
+						className={cn([
+							"content-text-secondary hover:content-text-primary",
+							"bg-transparent border-0 font-medium text-sm leading-normal cursor-pointer",
+							"hover:underline hover:underline-offset-4",
+						])}
 					>
 						Show build logs
 					</button>
diff --git a/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx b/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx
index c4bb59f7717ab..2bdd049a4f05c 100644
--- a/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx
+++ b/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx
@@ -60,19 +60,7 @@ export const StarterTemplatePageView: FC<StarterTemplatePageViewProps> = ({
 				}
 			>
 				<Stack direction="row" spacing={3} alignItems="center">
-					<div
-						css={{
-							height: 48,
-							width: 48,
-							display: "flex",
-							alignItems: "center",
-							justifyContent: "center",
-
-							"& img": {
-								width: "100%",
-							},
-						}}
-					>
+					<div className="size-12 flex items-center justify-center [&_img]:w-full">
 						<ExternalImage src={starterTemplate.icon} />
 					</div>
 					<div>
@@ -88,17 +76,11 @@ export const StarterTemplatePageView: FC<StarterTemplatePageViewProps> = ({
 				css={{
 					background: theme.palette.background.paper,
 					border: `1px solid ${theme.palette.divider}`,
-					borderRadius: 8,
 				}}
+				className="bg-content-primary border border-solid border-zinc-700 rounded-lg"
 				id="readme"
 			>
-				<div
-					css={{
-						padding: "40px 40px 64px",
-						maxWidth: 800,
-						margin: "auto",
-					}}
-				>
+				<div className="pt-10 px-10 pb-16 max-w-[800px] m-auto">
 					<MemoizedMarkdown>{starterTemplate.markdown}</MemoizedMarkdown>
 				</div>
 			</div>
diff --git a/site/src/pages/TemplatePage/TemplateDocsPage/TemplateDocsPage.tsx b/site/src/pages/TemplatePage/TemplateDocsPage/TemplateDocsPage.tsx
index c4961acf6c9a9..aacb431344aba 100644
--- a/site/src/pages/TemplatePage/TemplateDocsPage/TemplateDocsPage.tsx
+++ b/site/src/pages/TemplatePage/TemplateDocsPage/TemplateDocsPage.tsx
@@ -1,4 +1,3 @@
-import { useTheme } from "@emotion/react";
 import { MemoizedMarkdown } from "components/Markdown/Markdown";
 import frontMatter from "front-matter";
 import { useTemplateLayoutContext } from "pages/TemplatePage/TemplateLayout";
@@ -7,7 +6,6 @@ import { pageTitle } from "utils/page";
 
 export default function TemplateDocsPage() {
 	const { template, activeVersion } = useTemplateLayoutContext();
-	const theme = useTheme();
 
 	const readme = frontMatter(activeVersion.readme);
 
@@ -16,30 +14,13 @@ export default function TemplateDocsPage() {
 			<title>{pageTitle(template.name, "Documentation")}</title>
 
 			<div
-				css={{
-					background: theme.palette.background.paper,
-					border: `1px solid ${theme.palette.divider}`,
-					borderRadius: 8,
-				}}
+				className="rounded-lg bg-content-primary border border-solid border-zinc-700"
 				id="readme"
 			>
-				<div
-					css={{
-						color: theme.palette.text.secondary,
-						fontWeight: 600,
-						padding: "16px 24px",
-						borderBottom: `1px solid ${theme.palette.divider}`,
-					}}
-				>
+				<div className="font-semibold py-4 px-6 text-content-secondary border-0 border-b border-solid border-zinc-700">
 					README.md
 				</div>
-				<div
-					css={{
-						padding: "0 24px 40px",
-						maxWidth: 800,
-						margin: "auto",
-					}}
-				>
+				<div className="pt-0 px-6 pb-10 max-w-[800px] m-auto">
 					<MemoizedMarkdown>{readme.body}</MemoizedMarkdown>
 				</div>
 			</div>
diff --git a/site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage.tsx b/site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage.tsx
index 8b50ef2447652..3ead3ccad91e7 100644
--- a/site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage.tsx
+++ b/site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage.tsx
@@ -15,6 +15,7 @@ import { CheckIcon, CopyIcon } from "lucide-react";
 import { useTemplateLayoutContext } from "pages/TemplatePage/TemplateLayout";
 import { type FC, useEffect, useId, useState } from "react";
 import { useQuery } from "react-query";
+import { cn } from "utils/cn";
 import { nameValidator } from "utils/formUtils";
 import { pageTitle } from "utils/page";
 import { getInitialRichParameterValues } from "utils/richParameters";
@@ -174,9 +175,7 @@ export const TemplateEmbedPageView: FC<TemplateEmbedPageViewProps> = ({
 							</div>
 
 							{templateParameters.length > 0 && (
-								<div
-									css={{ display: "flex", flexDirection: "column", gap: 36 }}
-								>
+								<div className="flex flex-col gap-9">
 									{templateParameters.map((parameter) => {
 										const parameterValue =
 											buttonValues[`param.${parameter.name}`] ?? "";
@@ -201,34 +200,16 @@ export const TemplateEmbedPageView: FC<TemplateEmbedPageViewProps> = ({
 					</div>
 
 					<div
-						css={(theme) => ({
+						className={cn(
 							// 80px for padding, 36px is for the status bar. We want to use `vh`
 							// so that it will be relative to the screen and not the parent layout.
-							height: "calc(100vh - (80px + 36px))",
-							top: 40,
-							position: "sticky",
-							display: "flex",
-							padding: 64,
-							flex: 1,
-							alignItems: "center",
-							justifyContent: "center",
-							borderRadius: 8,
-							backgroundColor: theme.palette.background.paper,
-							border: `1px solid ${theme.palette.divider}`,
-						})}
+							"h-[calc(100vh_-(80px+36px))]",
+							"sticky top-10 flex p-16 flex-1 items-center justify-center rounded-lg",
+							"bg-surface-primary border border-solid border-zinc-700",
+						)}
 					>
 						<img src="/open-in-coder.svg" alt="Open in Coder button" />
-						<div
-							css={{
-								padding: "48px 16px",
-								position: "absolute",
-								bottom: 0,
-								left: 0,
-								display: "flex",
-								justifyContent: "center",
-								width: "100%",
-							}}
-						>
+						<div className="py-12 px-4 absolute bottom-0 left-0 flex justify-center w-full">
 							<Button
 								className="rounded-full"
 								disabled={clipboard.showCopiedSuccess}
diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/IntervalMenu.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/IntervalMenu.tsx
index 5aa98a7665d19..00b0746a2f589 100644
--- a/site/src/pages/TemplatePage/TemplateInsightsPage/IntervalMenu.tsx
+++ b/site/src/pages/TemplatePage/TemplateInsightsPage/IntervalMenu.tsx
@@ -62,7 +62,7 @@ export const IntervalMenu: FC<IntervalMenuProps> = ({ value, onChange }) => {
 				{Object.entries(insightsIntervals).map(([interval, { label }]) => {
 					return (
 						<MenuItem
-							css={{ fontSize: 14, justifyContent: "space-between" }}
+							className="text-sm leading-none justify-between"
 							key={interval}
 							onClick={() => {
 								onChange(interval as InsightsInterval);
@@ -70,7 +70,7 @@ export const IntervalMenu: FC<IntervalMenuProps> = ({ value, onChange }) => {
 							}}
 						>
 							{label}
-							<div css={{ width: 16, height: 16 }}>
+							<div className="size-4">
 								{value === interval && <CheckIcon className="size-icon-xs" />}
 							</div>
 						</MenuItem>
diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
index c9f91e3392c81..1dc704536c58b 100644
--- a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
+++ b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
@@ -230,26 +230,10 @@ export const TemplateInsightsPageView: FC<TemplateInsightsPageViewProps> = ({
 }) => {
 	return (
 		<>
-			<div
-				css={{
-					marginBottom: 32,
-					display: "flex",
-					alignItems: "center",
-					gap: 8,
-				}}
-			>
-				{controls}
-			</div>
-			<div
-				css={{
-					display: "grid",
-					gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
-					gridTemplateRows: "440px 440px auto",
-					gap: 24,
-				}}
-			>
+			<div className="mb-8 flex items-center gap-2">{controls}</div>
+			<div className="grid grid-cols-3 grid-rows-[440px_440px_auto] gap-6">
 				<ActiveUsersPanel
-					css={{ gridColumn: "span 2" }}
+					className="col-span-2"
 					interval={interval}
 					userLimit={
 						entitlements?.features.user_limit.enabled
@@ -261,7 +245,7 @@ export const TemplateInsightsPageView: FC<TemplateInsightsPageViewProps> = ({
 				/>
 				<UsersLatencyPanel data={userLatency.data} error={userLatency.error} />
 				<TemplateUsagePanel
-					css={{ gridColumn: "span 2" }}
+					className="col-span-2"
 					data={templateInsights.data?.report?.apps_usage}
 					error={templateInsights.error}
 				/>
@@ -270,7 +254,7 @@ export const TemplateInsightsPageView: FC<TemplateInsightsPageViewProps> = ({
 					error={userActivity.error}
 				/>
 				<TemplateParametersUsagePanel
-					css={{ gridColumn: "span 3" }}
+					className="col-span-3"
 					data={templateInsights.data?.report?.parameters_usage}
 					error={templateInsights.error}
 				/>
@@ -301,7 +285,7 @@ const ActiveUsersPanel: FC<ActiveUsersPanelProps> = ({
 				</PanelTitle>
 			</PanelHeader>
 			<PanelContent>
-				{!error && !data && <Loader css={{ height: "100%" }} />}
+				{!error && !data && <Loader className="h-full" />}
 				{(error || data?.length === 0) && <NoDataAvailable error={error} />}
 				{data && data.length > 0 && (
 					<ActiveUserChart
@@ -330,9 +314,9 @@ const UsersLatencyPanel: FC<UsersLatencyPanelProps> = ({
 	const users = data?.report.users;
 
 	return (
-		<Panel {...panelProps} css={{ overflowY: "auto" }}>
+		<Panel {...panelProps} className="overflow-y-auto">
 			<PanelHeader>
-				<PanelTitle css={{ display: "flex", alignItems: "center", gap: 8 }}>
+				<PanelTitle className="flex items-center gap-2">
 					Latency by user
 					<HelpTooltip>
 						<HelpTooltipIconTrigger size="small" />
@@ -347,7 +331,7 @@ const UsersLatencyPanel: FC<UsersLatencyPanelProps> = ({
 			</PanelHeader>
 
 			<PanelContent>
-				{!error && !users && <Loader css={{ height: "100%" }} />}
+				{!error && !users && <Loader className="h-full" />}
 				{(error || users?.length === 0) && <NoDataAvailable error={error} />}
 				{users &&
 					[...users]
@@ -355,26 +339,17 @@ const UsersLatencyPanel: FC<UsersLatencyPanelProps> = ({
 						.map((row) => (
 							<div
 								key={row.user_id}
-								css={{
-									display: "flex",
-									justifyContent: "space-between",
-									alignItems: "center",
-									fontSize: 14,
-									paddingTop: 8,
-									paddingBottom: 8,
-								}}
+								className="flex justify-between items-center font-sm leading-none py-2"
 							>
-								<div css={{ display: "flex", alignItems: "center", gap: 12 }}>
+								<div className="flex items-center gap-3">
 									<Avatar fallback={row.username} src={row.avatar_url} />
-									<div css={{ fontWeight: 500 }}>{row.username}</div>
+									<div className="font-medium">{row.username}</div>
 								</div>
 								<div
 									css={{
 										color: getLatencyColor(theme, row.latency_ms.p50),
-										fontWeight: 500,
-										fontSize: 13,
-										textAlign: "right",
 									}}
+									className="font-medium text-[13px] text-right"
 								>
 									{row.latency_ms.p50.toFixed(0)}ms
 								</div>
@@ -400,9 +375,9 @@ const UsersActivityPanel: FC<UsersActivityPanelProps> = ({
 	const users = data?.report.users;
 
 	return (
-		<Panel {...panelProps} css={{ overflowY: "auto" }}>
+		<Panel {...panelProps} className="overflow-y-auto">
 			<PanelHeader>
-				<PanelTitle css={{ display: "flex", alignItems: "center", gap: 8 }}>
+				<PanelTitle className="flex items-center gap-2">
 					Activity by user
 					<HelpTooltip>
 						<HelpTooltipIconTrigger size="small" />
@@ -417,7 +392,7 @@ const UsersActivityPanel: FC<UsersActivityPanelProps> = ({
 				</PanelTitle>
 			</PanelHeader>
 			<PanelContent>
-				{!error && !users && <Loader css={{ height: "100%" }} />}
+				{!error && !users && <Loader className="h-full" />}
 				{(error || users?.length === 0) && <NoDataAvailable error={error} />}
 				{users &&
 					[...users]
@@ -425,25 +400,17 @@ const UsersActivityPanel: FC<UsersActivityPanelProps> = ({
 						.map((row) => (
 							<div
 								key={row.user_id}
-								css={{
-									display: "flex",
-									justifyContent: "space-between",
-									alignItems: "center",
-									fontSize: 14,
-									paddingTop: 8,
-									paddingBottom: 8,
-								}}
+								className="flex justify-between items-center font-sm py-2"
 							>
-								<div css={{ display: "flex", alignItems: "center", gap: 12 }}>
+								<div className="flex items-center gap-3">
 									<Avatar fallback={row.username} src={row.avatar_url} />
-									<div css={{ fontWeight: 500 }}>{row.username}</div>
+									<div className="font-medium">{row.username}</div>
 								</div>
 								<div
 									css={{
 										color: theme.palette.text.secondary,
-										fontSize: 13,
-										textAlign: "right",
 									}}
+									className="text-[13px] text-right"
 								>
 									{formatTime(row.seconds)}
 								</div>
@@ -477,51 +444,30 @@ const TemplateUsagePanel: FC<TemplateUsagePanelProps> = ({
 		.colors(validUsage?.length ?? 0);
 
 	return (
-		<Panel {...panelProps} css={{ overflowY: "auto" }}>
+		<Panel {...panelProps} className="overflow-y-auto">
 			<PanelHeader>
 				<PanelTitle>App & IDE Usage</PanelTitle>
 			</PanelHeader>
 			<PanelContent>
-				{!error && !data && <Loader css={{ height: "100%" }} />}
+				{!error && !data && <Loader className="h-full" />}
 				{(error || validUsage?.length === 0) && (
 					<NoDataAvailable error={error} />
 				)}
 				{validUsage && validUsage.length > 0 && (
-					<div
-						css={{
-							display: "flex",
-							flexDirection: "column",
-							gap: 24,
-						}}
-					>
+					<div className="flex flex-col gap-6">
 						{validUsage.map((usage, i) => {
 							const percentage = (usage.seconds / totalInSeconds) * 100;
 							return (
-								<div
-									key={usage.slug}
-									css={{ display: "flex", gap: 24, alignItems: "center" }}
-								>
-									<div css={{ display: "flex", alignItems: "center", gap: 8 }}>
-										<div
-											css={{
-												width: 20,
-												height: 20,
-												display: "flex",
-												alignItems: "center",
-												justifyContent: "center",
-											}}
-										>
+								<div key={usage.slug} className="flex gap-6 items-center">
+									<div className="flex items-center gap-2">
+										<div className="size-5 flex items-center justify-center">
 											<img
 												src={usage.icon}
 												alt=""
-												style={{
-													objectFit: "contain",
-													width: "100%",
-													height: "100%",
-												}}
+												className="object-contain w-full h-full"
 											/>
 										</div>
-										<div css={{ fontSize: 13, fontWeight: 500, width: 200 }}>
+										<div className="text-[13px] font-medium w-[200px]">
 											{usage.display_name}
 										</div>
 									</div>
@@ -531,14 +477,12 @@ const TemplateUsagePanel: FC<TemplateUsagePanelProps> = ({
 												value={percentage}
 												variant="determinate"
 												css={{
-													width: "100%",
-													height: 8,
 													backgroundColor: theme.palette.divider,
 													"& .MuiLinearProgress-bar": {
 														backgroundColor: usageColors[i],
-														borderRadius: 999,
 													},
 												}}
+												className="w-full h-2 [&>_.MuiLinearProgress-bar]:rounded-full"
 											/>
 										</TooltipTrigger>
 										<TooltipContent>
@@ -549,20 +493,17 @@ const TemplateUsagePanel: FC<TemplateUsagePanelProps> = ({
 									<Stack
 										spacing={0}
 										css={{
-											fontSize: 13,
 											color: theme.palette.text.secondary,
-											width: 120,
-											flexShrink: 0,
-											lineHeight: "1.5",
 										}}
+										className="text-[13px] w-[120px] flex-shrink-0 leading-normal"
 									>
 										{formatTime(usage.seconds)}
 										{usage.times_used > 0 && (
 											<span
 												css={{
-													fontSize: 12,
 													color: theme.palette.text.disabled,
 												}}
+												className="text-[12px]"
 											>
 												Opened {usage.times_used.toLocaleString()}{" "}
 												{usage.times_used === 1 ? "time" : "times"}
@@ -597,9 +538,9 @@ const TemplateParametersUsagePanel: FC<TemplateParametersUsagePanelProps> = ({
 				<PanelTitle>Parameters usage</PanelTitle>
 			</PanelHeader>
 			<PanelContent>
-				{!error && !data && <Loader css={{ height: 200 }} />}
+				{!error && !data && <Loader className="h-[200px]" />}
 				{(error || data?.length === 0) && (
-					<NoDataAvailable error={error} css={{ height: 200 }} />
+					<NoDataAvailable error={error} className="h-[200px]" />
 				)}
 				{data?.map((parameter, parameterIndex) => {
 					const label =
@@ -609,30 +550,11 @@ const TemplateParametersUsagePanel: FC<TemplateParametersUsagePanelProps> = ({
 					return (
 						<div
 							key={parameter.name}
-							css={{
-								display: "flex",
-								alignItems: "start",
-								padding: 24,
-								marginLeft: -24,
-								marginRight: -24,
-								borderTop: `1px solid ${theme.palette.divider}`,
-								width: "calc(100% + 48px)",
-								"&:first-of-type": {
-									borderTop: 0,
-								},
-								gap: 24,
-							}}
+							className="flex items-start p-6 -mx-6 w-[calc(100%_+_48px)] first-of-type:border-t-0 gap-6"
 						>
-							<div css={{ flex: 1 }}>
-								<div css={{ fontWeight: 500 }}>{label}</div>
-								<p
-									css={{
-										fontSize: 14,
-										color: theme.palette.text.secondary,
-										maxWidth: 400,
-										margin: 0,
-									}}
-								>
+							<div className="flex-1">
+								<div className="font-medium">{label}</div>
+								<p className="text-sm leading-none max-w-[400px] m-0">
 									{parameter.description}
 								</p>
 							</div>
@@ -691,15 +613,7 @@ const ParameterUsageRow: FC<HTMLAttributes<HTMLDivElement>> = ({
 	...attrs
 }) => {
 	return (
-		<div
-			css={{
-				display: "flex",
-				alignItems: "baseline",
-				justifyContent: "space-between",
-				padding: "4px 0",
-			}}
-			{...attrs}
-		>
+		<div className="flex items-baseline justify-between py-1" {...attrs}>
 			{children}
 		</div>
 	);
@@ -723,23 +637,13 @@ const ParameterUsageLabel: FC<ParameterUsageLabelProps> = ({
 		const label = option.name;
 
 		return (
-			<div
-				css={{
-					display: "flex",
-					alignItems: "center",
-					gap: 16,
-				}}
-			>
+			<div className="flex items-center gap-4">
 				{icon && (
-					<div css={{ width: 16, height: 16, lineHeight: 1 }}>
+					<div className="size-4 leading-none">
 						<img
 							alt=""
 							src={icon}
-							css={{
-								objectFit: "contain",
-								width: "100%",
-								height: "100%",
-							}}
+							className="object-contain w-full h-full"
 							aria-labelledby={ariaId}
 						/>
 					</div>
@@ -756,11 +660,9 @@ const ParameterUsageLabel: FC<ParameterUsageLabelProps> = ({
 				target="_blank"
 				rel="noreferrer"
 				css={{
-					display: "flex",
-					alignItems: "center",
-					gap: 1,
 					color: theme.palette.text.primary,
 				}}
+				className="flex items-center gap-[1px]"
 			>
 				<TextValue>{usage.value}</TextValue>
 				<LinkIcon className="size-icon-xs text-content-link" />
@@ -771,16 +673,14 @@ const ParameterUsageLabel: FC<ParameterUsageLabelProps> = ({
 	if (parameter.type === "list(string)") {
 		const values = JSON.parse(usage.value) as string[];
 		return (
-			<div css={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
+			<div className="flex gap-2 flex-wrap">
 				{values.map((v, i) => (
 					<div
 						key={i}
 						css={{
-							padding: "2px 12px",
-							borderRadius: 999,
 							background: theme.palette.divider,
-							whiteSpace: "nowrap",
 						}}
+						className="px-3 py-0.5 rounded-full whitespace-nowrap"
 					>
 						{v}
 					</div>
@@ -791,13 +691,7 @@ const ParameterUsageLabel: FC<ParameterUsageLabelProps> = ({
 
 	if (parameter.type === "bool") {
 		return (
-			<div
-				css={{
-					display: "flex",
-					alignItems: "center",
-					gap: 8,
-				}}
-			>
+			<div className="flex items-center gap-2">
 				{usage.value === "false" ? (
 					<>
 						<CircleXIcon className="size-icon-xs text-content-destructive" />
@@ -829,12 +723,10 @@ const Panel: FC<PanelProps> = ({ children, ...attrs }) => {
 	return (
 		<div
 			css={{
-				borderRadius: 8,
 				border: `1px solid ${theme.palette.divider}`,
 				backgroundColor: theme.palette.background.paper,
-				display: "flex",
-				flexDirection: "column",
 			}}
+			className="rounded-lg flex flex-col"
 			{...attrs}
 		>
 			{children}
@@ -847,7 +739,7 @@ const PanelHeader: FC<HTMLAttributes<HTMLDivElement>> = ({
 	...attrs
 }) => {
 	return (
-		<div css={{ padding: "20px 24px 24px" }} {...attrs}>
+		<div className="pt-5 px-6 pb-6" {...attrs}>
 			{children}
 		</div>
 	);
@@ -858,7 +750,7 @@ const PanelTitle: FC<HTMLAttributes<HTMLDivElement>> = ({
 	...attrs
 }) => {
 	return (
-		<div css={{ fontSize: 14, fontWeight: 500 }} {...attrs}>
+		<div className="text-sm font-medium leading-none" {...attrs}>
 			{children}
 		</div>
 	);
@@ -869,7 +761,7 @@ const PanelContent: FC<HTMLAttributes<HTMLDivElement>> = ({
 	...attrs
 }) => {
 	return (
-		<div css={{ padding: "0 24px 24px", flex: 1 }} {...attrs}>
+		<div className="pt-0 px-6 pb-6 flex-1" {...attrs}>
 			{children}
 		</div>
 	);
@@ -886,14 +778,9 @@ const NoDataAvailable: FC<NoDataAvailableProps> = ({ error, ...props }) => {
 		<div
 			{...props}
 			css={{
-				fontSize: 13,
 				color: theme.palette.text.secondary,
-				textAlign: "center",
-				height: "100%",
-				display: "flex",
-				alignItems: "center",
-				justifyContent: "center",
 			}}
+			className="text-[13px] text-center h-full flex items-center justify-center"
 		>
 			{error
 				? getErrorDetail(error) ||
@@ -911,9 +798,8 @@ const TextValue: FC<PropsWithChildren> = ({ children }) => {
 			<span
 				css={{
 					color: theme.palette.text.secondary,
-					weight: 600,
-					marginRight: 2,
 				}}
+				className="w-[600px] mr-0.5"
 			>
 				&quot;
 			</span>
@@ -921,9 +807,8 @@ const TextValue: FC<PropsWithChildren> = ({ children }) => {
 			<span
 				css={{
 					color: theme.palette.text.secondary,
-					weight: 600,
-					marginLeft: 2,
 				}}
+				className="w-[600px] ml-0.5"
 			>
 				&quot;
 			</span>
diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/WeekPicker.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/WeekPicker.tsx
index e203e8e406f86..a96493613e93a 100644
--- a/site/src/pages/TemplatePage/TemplateInsightsPage/WeekPicker.tsx
+++ b/site/src/pages/TemplatePage/TemplateInsightsPage/WeekPicker.tsx
@@ -64,7 +64,7 @@ export const WeekPicker: FC<WeekPickerProps> = ({ value, onChange }) => {
 
 					return (
 						<MenuItem
-							css={{ fontSize: 14, justifyContent: "space-between" }}
+							className="text-sm justify-between leading-relaxed"
 							key={option}
 							onClick={() => {
 								onChange(optionRange);
@@ -72,7 +72,7 @@ export const WeekPicker: FC<WeekPickerProps> = ({ value, onChange }) => {
 							}}
 						>
 							Last {option} weeks
-							<div css={{ width: 16, height: 16 }}>
+							<div className="size-4">
 								{numberOfWeeks === option && (
 									<CheckIcon className="size-icon-xs" />
 								)}
diff --git a/site/src/pages/TemplatePage/TemplateVersionsPage/VersionsTable.tsx b/site/src/pages/TemplatePage/TemplateVersionsPage/VersionsTable.tsx
index ec340ceba7197..94bb170324d29 100644
--- a/site/src/pages/TemplatePage/TemplateVersionsPage/VersionsTable.tsx
+++ b/site/src/pages/TemplatePage/TemplateVersionsPage/VersionsTable.tsx
@@ -69,7 +69,7 @@ export const VersionsTable: FC<VersionsTableProps> = ({
 				{versions && versions.length === 0 && (
 					<TableRow>
 						<TableCell colSpan={999}>
-							<div css={{ padding: 32 }}>
+							<div className="p-8">
 								<EmptyState message={Language.emptyMessage} />
 							</div>
 						</TableCell>
diff --git a/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx b/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx
index e1ed15d198a0e..4952a7660ca58 100644
--- a/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx
+++ b/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx
@@ -222,7 +222,7 @@ export const TemplateSettingsForm: FC<TemplateSettingsForm> = ({
 											direction="row"
 											spacing={2}
 											alignItems="center"
-											css={{ marginTop: 16 }}
+											className="mt-4"
 										>
 											<PremiumBadge />
 											<span>Premium license required to be enabled.</span>
diff --git a/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/ScheduleDialog.tsx b/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/ScheduleDialog.tsx
index 9c3ac62692155..8c38e7440cdaa 100644
--- a/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/ScheduleDialog.tsx
+++ b/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/ScheduleDialog.tsx
@@ -1,10 +1,10 @@
-import type { Interpolation, Theme } from "@emotion/react";
 import Checkbox from "@mui/material/Checkbox";
 import DialogActions from "@mui/material/DialogActions";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import type { ConfirmDialogProps } from "components/Dialogs/ConfirmDialog/ConfirmDialog";
 import { Dialog, DialogActionButtons } from "components/Dialogs/Dialog";
 import type { FC } from "react";
+import { cn } from "utils/cn";
 
 interface ScheduleDialogProps extends ConfirmDialogProps {
 	readonly inactiveWorkspacesToGoDormant: number;
@@ -55,18 +55,18 @@ export const ScheduleDialog: FC<ScheduleDialogProps> = ({
 
 	return (
 		<Dialog
-			css={styles.dialogWrapper}
+			className={classNames.dialogWrapper}
 			onClose={onClose}
 			open={open}
 			data-testid="dialog"
 		>
-			<div css={styles.dialogContent}>
-				<h3 css={styles.dialogTitle}>{title}</h3>
+			<div className={classNames.dialogContent}>
+				<h3 className={classNames.dialogTitle}>{title}</h3>
 
 				{showDormancyWarning && (
 					<>
 						<h4>Dormancy Threshold</h4>
-						<p css={styles.dialogDescription}>
+						<p className={classNames.dialogDescription}>
 							This change will result in{" "}
 							<strong>{inactiveWorkspacesToGoDormant}</strong>{" "}
 							{inactiveWorkspacesToGoDormant === 1 ? "workspace" : "workspaces"}{" "}
@@ -79,7 +79,7 @@ export const ScheduleDialog: FC<ScheduleDialogProps> = ({
 							inactivity period for all template workspaces?
 						</p>
 						<FormControlLabel
-							css={{ marginTop: 16 }}
+							className="mt-4"
 							control={
 								<Checkbox
 									size="small"
@@ -96,7 +96,7 @@ export const ScheduleDialog: FC<ScheduleDialogProps> = ({
 				{showDeletionWarning && (
 					<>
 						<h4>Dormancy Auto-Deletion</h4>
-						<p css={styles.dialogDescription}>
+						<p className={classNames.dialogDescription}>
 							This change will result in{" "}
 							<strong>{dormantWorkspacesToBeDeleted}</strong>{" "}
 							{dormantWorkspacesToBeDeleted === 1 ? "workspace" : "workspaces"}{" "}
@@ -109,7 +109,7 @@ export const ScheduleDialog: FC<ScheduleDialogProps> = ({
 							dormancy period for all template workspaces?
 						</p>
 						<FormControlLabel
-							css={{ marginTop: 16 }}
+							className="mt-4"
 							control={
 								<Checkbox
 									size="small"
@@ -139,42 +139,19 @@ export const ScheduleDialog: FC<ScheduleDialogProps> = ({
 	);
 };
 
-const styles = {
-	dialogWrapper: (theme) => ({
-		"& .MuiPaper-root": {
-			background: theme.palette.background.paper,
-			border: `1px solid ${theme.palette.divider}`,
-		},
-		"& .MuiDialogActions-spacing": {
-			padding: "0 40px 40px",
-		},
-	}),
-	dialogContent: (theme) => ({
-		color: theme.palette.text.secondary,
-		padding: 40,
-	}),
-	dialogTitle: (theme) => ({
-		margin: 0,
-		marginBottom: 16,
-		color: theme.palette.text.primary,
-		fontWeight: 400,
-		fontSize: 20,
-	}),
-	dialogDescription: (theme) => ({
-		color: theme.palette.text.secondary,
-		lineHeight: "160%",
-		fontSize: 16,
-
-		"& strong": {
-			color: theme.palette.text.primary,
-		},
-
-		"& p:not(.MuiFormHelperText-root)": {
-			margin: 0,
-		},
-
-		"& > p": {
-			margin: "8px 0",
-		},
-	}),
-} satisfies Record<string, Interpolation<Theme>>;
+const classNames = {
+	dialogWrapper: cn(
+		"[&_.MuiPaper-root]:bg-surface-secondary [&_.MuiPaper-root]:border",
+		"[&_.MuiPaper-root]:border-solid [&_.MuiPaper-root]:border-zinc-700",
+		"[&_.MuiDialogActions-spacing]:pt-0 [&_.MuiDialogActions-spacing]:px-10",
+		"[&_.MuiDialogActions-spacing]:pb-10",
+	),
+	dialogContent: "text-content-secondary p-10",
+	dialogTitle: "m-0 mb-4 text-content-primary font-base text-xl",
+	dialogDescription: cn(
+		"text-content-secondary leading-relaxed text-base",
+		"[&_strong]:text-content-primary",
+		"[&_p:not(.MuiFormHelperText-root)]:m-0",
+		"[&_>p]:my-2",
+	),
+};
diff --git a/site/src/pages/TemplateSettingsPage/TemplateSettingsLayout.tsx b/site/src/pages/TemplateSettingsPage/TemplateSettingsLayout.tsx
index 11e8d96950ba8..f9ee1914c5422 100644
--- a/site/src/pages/TemplateSettingsPage/TemplateSettingsLayout.tsx
+++ b/site/src/pages/TemplateSettingsPage/TemplateSettingsLayout.tsx
@@ -54,7 +54,7 @@ export const TemplateSettingsLayout: FC = () => {
 			<title>{pageTitle(templateName, "Settings")}</title>
 
 			<Margins>
-				<Stack css={{ padding: "48px 0" }} direction="row" spacing={10}>
+				<Stack className="py-12 px-0" direction="row" spacing={10}>
 					{templateQuery.isError || permissionsQuery.isError ? (
 						<ErrorAlert error={templateQuery.error} />
 					) : (
@@ -66,7 +66,7 @@ export const TemplateSettingsLayout: FC = () => {
 						>
 							<Sidebar template={templateQuery.data} />
 							<Suspense fallback={<Loader />}>
-								<main css={{ width: "100%" }}>
+								<main className="w-full">
 									<Outlet />
 								</main>
 							</Suspense>
diff --git a/site/src/pages/TemplateSettingsPage/TemplateVariablesPage/TemplateVariablesPageView.tsx b/site/src/pages/TemplateSettingsPage/TemplateVariablesPage/TemplateVariablesPageView.tsx
index bb5b4e419a680..35647cdd4d8ef 100644
--- a/site/src/pages/TemplateSettingsPage/TemplateVariablesPage/TemplateVariablesPageView.tsx
+++ b/site/src/pages/TemplateSettingsPage/TemplateVariablesPage/TemplateVariablesPageView.tsx
@@ -48,7 +48,7 @@ export const TemplateVariablesPageView: FC<TemplateVariablesPageViewProps> = ({
 				<PageHeaderTitle>Template variables</PageHeaderTitle>
 			</PageHeader>
 			{hasError && (
-				<Stack css={{ marginBottom: 64 }}>
+				<Stack className="mb-16">
 					{Boolean(errors.buildError) && (
 						<ErrorAlert error={errors.buildError} />
 					)}
diff --git a/site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.tsx b/site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.tsx
index 6d1225cbe1c11..fa8436c219c72 100644
--- a/site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.tsx
+++ b/site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.tsx
@@ -1,5 +1,4 @@
 import Link from "@mui/material/Link";
-import useTheme from "@mui/system/useTheme";
 import type { ProvisionerDaemon } from "api/typesGenerated";
 import { FormSection } from "components/Form/Form";
 import { TopbarButton } from "components/FullPageLayout/Topbar";
@@ -22,15 +21,10 @@ export const ProvisionerTagsPopover: FC<ProvisionerTagsPopoverProps> = ({
 	tags,
 	onTagsChange,
 }) => {
-	const theme = useTheme();
-
 	return (
 		<Popover>
 			<PopoverTrigger asChild>
-				<TopbarButton
-					color="neutral"
-					css={{ paddingLeft: 0, paddingRight: 0, minWidth: "28px !important" }}
-				>
+				<TopbarButton color="neutral" className="!min-w-[28px]">
 					<ChevronDownIcon className="size-icon-xs" />
 					<span className="sr-only">Expand provisioner tags</span>
 				</TopbarButton>
@@ -39,16 +33,10 @@ export const ProvisionerTagsPopover: FC<ProvisionerTagsPopoverProps> = ({
 				align="end"
 				className="w-[300px] bg-surface-secondary border-surface-quaternary"
 			>
-				<div
-					css={{
-						color: theme.palette.text.secondary,
-						padding: 20,
-						borderBottom: `1px solid ${theme.palette.divider}`,
-					}}
-				>
+				<div className="text-content-secondary p-5 border-0 border-b border-solid border-border">
 					<FormSection
 						classes={{
-							root: "flex flex-col lg:flex-col gap-4 lg:gap-4",
+							root: "flex flex-col gap-4",
 						}}
 						title="Provisioner Tags"
 						description={
diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
index 93ed0219890d7..7c79a65df541f 100644
--- a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
+++ b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
@@ -1,4 +1,4 @@
-import { type Interpolation, type Theme, useTheme } from "@emotion/react";
+import { useTheme } from "@emotion/react";
 import IconButton from "@mui/material/IconButton";
 import { getErrorDetail, getErrorMessage } from "api/errors";
 import type {
@@ -52,7 +52,7 @@ import {
 	Link as RouterLink,
 	unstable_usePrompt as usePrompt,
 } from "react-router";
-import { MONOSPACE_FONT_FAMILY } from "theme/constants";
+import { cn } from "utils/cn";
 import {
 	createFile,
 	existsFile,
@@ -212,14 +212,8 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 
 	return (
 		<>
-			<div css={{ height: "100%", display: "flex", flexDirection: "column" }}>
-				<Topbar
-					css={{
-						display: "grid",
-						gridTemplateColumns: "1fr 2fr 1fr",
-					}}
-					data-testid="topbar"
-				>
+			<div className="h-full flex flex-col">
+				<Topbar className="grid grid-cols-[1fr_2fr_1fr]" data-testid="topbar">
 					<div>
 						<Tooltip>
 							<TooltipTrigger asChild>
@@ -240,32 +234,17 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 						/>
 						<RouterLink
 							to={templateLink}
-							css={{
-								color: theme.palette.text.primary,
-								textDecoration: "none",
-
-								"&:hover": {
-									textDecoration: "underline",
-								},
-							}}
+							className="text-content-primary no-underline hover:underline"
 						>
 							{template.display_name || template.name}
 						</RouterLink>
 						<TopbarDivider />
-						<span css={{ color: theme.palette.text.secondary }}>
+						<span className="text-content-secondary">
 							{templateVersion.name}
 						</span>
 					</TopbarData>
 
-					<div
-						css={{
-							display: "flex",
-							alignItems: "center",
-							justifyContent: "flex-end",
-							gap: 8,
-							paddingRight: 16,
-						}}
-					>
+					<div className="flex items-center justify-end gap-2 pr-4">
 						<span className="mr-2">
 							<Button asChild size="sm" variant="outline">
 								<a
@@ -309,28 +288,13 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 					</div>
 				</Topbar>
 
-				<div
-					css={{
-						display: "flex",
-						flex: 1,
-						flexBasis: 0,
-						overflow: "hidden",
-						position: "relative",
-					}}
-				>
+				<div className="flex flex-1 flex-basis-0 overflow-hidden relative">
 					{publishedVersion && (
 						<div
 							// We need this to reset the dismissable state of the component
 							// when the published version changes
 							key={publishedVersion.id}
-							css={{
-								position: "absolute",
-								width: "100%",
-								display: "flex",
-								justifyContent: "center",
-								padding: 12,
-								zIndex: 10,
-							}}
+							className="absolute w-full flex justify-center p-3 z-10"
 						>
 							<Alert
 								severity="success"
@@ -351,31 +315,10 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 					)}
 
 					<Sidebar>
-						<div
-							css={{
-								height: 42,
-								padding: "0 8px 0 16px",
-								display: "flex",
-								alignItems: "center",
-							}}
-						>
-							<span
-								css={{
-									color: theme.palette.text.primary,
-									fontSize: 13,
-								}}
-							>
-								Files
-							</span>
+						<div className="h-[42px] pr-2 pl-4 flex items-center">
+							<span className="text-content-primary text-[13px]">Files</span>
 
-							<div
-								css={{
-									marginLeft: "auto",
-									"& svg": {
-										fill: theme.palette.text.primary,
-									},
-								}}
-							>
+							<div className="ml-auto [&_svg]:text-content-primary">
 								<Tooltip>
 									<TooltipTrigger asChild>
 										<IconButton
@@ -457,51 +400,22 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 						/>
 					</Sidebar>
 
-					<div
-						css={{
-							display: "flex",
-							flexDirection: "column",
-							width: "100%",
-							minHeight: "100%",
-							overflow: "hidden",
-						}}
-					>
-						<div css={{ flex: 1, overflowY: "auto" }} data-chromatic="ignore">
+					<div className="flex flex-col w-full min-h-full overflow-hidden">
+						<div className="flex-1 overflow-y-auto" data-chromatic="ignore">
 							{activePath ? (
 								isEditorValueBinary ? (
 									<div
 										role="alert"
-										css={{
-											width: "100%",
-											height: "100%",
-											display: "flex",
-											alignItems: "center",
-											justifyContent: "center",
-											padding: 40,
-										}}
+										className="w-full h-full flex items-center justify-center p-10"
 									>
-										<div
-											css={{
-												display: "flex",
-												flexDirection: "column",
-												alignItems: "center",
-												maxWidth: 420,
-												textAlign: "center",
-											}}
-										>
+										<div className="flex flex-col items-center max-w-105 text-center">
 											<TriangleAlertIcon
 												css={{
 													color: theme.roles.warning.fill.outline,
 												}}
 												className="size-icon-lg"
 											/>
-											<p
-												css={{
-													margin: 0,
-													padding: 0,
-													marginTop: 24,
-												}}
-											>
+											<p className="m-0 p-0 mt-6">
 												The file is not displayed in the text editor because it
 												is either binary or uses an unsupported text encoding.
 											</p>
@@ -527,40 +441,28 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 							)}
 						</div>
 
-						<div
-							css={{
-								borderTop: `1px solid ${theme.palette.divider}`,
-								overflow: "hidden",
-								display: "flex",
-								flexDirection: "column",
-							}}
-						>
+						<div className="overflow-hidden flex flex-col border-0 border-t border-solid border-border">
 							<div
-								css={{
-									display: "flex",
-									alignItems: "center",
-									borderBottom: selectedTab
-										? `1px solid ${theme.palette.divider}`
-										: 0,
-								}}
+								className={cn(
+									"flex items-center",
+									selectedTab && "border-0 border-b border-solid border-border",
+								)}
 							>
 								<div
-									css={{
-										display: "flex",
-
-										"& .MuiTab-root": {
-											padding: 0,
-											fontSize: 14,
-											textTransform: "none",
-											letterSpacing: "unset",
-										},
-									}}
+									className={cn(
+										"flex",
+										"[&_.MuiTab-root]:p-0 [&_.MuiTab-root]:text-[14px]",
+										"[&_.MuiTab-root]:[text-transform:none]",
+										"[&_.MuiTab-root]:tracking-[unset]",
+									)}
 								>
 									<button
 										type="button"
 										disabled={!buildLogs}
-										css={styles.tab}
-										className={selectedTab === "logs" ? "active" : ""}
+										className={cn(
+											classNames.tab,
+											selectedTab === "logs" && "active",
+										)}
 										onClick={() => {
 											setSelectedTab("logs");
 										}}
@@ -571,8 +473,10 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 									<button
 										type="button"
 										disabled={!canPublish}
-										css={styles.tab}
-										className={selectedTab === "resources" ? "active" : ""}
+										className={cn(
+											classNames.tab,
+											selectedTab === "resources" && "active",
+										)}
 										onClick={() => {
 											setSelectedTab("resources");
 										}}
@@ -586,12 +490,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 										onClick={() => {
 											setSelectedTab(undefined);
 										}}
-										css={{
-											marginLeft: "auto",
-											width: 36,
-											height: 36,
-											borderRadius: 0,
-										}}
+										className="ml-auto size-9 rounded-none"
 									>
 										<XIcon className="size-icon-xs" />
 									</IconButton>
@@ -599,7 +498,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 							</div>
 
 							{selectedTab === "logs" && (
-								<div css={[styles.logs, styles.tabContent]}>
+								<div className={cn(classNames.logs, classNames.tabContent)}>
 									{templateVersion.job.error ? (
 										<div>
 											<ProvisionerAlert
@@ -619,14 +518,14 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 													tags={templateVersion.job.tags}
 													variant={AlertVariant.Inline}
 												/>
-												<Loader css={{ height: "100%" }} />
+												<Loader className="h-full" />
 											</>
 										)
 									)}
 
 									{gotBuildLogs && (
 										<WorkspaceBuildLogs
-											css={styles.buildLogs}
+											className={classNames.buildLogs}
 											hideTimestamps
 											logs={buildLogs}
 										/>
@@ -639,7 +538,9 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 							)}
 
 							{selectedTab === "resources" && (
-								<div css={[styles.resources, styles.tabContent]}>
+								<div
+									className={cn(classNames.resources, classNames.tabContent)}
+								>
 									{resources && (
 										<TemplateResourcesTable
 											resources={resources.filter(
@@ -654,6 +555,8 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 				</div>
 			</div>
 
+			<div className={"duratio"}></div>
+
 			<PublishTemplateVersionDialog
 				key={templateVersion.name}
 				publishingError={publishingError}
@@ -706,121 +609,41 @@ const useLeaveSiteWarning = (enabled: boolean) => {
 	});
 };
 
-const styles = {
-	tab: (theme) => ({
-		"&:not(:disabled)": {
-			cursor: "pointer",
-		},
-		padding: 12,
-		fontSize: 10,
-		textTransform: "uppercase",
-		letterSpacing: "0.5px",
-		fontWeight: 500,
-		background: "transparent",
-		fontFamily: "inherit",
-		border: 0,
-		color: theme.palette.text.secondary,
-		transition: "150ms ease all",
-		display: "flex",
-		gap: 8,
-		alignItems: "center",
-		justifyContent: "center",
-		position: "relative",
-
-		"& svg": {
-			maxWidth: 12,
-			maxHeight: 12,
-		},
-
-		"&.active": {
-			color: theme.palette.text.primary,
-			"&:after": {
-				content: '""',
-				display: "block",
-				width: "100%",
-				height: 1,
-				backgroundColor: theme.palette.primary.main,
-				bottom: -1,
-				position: "absolute",
-			},
-		},
-
-		"&:not(:disabled):hover": {
-			color: theme.palette.text.primary,
-		},
-
-		"&:disabled": {
-			color: theme.palette.text.disabled,
-		},
-	}),
-
-	tabBar: (theme) => ({
-		padding: "8px 16px",
-		position: "sticky",
-		top: 0,
-		background: theme.palette.background.default,
-		borderBottom: `1px solid ${theme.palette.divider}`,
-		color: theme.palette.text.primary,
-		textTransform: "uppercase",
-		fontSize: 12,
-
-		"&.top": {
-			borderTop: `1px solid ${theme.palette.divider}`,
-		},
-	}),
-
-	tabContent: {
-		height: 280,
-		overflowY: "auto",
-	},
-
-	logs: {
-		display: "flex",
-		height: "100%",
-		flexDirection: "column",
-	},
-
-	buildLogs: {
-		borderRadius: 0,
-		border: 0,
-
+const classNames = {
+	tab: cn(
+		"p-3 text-xs uppercase spacing-[0.5px]",
+		"text-regular bg-transparent font-[inherit] border-0",
+		"text-content-secondary transition-all duration-150",
+		"flex gap-2 items-center justify-center relative",
+		"[&:not(:disabled)]:cursor-pointer",
+		"[&_svg]:max-w-3 [&_svg]:max-h-3",
+		"[&.active]:text-content-primary [&.active]:after:content-[''] [&.active]:after:block",
+		"[&.active]:after:bg-surface-primary [&.active]:after:bottom-[-1px] [&.active]:after:absolute",
+		"[&.active]:after:w-full [&.active]:after:h-1",
+		"[&:not(:disabled):hover]:text-content-primary",
+		"[&:disabled]:text-content-disabled",
+	),
+	tabBar: cn(
+		"py-2 px-4 sticky top-0 bg-content-primary",
+		"border-0 border-b border-solid border-border",
+		"text-content-primary text-xs uppercase",
+		"[&.top]:border-0 [&.top]:border-t [&.top]:border-solid [&.top]:border-border",
+	),
+	tabContent: "h-70 overflow-y-auto",
+	logs: "flex flex-col h-full",
+	buildLogs: cn(
+		"border-0 rounded-[0px]",
 		// Hack to update logs header and lines
-		"& .logs-header": {
-			border: 0,
-			padding: "8px 16px",
-			fontFamily: MONOSPACE_FONT_FAMILY,
-
-			"&:first-of-type": {
-				paddingTop: 16,
-			},
-
-			"&:last-child": {
-				paddingBottom: 16,
-			},
-		},
-
-		"& .logs-line": {
-			paddingLeft: 16,
-		},
-
-		"& .logs-container": {
-			border: "0 !important",
-		},
-	},
-
-	resources: {
+		"[&_.logs-header]:border-0 [&_.logs-header]:py-2",
+		"[&_.logs-header]:px-4 [&_.logs-header]:font-mono",
+		// Hack to update logs header and lines
+		"[&_.logs-header]:first-of-type:pt-4 [&_.logs-header]:last-child:pb-4",
+		"[&_.logs-line]:pl-4 [&_.logs-container]:!border-0",
+	),
+	resources: cn(
 		// Hack to access customize resource-card from here
-		"& .resource-card": {
-			borderLeft: 0,
-			borderRight: 0,
-
-			"&:first-of-type": {
-				borderTop: 0,
-			},
-
-			"&:last-child": {
-				borderBottom: 0,
-			},
-		},
-	},
-} satisfies Record<string, Interpolation<Theme>>;
+		"[&_.resource-card]:border-l-0 [&_.resource-card]:border-r-0",
+		"[&_.resource-card]:first-of-type:border-t-0",
+		"[&_.resource-card]:last-child:border-b-0",
+	),
+};
diff --git a/site/src/pages/TemplatesPage/EmptyTemplates.tsx b/site/src/pages/TemplatesPage/EmptyTemplates.tsx
index 72a47c3417d5e..8ba04d0f0505d 100644
--- a/site/src/pages/TemplatesPage/EmptyTemplates.tsx
+++ b/site/src/pages/TemplatesPage/EmptyTemplates.tsx
@@ -78,7 +78,7 @@ export const EmptyTemplates: FC<EmptyTemplatesProps> = ({
 							))}
 						</div>
 
-						<Button size="sm" asChild css={{ borderRadius: 9999 }}>
+						<Button size="sm" asChild className="rounded-full">
 							<RouterLink to="/starter-templates">
 								View all starter templates
 							</RouterLink>
diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx
index 5408ad742722c..464e5c785dcb9 100644
--- a/site/src/pages/TemplatesPage/TemplatesPageView.tsx
+++ b/site/src/pages/TemplatesPage/TemplatesPageView.tsx
@@ -1,4 +1,3 @@
-import type { Interpolation, Theme } from "@emotion/react";
 import Skeleton from "@mui/material/Skeleton";
 import { hasError, isApiValidationError } from "api/errors";
 import type { Template, TemplateExample } from "api/typesGenerated";
@@ -42,6 +41,7 @@ import { linkToTemplate, useLinks } from "modules/navigation";
 import type { WorkspacePermissions } from "modules/permissions/workspaces";
 import type { FC } from "react";
 import { Link as RouterLink, useNavigate } from "react-router";
+import { cn } from "utils/cn";
 import { createDayString } from "utils/createDayString";
 import { docs } from "utils/docs";
 import {
@@ -111,7 +111,7 @@ const TemplateRow: FC<TemplateRowProps> = ({
 			key={template.id}
 			data-testid={`template-${template.id}`}
 			{...clickableRow}
-			css={styles.tableRow}
+			className={classNames.tableRow}
 		>
 			<TableCell>
 				<AvatarData
@@ -128,18 +128,13 @@ const TemplateRow: FC<TemplateRowProps> = ({
 				/>
 			</TableCell>
 
-			<TableCell css={styles.secondary}>
+			<TableCell className={classNames.secondary}>
 				{showOrganizations ? (
-					<Stack
-						spacing={0}
-						css={{
-							width: "100%",
-						}}
-					>
-						<span css={styles.cellPrimaryLine}>
+					<Stack spacing={0} className="w-full">
+						<span className={classNames.cellPrimaryLine}>
 							{template.organization_display_name}
 						</span>
-						<span css={styles.cellSecondaryLine}>
+						<span className={classNames.cellSecondaryLine}>
 							Used by {Language.developerCount(template.active_user_count)}
 						</span>
 					</Stack>
@@ -148,15 +143,15 @@ const TemplateRow: FC<TemplateRowProps> = ({
 				)}
 			</TableCell>
 
-			<TableCell css={styles.secondary}>
+			<TableCell className={classNames.secondary}>
 				{formatTemplateBuildTime(template.build_time_stats.start.P50)}
 			</TableCell>
 
-			<TableCell data-chromatic="ignore" css={styles.secondary}>
+			<TableCell data-chromatic="ignore" className={classNames.secondary}>
 				{createDayString(template.updated_at)}
 			</TableCell>
 
-			<TableCell css={styles.actionCell}>
+			<TableCell className={classNames.actionCell}>
 				{template.deprecated ? (
 					<DeprecatedBadge />
 				) : workspacePermissions?.[template.organization_id]
@@ -282,7 +277,7 @@ const TableLoader: FC = () => {
 		<TableLoaderSkeleton>
 			<TableRowSkeleton>
 				<TableCell>
-					<div css={{ display: "flex", alignItems: "center", gap: 8 }}>
+					<div className="flex items-center gap-2">
 						<AvatarDataSkeleton />
 					</div>
 				</TableCell>
@@ -303,40 +298,16 @@ const TableLoader: FC = () => {
 	);
 };
 
-const styles = {
-	templateIconWrapper: {
-		// Same size then the avatar component
-		width: 36,
-		height: 36,
-		padding: 2,
-
-		"& img": {
-			width: "100%",
-		},
-	},
-	actionCell: {
-		whiteSpace: "nowrap",
-	},
-	cellPrimaryLine: (theme) => ({
-		color: theme.palette.text.primary,
-		fontWeight: 600,
-	}),
-	cellSecondaryLine: (theme) => ({
-		fontSize: 13,
-		color: theme.palette.text.secondary,
-		lineHeight: "150%",
-	}),
-	secondary: (theme) => ({
-		color: theme.palette.text.secondary,
-	}),
-	tableRow: (theme) => ({
-		"&:hover .actionButton": {
-			color: theme.experimental.l2.hover.text,
-			borderColor: theme.experimental.l2.hover.outline,
-		},
-	}),
-	actionButton: (theme) => ({
-		transition: "none",
-		color: theme.palette.text.primary,
-	}),
-} satisfies Record<string, Interpolation<Theme>>;
+const classNames = {
+	// `size-9` is the same size then the avatar component
+	templateIconWrapper: "size-9 p-0.5 [&_img]:w-full",
+	actionCell: "whitespace-nowrap",
+	cellPrimaryLine: "text-content-primary font-semibold",
+	cellSecondaryLine: "text-[13px] text-content-secondary leading-normal",
+	secondary: "text-content-secondary",
+	tableRow: cn([
+		"[&:hover_.actionButton]:text-content-link",
+		"[&:hover_.actionButton]:border-content-link",
+	]),
+	actionButton: "transition-none text-content-primary",
+};

From 3fbec5a765d8e7c925bdf72aee4e427e49a54fe0 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Mon, 15 Dec 2025 13:15:18 +0000
Subject: [PATCH 2/2] fix: implement various layout shift fixes

---
 site/src/components/HelpTooltip/HelpTooltip.tsx  |  2 +-
 .../TemplateExampleCard/TemplateExampleCard.tsx  |  2 +-
 .../CreateTemplateGalleryPageView.tsx            |  5 +++--
 .../StarterTemplates.tsx                         |  6 +++---
 .../StarterTemplatePageView.tsx                  |  2 +-
 .../TemplateInsightsPage.tsx                     | 16 ++++++++++------
 .../TemplateVersionEditor.tsx                    | 12 ++++++------
 7 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/site/src/components/HelpTooltip/HelpTooltip.tsx b/site/src/components/HelpTooltip/HelpTooltip.tsx
index 29b03616007cc..8e5f32902597d 100644
--- a/site/src/components/HelpTooltip/HelpTooltip.tsx
+++ b/site/src/components/HelpTooltip/HelpTooltip.tsx
@@ -171,7 +171,7 @@ const getIconSpacingFromSize = (size?: Size): number => {
 
 const classNames = {
 	title: "mt-0 mb-2 text-content-primary text-sm leading-relaxed font-semibold",
-	text: "my-1 text-sm leading-relaxed",
+	text: "my-1 text-sm leading-relaxed font-normal",
 	link: "flex items-center text-sm text-content-link",
 	linkIcon: "size-icon-xs mr-2 text-inherit",
 	linksGroup: "mt-4",
diff --git a/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx b/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx
index 39b17aa803e2a..a0592a5c586cc 100644
--- a/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx
+++ b/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx
@@ -18,7 +18,7 @@ export const TemplateExampleCard: FC<TemplateExampleCardProps> = ({
 	...divProps
 }) => {
 	return (
-		<div className={classNames.card} {...divProps}>
+		<div {...divProps} className={cn(classNames.card, divProps.className)}>
 			<div className={classNames.header}>
 				<div className={classNames.icon}>
 					<ExternalImage
diff --git a/site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPageView.tsx b/site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPageView.tsx
index 6256398e17d71..be9a48a4e363d 100644
--- a/site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPageView.tsx
+++ b/site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPageView.tsx
@@ -87,8 +87,9 @@ export const CreateTemplateGalleryPageView: FC<
 };
 
 const classNames = {
-	sectionTitle: "text-content-primary text-base font-normal m-0",
-	cardTitle: "text-content-secondary text-sm font-medium m-0 mb-1",
+	sectionTitle:
+		"text-content-primary text-base font-normal m-0 leading-relaxed",
+	cardTitle: "text-content-secondary text-sm font-semibold m-0 mb-1",
 	cardDescription: "text-[13px] leading-relaxed block text-content-secondary",
 	icon: "flex-shrink-0 w-8 h-8",
 	menuItemIcon: "text-content-secondary size-5",
diff --git a/site/src/pages/CreateTemplateGalleryPage/StarterTemplates.tsx b/site/src/pages/CreateTemplateGalleryPage/StarterTemplates.tsx
index 1898bc54158b5..c97e6b17145e4 100644
--- a/site/src/pages/CreateTemplateGalleryPage/StarterTemplates.tsx
+++ b/site/src/pages/CreateTemplateGalleryPage/StarterTemplates.tsx
@@ -87,7 +87,7 @@ export const StarterTemplates: FC<StarterTemplatesProps> = ({
 			<div className="flex flex-wrap gap-8 h-max">
 				{visibleTemplates?.map((example) => (
 					<TemplateExampleCard
-						className="bg-content-primary"
+						className="bg-surface-secondary leading-"
 						example={example}
 						key={example.id}
 						activeTag={activeTag}
@@ -100,9 +100,9 @@ export const StarterTemplates: FC<StarterTemplatesProps> = ({
 
 const classNames = {
 	filterCaption:
-		"uppercase font-semibold text-sm text-content-secondary tracking-[0.1em]",
+		"uppercase font-semibold text-xs text-content-secondary tracking-[0.1em] leading-loose",
 	tagLink:
-		"text-content-secondary no-underline text-sm uppercase hover:text-content-primary",
+		"text-content-secondary no-underline text-sm capitalize hover:text-content-primary",
 	tagLinkActive: "text-content-primary font-semibold",
 	sectionTitle: "text-content-primary text-base font-normal m-0",
 };
diff --git a/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx b/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx
index 2bdd049a4f05c..44e8876832607 100644
--- a/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx
+++ b/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx
@@ -77,7 +77,7 @@ export const StarterTemplatePageView: FC<StarterTemplatePageViewProps> = ({
 					background: theme.palette.background.paper,
 					border: `1px solid ${theme.palette.divider}`,
 				}}
-				className="bg-content-primary border border-solid border-zinc-700 rounded-lg"
+				className="bg-surface-secondary border border-solid border-border dark:border-zinc-700 rounded-lg"
 				id="readme"
 			>
 				<div className="pt-10 px-10 pb-16 max-w-[800px] m-auto">
diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
index 1dc704536c58b..e5a231b0767e0 100644
--- a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
+++ b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
@@ -55,6 +55,7 @@ import {
 } from "react";
 import { useQuery } from "react-query";
 import { type SetURLSearchParams, useSearchParams } from "react-router";
+import { cn } from "utils/cn";
 import { getLatencyColor } from "utils/latency";
 import {
 	addTime,
@@ -339,7 +340,7 @@ const UsersLatencyPanel: FC<UsersLatencyPanelProps> = ({
 						.map((row) => (
 							<div
 								key={row.user_id}
-								className="flex justify-between items-center font-sm leading-none py-2"
+								className="flex justify-between items-center text-sm leading-none py-2"
 							>
 								<div className="flex items-center gap-3">
 									<Avatar fallback={row.username} src={row.avatar_url} />
@@ -400,7 +401,7 @@ const UsersActivityPanel: FC<UsersActivityPanelProps> = ({
 						.map((row) => (
 							<div
 								key={row.user_id}
-								className="flex justify-between items-center font-sm py-2"
+								className="flex justify-between items-center text-sm py-2"
 							>
 								<div className="flex items-center gap-3">
 									<Avatar fallback={row.username} src={row.avatar_url} />
@@ -444,7 +445,7 @@ const TemplateUsagePanel: FC<TemplateUsagePanelProps> = ({
 		.colors(validUsage?.length ?? 0);
 
 	return (
-		<Panel {...panelProps} className="overflow-y-auto">
+		<Panel {...panelProps} className="col-span-2 overflow-y-auto">
 			<PanelHeader>
 				<PanelTitle>App & IDE Usage</PanelTitle>
 			</PanelHeader>
@@ -726,8 +727,8 @@ const Panel: FC<PanelProps> = ({ children, ...attrs }) => {
 				border: `1px solid ${theme.palette.divider}`,
 				backgroundColor: theme.palette.background.paper,
 			}}
-			className="rounded-lg flex flex-col"
 			{...attrs}
+			className={cn("rounded-lg flex flex-col", attrs.className)}
 		>
 			{children}
 		</div>
@@ -750,7 +751,10 @@ const PanelTitle: FC<HTMLAttributes<HTMLDivElement>> = ({
 	...attrs
 }) => {
 	return (
-		<div className="text-sm font-medium leading-none" {...attrs}>
+		<div
+			{...attrs}
+			className={cn("text-sm font-medium leading-none", attrs.className)}
+		>
 			{children}
 		</div>
 	);
@@ -761,7 +765,7 @@ const PanelContent: FC<HTMLAttributes<HTMLDivElement>> = ({
 	...attrs
 }) => {
 	return (
-		<div className="pt-0 px-6 pb-6 flex-1" {...attrs}>
+		<div className="pt-0 px-6 pb-6 flex-[1_1_0%]" {...attrs}>
 			{children}
 		</div>
 	);
diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
index 7c79a65df541f..7f6aa3ff976e2 100644
--- a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
+++ b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
@@ -611,17 +611,17 @@ const useLeaveSiteWarning = (enabled: boolean) => {
 
 const classNames = {
 	tab: cn(
-		"p-3 text-xs uppercase spacing-[0.5px]",
+		"p-3 text-[10px] uppercase tracking-[0.5px]",
 		"text-regular bg-transparent font-[inherit] border-0",
 		"text-content-secondary transition-all duration-150",
 		"flex gap-2 items-center justify-center relative",
 		"[&:not(:disabled)]:cursor-pointer",
 		"[&_svg]:max-w-3 [&_svg]:max-h-3",
 		"[&.active]:text-content-primary [&.active]:after:content-[''] [&.active]:after:block",
-		"[&.active]:after:bg-surface-primary [&.active]:after:bottom-[-1px] [&.active]:after:absolute",
-		"[&.active]:after:w-full [&.active]:after:h-1",
+		"[&.active]:after:bg-sky-500 [&.active]:after:bottom-[-1px] [&.active]:after:absolute",
+		"[&.active]:after:w-full [&.active]:after:h-[1px]",
 		"[&:not(:disabled):hover]:text-content-primary",
-		"[&:disabled]:text-content-disabled",
+		"disabled:text-content-quaternary",
 	),
 	tabBar: cn(
 		"py-2 px-4 sticky top-0 bg-content-primary",
@@ -643,7 +643,7 @@ const classNames = {
 	resources: cn(
 		// Hack to access customize resource-card from here
 		"[&_.resource-card]:border-l-0 [&_.resource-card]:border-r-0",
-		"[&_.resource-card]:first-of-type:border-t-0",
-		"[&_.resource-card]:last-child:border-b-0",
+		"[&_.resource-card:first-of-type]:rounded-t-0",
+		"[&_.resource-card:last-child]:border-b-0",
 	),
 };