Update to tailwindcss 3.4.0 styles

LucasOe · Dec 28, 2023 · adb473f · adb473f
1 parent 40d36c5
commit adb473f
Show file tree

Hide file tree

Showing 10 changed files with 15 additions and 18 deletions.
diff --git a/index.html b/index.html
@@ -8,7 +8,7 @@
 		<title>LucasOe's Portfolio</title>
 	</head>
 	<body class="bg-primary">
-		<div class="flex min-h-screen flex-col items-center justify-center relative">
+		<div class="flex min-h-dvh flex-col items-center justify-center relative">
 			<div class="prose prose-lg max-w-4xl px-6">
 				<div id="root" />
 			</div>

diff --git a/src/components/LinkIcon.tsx b/src/components/LinkIcon.tsx
@@ -18,7 +18,7 @@ export default function LinkIcon({ icon, to, label, className, ...rest }: LinkIc
 			className={twMerge("focus rounded-sm", className)}
 			{...rest}
 		>
-			<IconContext.Provider value={{ className: "h-6 w-6 hover:text-accent-pink" }}>{icon}</IconContext.Provider>
+			<IconContext.Provider value={{ className: "size-6 hover:text-accent-pink" }}>{icon}</IconContext.Provider>
 		</a>
 	);
 }
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
@@ -41,7 +41,7 @@ export default function Navbar({ links, socials, className, ...rest }: NavbarPro
 						onTap={() => setNavbarOpen(!navbarOpen)}
 						whileTap={{ scale: 0.8 }}
 					>
-						<IconContext.Provider value={{ className: "h-full w-full" }}>
+						<IconContext.Provider value={{ className: "size-full" }}>
 							{navbarOpen ? <FiX /> : <FiMenu />}
 						</IconContext.Provider>
 					</motion.button>

diff --git a/src/components/ScrollIndicator.tsx b/src/components/ScrollIndicator.tsx
@@ -37,15 +37,15 @@ export default function ScrollIndicator({ offset, className, ...rest }: ScrollIn
 				{/* Foreground */}
 				<HashLink to="#about" smooth aria-label="Scroll Down" tabIndex={-1} className="relative z-10 flex">
 					<div className="inline-block rounded-full border-2 border-neutral-200 group-hover:background-gradient group-hover:border-[3px] group-hover:border-transparent">
-						<BsArrowDownShort className="h-16 w-16 p-2 text-neutral-200 group-hover:fill-gradient" />
+						<BsArrowDownShort className="size-16 p-2 text-neutral-200 group-hover:fill-gradient" />
 					</div>
 				</HashLink>
 				{/* Background */}
 				<motion.div
 					style={{ x, y }}
-					className="absolute left-0 top-0 flex h-full w-full items-center justify-center group-hover:hidden"
+					className="absolute left-0 top-0 flex size-full items-center justify-center group-hover:hidden"
 				>
-					<div className="background-gradient h-full w-full rounded-full border-[3px] border-transparent" />
+					<div className="background-gradient size-full rounded-full border-[3px] border-transparent" />
 				</motion.div>
 			</motion.div>
 		</div>

diff --git a/src/components/Skill.tsx b/src/components/Skill.tsx
@@ -29,7 +29,7 @@ export default function Skill({ children, title, icon, className, ...rest }: Ski
 		>
 			<div className="mb-2 flex items-center justify-between gap-4 translate-z-8">
 				<h3 className="m-0 font-mono">{title}</h3>
-				<IconContext.Provider value={{ className: "w-10 h-10" }}>{icon}</IconContext.Provider>
+				<IconContext.Provider value={{ className: "size-10" }}>{icon}</IconContext.Provider>
 			</div>
 			<div className="flex gap-2 transform-style-3d translate-z-4">
 				<div aria-hidden="true" className="not-prose flex select-none flex-col items-center justify-between">
@@ -38,7 +38,7 @@ export default function Skill({ children, title, icon, className, ...rest }: Ski
 					<span className="font-mono text-sm font-semibold text-neutral-600">{"</h3>"}</span>
 				</div>
 				<div className="translate-z-4">
-					<Markdown>{children}</Markdown>
+					<Markdown className="[&>p]:text-balance">{children}</Markdown>
 				</div>
 			</div>
 		</Tilt>

diff --git a/src/components/Timeline/Timeline.tsx b/src/components/Timeline/Timeline.tsx
@@ -51,9 +51,9 @@ export default function Timeline({ projects, className, ...rest }: TimelineProps
 				<div className="relative -left-6 -mr-6">
 					<div ref={scrollbarRef} className="sticky top-[calc(50%-1rem)] my-2 flex">
 						{/*Dot*/}
-						<div className="mx-1 my-2 h-4 w-4 rounded-full bg-accent-pink" />
+						<div className="mx-1 my-2 size-4 rounded-full bg-accent-pink" />
 						{/*Arrow*/}
-						<div className="my-2 h-0 w-0 border-y-8 border-r-8 border-y-transparent border-r-secondary" />
+						<div className="my-2 size-0 border-y-8 border-r-8 border-y-transparent border-r-secondary" />
 						{/*Textbox*/}
 						<div className="w-28 rounded-md bg-secondary text-center">
 							<p className="m-0 font-mono font-bold">{getCurrentDate(projectOffsets, projectTimes)}</p>

diff --git a/src/components/Timeline/TimelineProject.tsx b/src/components/Timeline/TimelineProject.tsx
@@ -47,7 +47,7 @@ export default forwardRef<HTMLDivElement, TimelineProjectProps>(function Timelin
 			<div className="hidden h-full py-4 sm:flex">
 				<div
 					ref={ref}
-					className="relative h-0 w-0 border-y-[10px] border-l-[10px] border-y-transparent border-l-secondary"
+					className="relative size-0 border-y-[10px] border-l-[10px] border-y-transparent border-l-secondary"
 					style={{ top: `${arrowPosition}%`, transform: `translateY(-${arrowPosition}%)` }}
 				/>
 			</div>

diff --git a/src/main.css b/src/main.css
@@ -7,9 +7,3 @@
 		@apply focus:outline-none focus:ring-0 focus:ring-offset-0 focus-visible:background-gradient focus-visible:bg-cover focus-visible:rounded-lg focus-visible:border-[3px] focus-visible:border-transparent focus-visible:-m-[3px] focus-visible:border-solid;
 	}
 }
-
-@layer base {
-	html {
-		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-	}
-}
diff --git a/src/pages/Success.tsx b/src/pages/Success.tsx
@@ -8,7 +8,7 @@ import LinkButton from "@/components/LinkButton";
 export default function SuccessPage() {
 	return (
 		<div className="not-prose mb-24 text-center">
-			<SlCheck className="fill-gradient m-8 mx-auto h-32 w-32" />
+			<SlCheck className="fill-gradient m-8 mx-auto size-32" />
 			<Markdown className="mb-2 inline-block bg-accent-pink bg-gradient-to-r from-accent-violet bg-clip-text text-2xl font-medium text-transparent">
 				Form submitted successfully!
 			</Markdown>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -34,6 +34,9 @@ export default {
 						"--tw-prose-pre-bg": "rgb(255 255 255 / 50%)",
 						"--tw-prose-th-borders": theme("colors.neutral[600]"),
 						"--tw-prose-td-borders": theme("colors.neutral[700]"),
+						p: {
+							textWrap: "pretty",
+						},
 					},
 				},
 			}),