From d1e64affd6db67061cc999b08144136774aa68b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=82=B1=E3=82=A4=E3=83=A9?= <mckayla@hey.com>
Date: Thu, 7 Aug 2025 15:27:49 -0600
Subject: [PATCH] refactor: migrate Abbr to Tailwind (#19242)

---
 site/src/components/Abbr/Abbr.stories.tsx | 15 ++++-----------
 site/src/components/Abbr/Abbr.tsx         | 11 +++++++----
 2 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/site/src/components/Abbr/Abbr.stories.tsx b/site/src/components/Abbr/Abbr.stories.tsx
index 6720b90fff..2b64d5885c 100644
--- a/site/src/components/Abbr/Abbr.stories.tsx
+++ b/site/src/components/Abbr/Abbr.stories.tsx
@@ -25,10 +25,10 @@ export const InlinedShorthand: Story = {
 	},
 	decorators: [
 		(Story) => (
-			<p css={{ maxWidth: "40em" }}>
+			<p className="max-w-2xl">
 				The physical pain of getting bonked on the head with a cartoon mallet
 				lasts precisely 593{" "}
-				<span css={styles.underlined}>
+				<span className="underline decoration-dotted">
 					<Story />
 				</span>
 				. The emotional turmoil and complete embarrassment lasts forever.
@@ -45,7 +45,7 @@ export const Acronym: Story = {
 	},
 	decorators: [
 		(Story) => (
-			<span css={styles.underlined}>
+			<span className="underline decoration-dotted">
 				<Story />
 			</span>
 		),
@@ -60,16 +60,9 @@ export const Initialism: Story = {
 	},
 	decorators: [
 		(Story) => (
-			<span css={styles.underlined}>
+			<span className="underline decoration-dotted">
 				<Story />
 			</span>
 		),
 	],
 };
-
-const styles = {
-	// Just here to make the abbreviated part more obvious in the component library
-	underlined: {
-		textDecoration: "underline dotted",
-	},
-};
diff --git a/site/src/components/Abbr/Abbr.tsx b/site/src/components/Abbr/Abbr.tsx
index c41f68e081..b27141818e 100644
--- a/site/src/components/Abbr/Abbr.tsx
+++ b/site/src/components/Abbr/Abbr.tsx
@@ -1,4 +1,5 @@
 import type { FC, HTMLAttributes } from "react";
+import { cn } from "utils/cn";
 
 export type Pronunciation = "shorthand" | "acronym" | "initialism";
 
@@ -29,10 +30,12 @@ export const Abbr: FC<AbbrProps> = ({
 			// always have to supplement with aria-label
 			title={title}
 			aria-label={getAccessibleLabel(children, title, pronunciation)}
-			css={{
-				textDecoration: "inherit",
-				letterSpacing: children === children.toUpperCase() ? "0.02em" : "0",
-			}}
+			className={cn(
+				"decoration-inherit",
+				children === children.toUpperCase()
+					? "tracking-wide"
+					: "tracking-normal",
+			)}
 			{...delegatedProps}
 		>
 			<span aria-hidden>{children}</span>