refactor: migrate Abbr to Tailwind (#19242)

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",
-	},
-};

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>