🐦 tailwind v4 (#453)

Author: bradgarropy

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "bradgarropy.com",
-    "version": "8.4.0",
+    "version": "8.5.0",
     "description": "🏠 my home on the web",
     "type": "module",
     "keywords": [
@@ -92,6 +92,7 @@
         "@remix-run/serve": "^2.5.1",
         "@rollup/pluginutils": "^5.1.0",
         "@tailwindcss/typography": "^0.5.9",
+        "@tailwindcss/vite": "^4.0.0",
         "@testing-library/dom": "^10.4.0",
         "@testing-library/jest-dom": "^6.1.5",
         "@testing-library/react": "^16.2.0",
@@ -109,10 +110,10 @@
         "plop-helper-date": "^1.0.0",
         "plop-helper-slugify": "^1.1.0",
         "prettier": "^3.1.1",
-        "prettier-plugin-tailwindcss": "^0.5.9",
+        "prettier-plugin-tailwindcss": "^0.6.11",
         "react": "^19.0.0",
         "remix-development-tools": "^4.7.7",
-        "tailwindcss": "^3.3.0",
+        "tailwindcss": "^4.0.0",
         "tsx": "^4.6.0",
         "typescript": "^5.0.2",
         "vite": "^6.0.11",

package.json

@@ -4,8 +4,8 @@ import FancyLink from "~/components/FancyLink"
 
 const Contact: FC = () => {
     return (
-        <div className="grid h-full w-full  place-content-center">
-            <h1 className="mb-7 font-heading text-[2rem] font-semibold">
+        <div className="grid h-full w-full place-content-center">
+            <h1 className="font-heading mb-7 text-[2rem] font-semibold">
                 👋🏼 say hi
             </h1>
 

postcss.config.js

@@ -9,7 +9,7 @@ type FancyLinkProps = {
 const FancyLink: FC<FancyLinkProps> = ({children, to}) => {
     return (
         <Link
-            className="shadow-link transition duration-300 hover:shadow-link-hover"
+            className="shadow-link hover:shadow-link-hover transition duration-300"
             to={to}
             prefetch="intent"
         >

src/components/Contact/Contact.tsx

@@ -4,7 +4,7 @@ import SocialLink from "~/components/SocialLink"
 
 const Footer: FC = () => {
     return (
-        <footer className="flex flex-wrap content-center justify-center gap-5 px-5 pb-20 pt-28">
+        <footer className="flex flex-wrap content-center justify-center gap-5 px-5 pt-28 pb-20">
             <SocialLink platform="youtube" />
             <SocialLink platform="discord" />
             <SocialLink platform="bluesky" />

src/components/FancyLink/FancyLink.tsx

@@ -13,7 +13,7 @@ type FourOhFourProps = {
 const FourOhFour: FC<FourOhFourProps> = ({post, videos}) => {
     return (
         <div className="grid h-full content-center">
-            <h1 className="mb-2 font-heading text-6xl font-black tracking-[-0.2rem]">
+            <h1 className="font-heading mb-2 text-6xl font-black tracking-[-0.2rem]">
                 There&apos;s nothing here.
             </h1>
 

src/components/Footer/Footer.tsx

@@ -36,21 +36,21 @@ const Heading: FC<HeadingProps> = ({level, id, children}) => {
     switch (level) {
         case 1:
             return (
-                <h1 id={slug} className="group relative font-heading">
+                <h1 id={slug} className="group font-heading relative">
                     {link}
                     {children}
                 </h1>
             )
         case 2:
             return (
-                <h2 id={slug} className="group relative font-heading">
+                <h2 id={slug} className="group font-heading relative">
                     {link}
                     {children}
                 </h2>
             )
         case 3:
             return (
-                <h3 id={slug} className="group relative font-heading">
+                <h3 id={slug} className="group font-heading relative">
                     {link}
                     {children}
                 </h3>

src/components/FourOhFour/FourOhFour.tsx

@@ -5,7 +5,7 @@ import {createImageUrl} from "~/utils/cloudinary"
 
 const Hero: FC = () => {
     return (
-        <div className="grid grid-cols-hero items-start self-center justify-self-center max-[700px]:grid-cols-1">
+        <div className="grid-cols-hero grid items-start self-center justify-self-center max-[700px]:grid-cols-1">
             <Link
                 to="https://instagram.com/bradgarropy"
                 className="max-[700px]:m-auto max-[700px]:w-4/5"
@@ -20,36 +20,36 @@ const Hero: FC = () => {
             </Link>
 
             <div>
-                <h1 className="m-0 font-heading text-5xl font-black leading-normal -tracking-[0.2rem]">
+                <h1 className="font-heading m-0 text-5xl leading-normal font-black -tracking-[0.2rem]">
                     i&apos;m brad garropy
                 </h1>
 
                 <div className="grid grid-cols-[repeat(2,auto)] justify-start justify-items-center gap-x-3 pl-10 leading-normal">
                     <h2 className="m-0 justify-self-start text-2xl font-medium">
                         lead frontend developer
                     </h2>
-                    <span className="m-0 text-2xl font-medium leading-normal">
+                    <span className="m-0 text-2xl leading-normal font-medium">
                         👨🏼‍💻
                     </span>
 
                     <h2 className="m-0 justify-self-start text-2xl font-medium">
                         growing content creator
                     </h2>
-                    <span className="m-0 text-2xl font-medium leading-normal">
+                    <span className="m-0 text-2xl leading-normal font-medium">
                         🎥
                     </span>
 
                     <h2 className="m-0 justify-self-start text-2xl font-medium">
                         side project connoisseur
                     </h2>
-                    <span className="m-0 text-2xl font-medium leading-normal">
+                    <span className="m-0 text-2xl leading-normal font-medium">
                         🥃
                     </span>
 
                     <h2 className="m-0 justify-self-start text-2xl font-medium">
                         open source maintainer
                     </h2>
-                    <span className="m-0 text-2xl font-medium leading-normal">
+                    <span className="m-0 text-2xl leading-normal font-medium">
                         ✨
                     </span>
                 </div>

src/components/Heading/Heading.tsx

@@ -13,7 +13,7 @@ const HireMe: FC<HireMeProps> = ({testimonials}) => {
     return (
         <div className="grid gap-y-16">
             <section>
-                <h1 className="mb-9 font-heading text-4xl font-extrabold">
+                <h1 className="font-heading mb-9 text-4xl font-extrabold">
                     🤝 let&apos;s work together
                 </h1>
 
@@ -50,7 +50,7 @@ const HireMe: FC<HireMeProps> = ({testimonials}) => {
             </section>
 
             <section>
-                <div className="prose mb-9 dark:prose-invert prose-h1:font-bold">
+                <div className="prose dark:prose-invert prose-h1:font-bold mb-9">
                     <Heading level={1} id="testimonials">
                         💯 what people think of me
                     </Heading>

src/components/Hero/Hero.tsx

@@ -26,7 +26,7 @@ const LatestVideos: FC<LatestVideosProps> = ({latestVideos}) => {
                             alt={latestVideo.title}
                             width="1280"
                             height="720"
-                            className="rounded border-3 border-solid border-black shadow-box transition duration-300 hover:shadow-none dark:border-white dark:shadow-box-white hover:dark:shadow-none"
+                            className="shadow-box dark:shadow-box-white rounded border-3 border-solid border-black transition duration-300 hover:shadow-none dark:border-white dark:hover:shadow-none"
                         />
                     </Link>
                 )

src/components/HireMe/HireMe.tsx

@@ -9,7 +9,7 @@ type LayoutProps = {
 
 const Layout: FC<LayoutProps> = ({children}) => {
     return (
-        <div className="m-auto grid min-h-screen max-w-5xl grid-rows-[auto_1fr_auto] gap-y-10 font-text text-black transition-all dark:text-white">
+        <div className="font-text m-auto grid min-h-screen max-w-5xl grid-rows-[auto_1fr_auto] gap-y-10 text-black transition-all dark:text-white">
             <Header />
 
             <main className="box-border w-full max-w-[700px] justify-self-center px-5 py-0">

src/components/LatestVideos/LatestVideos.tsx

@@ -21,7 +21,7 @@ const LinkButton: FC<LinkButtonProps> = ({
             "shadow-reverse-box dark:shadow-reverse-box-white": reverse,
             "text-gray-300 dark:text-gray-300 border-gray-300 shadow-gray-300":
                 disabled,
-            "hover:text-inherit hover:shadow-none hover:dark:shadow-none":
+            "hover:text-inherit hover:shadow-none dark:hover:shadow-none":
                 !disabled,
         },
     )

src/components/Layout/Layout.tsx

@@ -10,7 +10,7 @@ const Markdown: FC<MarkdownProps> = ({content, className}) => {
     return (
         <div
             className={classnames(
-                "prose-md prose-[iframe]:w-100 prose prose-purple max-w-3xl dark:prose-invert prose-a:font-normal prose-a:text-gray-700 prose-a:no-underline prose-a:shadow-link prose-a:transition prose-a:duration-300 hover:prose-a:shadow-link-hover prose-code:rounded prose-code:bg-[#2d2b55] prose-code:px-2 prose-code:py-1 prose-code:font-normal prose-code:text-[#fad000] before:prose-code:content-none after:prose-code:content-none prose-pre:bg-[#2D2B55] prose-img:mx-auto prose-img:rounded dark:prose-a:text-gray-300",
+                "prose-md prose-[iframe]:w-100 prose prose-purple dark:prose-invert prose-a:font-normal prose-a:text-gray-700 prose-a:no-underline prose-a:shadow-link prose-a:transition prose-a:duration-300 prose-a:hover:shadow-link-hover prose-code:rounded prose-code:bg-[#2d2b55] prose-code:px-2 prose-code:py-1 prose-code:font-normal prose-code:text-[#fad000] prose-code:before:content-none prose-code:after:content-none prose-pre:bg-[#2D2B55] prose-img:mx-auto prose-img:rounded dark:prose-a:text-gray-300 max-w-3xl",
                 className,
             )}
         >

src/components/LinkButton/LinkButton.tsx

@@ -33,7 +33,7 @@ const Newsletter: FC = () => {
                 onSubmit={onSubmit}
             >
                 <input
-                    className="rounded border-3 border-black px-8 py-4 text-base shadow-box placeholder:text-gray-400 focus:border-purple-400 focus:outline-none dark:shadow-box-white"
+                    className="shadow-box dark:shadow-box-white rounded border-3 border-black px-8 py-4 text-base placeholder:text-gray-400 focus:border-purple-400 focus:outline-hidden"
                     placeholder="email@example.com"
                     type="email"
                     name="email"
@@ -43,7 +43,7 @@ const Newsletter: FC = () => {
                 />
 
                 <button
-                    className="mb-[5px] inline-block cursor-pointer rounded border-2 border-black bg-purple-500 px-3 py-2 font-heading text-base font-black tracking-normal text-white shadow-box transition duration-300 hover:enabled:shadow-none disabled:cursor-default dark:shadow-box-white"
+                    className="font-heading shadow-box dark:shadow-box-white mb-[5px] inline-block cursor-pointer rounded border-2 border-black bg-purple-500 px-3 py-2 text-base font-black tracking-normal text-white transition duration-300 hover:enabled:shadow-none disabled:cursor-default"
                     type="submit"
                     disabled={subscribed}
                 >

src/components/Markdown/Markdown.tsx

@@ -6,7 +6,7 @@ type PageLayoutProps = {
 
 const PageLayout: FC<PageLayoutProps> = ({children}) => {
     return (
-        <main className="grid min-h-screen content-center justify-center px-5 py-0 font-text text-black transition-all dark:text-white">
+        <main className="font-text grid min-h-screen content-center justify-center px-5 py-0 text-black transition-all dark:text-white">
             {children}
         </main>
     )

src/components/Newsletter/Newsletter.tsx

@@ -13,7 +13,7 @@ const Podcast: FC = () => {
                 <img
                     src={createImageUrl("/pages/home/compressed-fm.jpg")}
                     alt="Compressed.fm"
-                    className="box-border rounded border-3 border-black shadow-box transition duration-300 hover:shadow-none dark:border-white dark:shadow-box-white hover:dark:shadow-none"
+                    className="shadow-box dark:shadow-box-white box-border rounded border-3 border-black transition duration-300 hover:shadow-none dark:border-white dark:hover:shadow-none"
                     width="500"
                     height="500"
                 />
@@ -26,7 +26,7 @@ const Podcast: FC = () => {
                 <img
                     src={createImageUrl("/pages/home/web-dev-weekly.jpg")}
                     alt="Web Dev Weekly"
-                    className="box-border rounded border-3 border-black shadow-box transition duration-300 hover:shadow-none dark:border-white dark:shadow-box-white hover:dark:shadow-none"
+                    className="shadow-box dark:shadow-box-white box-border rounded border-3 border-black transition duration-300 hover:shadow-none dark:border-white dark:hover:shadow-none"
                     width="500"
                     height="500"
                 />

src/components/PageLayout/PageLayout.tsx

@@ -14,11 +14,11 @@ const PostCard: FC<PostCardProps> = ({post, className}) => {
     return (
         <div
             className={classnames(
-                "rounded border-3 border-black px-8 py-8 shadow-box duration-300 hover:shadow-none dark:border-white dark:shadow-box-white hover:dark:shadow-none",
+                "shadow-box dark:shadow-box-white rounded border-3 border-black px-8 py-8 duration-300 hover:shadow-none dark:border-white dark:hover:shadow-none",
                 className,
             )}
         >
-            <h1 className="mb-10 font-heading text-3xl font-semibold max-[750px]:text-2xl">
+            <h1 className="font-heading mb-10 text-3xl font-semibold max-[750px]:text-2xl">
                 <Link
                     prefetch="intent"
                     to={`/blog/${post.slug}`}

src/components/Podcasts/Podcasts.tsx

@@ -15,7 +15,7 @@ const PostHeader: FC<PostHeaderProps> = ({date, tags, topic, title}) => {
         <section>
             <PostMeta date={date} topic={topic} tags={tags} />
 
-            <h1 className="mt-6 font-heading text-4xl font-semibold">
+            <h1 className="font-heading mt-6 text-4xl font-semibold">
                 {title}
             </h1>
         </section>

src/components/PostCard/PostCard.tsx

@@ -25,7 +25,7 @@ const PostMeta: FC<PostMetaProps> = ({date, tags, topic}) => {
                     return (
                         <Link
                             key={tag}
-                            className="rounded bg-black px-2 font-heading text-sm font-bold text-white duration-300 hover:bg-purple-400 dark:bg-white dark:text-black dark:hover:bg-purple-400"
+                            className="font-heading rounded bg-black px-2 text-sm font-bold text-white duration-300 hover:bg-purple-400 dark:bg-white dark:text-black dark:hover:bg-purple-400"
                             to={`/tag/${tag}`}
                             prefetch="intent"
                         >

src/components/PostHeader/PostHeader.tsx

@@ -60,7 +60,7 @@ const PostSearchBar: FC<PostSearchBarProps> = ({posts, onSearch}) => {
             </label>
 
             <input
-                className="w-full rounded border-3 border-black px-8 py-4 text-base shadow-box placeholder:text-gray-400 focus:border-purple-400 focus:outline-none dark:shadow-box-white"
+                className="shadow-box dark:shadow-box-white w-full rounded border-3 border-black px-8 py-4 text-base placeholder:text-gray-400 focus:border-purple-400 focus:outline-hidden"
                 type="search"
                 id="search"
                 placeholder="search by title, topic, or tag..."

src/components/PostMeta/PostMeta.tsx

@@ -11,11 +11,11 @@ type ProjectProps = {
 const Project: FC<ProjectProps> = ({project}) => {
     return (
         <Link
-            className="grid content-between gap-y-4 rounded border-3 border-black p-[1.125rem] shadow-box transition duration-300 hover:shadow-none dark:border-white dark:shadow-box-white hover:dark:shadow-none"
+            className="shadow-box dark:shadow-box-white grid content-between gap-y-4 rounded border-3 border-black p-[1.125rem] transition duration-300 hover:shadow-none dark:border-white dark:hover:shadow-none"
             to={`${project.url}#readme`}
         >
             <div>
-                <h3 className="m-0 font-heading text-2xl font-black tracking-[-0.075rem]">
+                <h3 className="font-heading m-0 text-2xl font-black tracking-[-0.075rem]">
                     {project.name}
                 </h3>
 

src/components/PostSearchBar/PostSearchBar.tsx

@@ -12,7 +12,7 @@ type TitleProps = {
 
 const Title: FC<TitleProps> = ({title}) => {
     return (
-        <h2 className="hover:text-shadow-3 m-0 font-heading text-[clamp(3rem,_10vw,_4.5rem)] font-black tracking-[-0.2rem] transition-all duration-300">
+        <h2 className="hover:text-shadow-3 font-heading m-0 text-[clamp(3rem,_10vw,_4.5rem)] font-black tracking-[-0.2rem] transition-all duration-300">
             {title}
         </h2>
     )

src/components/Project/Project.tsx

@@ -76,7 +76,7 @@ const SocialLink: FC<SocialLinkProps> = ({platform}) => {
     return (
         <Link to={url} reloadDocument>
             <Icon
-                className="h-8 fill-black transition duration-300 hover:fill-purple-400 dark:fill-white hover:dark:fill-purple-400"
+                className="h-8 fill-black transition duration-300 hover:fill-purple-400 dark:fill-white dark:hover:fill-purple-400"
                 name={name}
             />
         </Link>

src/components/Section/Section.tsx

@@ -38,7 +38,7 @@ const Sponsors: FC<SponsorsProps> = ({sponsors}) => {
                                     to={sponsor.profile}
                                 >
                                     <img
-                                        className="m-0 w-[6.625rem] rounded-full border-5 border-black transition duration-300 hover:-rotate-2 hover:border-purple-400 dark:border-white hover:dark:border-purple-400"
+                                        className="m-0 w-[6.625rem] rounded-full border-5 border-black transition duration-300 hover:-rotate-2 hover:border-purple-400 dark:border-white dark:hover:border-purple-400"
                                         src={createExternalImageUrl(
                                             sponsor.avatar,
                                         )}
@@ -47,7 +47,7 @@ const Sponsors: FC<SponsorsProps> = ({sponsors}) => {
                                         height="460"
                                     />
 
-                                    <span className="absolute -left-4 -top-4 text-[2.5rem]">
+                                    <span className="absolute -top-4 -left-4 text-[2.5rem]">
                                         {sponsor.tier}
                                     </span>
                                 </Link>

src/components/SocialLink/SocialLink.tsx

@@ -4,7 +4,7 @@ import type {FC} from "react"
 const Streaming: FC = () => {
     return (
         <Link to="https://twitch.tv/bradgarropy">
-            <span className="animate-pulse font-heading text-lg font-black tracking-[-0.075rem]">
+            <span className="font-heading animate-pulse text-lg font-black tracking-[-0.075rem]">
                 🎥 streaming
             </span>
         </Link>

src/components/Sponsors/Sponsors.tsx

@@ -17,7 +17,7 @@ const Testimonial: FC<TestimonialProps> = ({testimonial}) => {
 
     return (
         <div
-            className="grid max-w-xl justify-items-start gap-8 rounded border-3 border-black p-8 shadow-box transition duration-300 hover:shadow-none dark:border-white dark:shadow-box-white hover:dark:shadow-none"
+            className="shadow-box dark:shadow-box-white grid max-w-xl justify-items-start gap-8 rounded border-3 border-black p-8 transition duration-300 hover:shadow-none dark:border-white dark:hover:shadow-none"
             id={slug}
             key={testimonial.frontmatter.name}
         >
@@ -33,7 +33,7 @@ const Testimonial: FC<TestimonialProps> = ({testimonial}) => {
                     className="rounded-full border-3 border-black dark:border-white"
                 />
 
-                <p className="m-0 font-heading text-2xl font-black tracking-[-0.075rem]">
+                <p className="font-heading m-0 text-2xl font-black tracking-[-0.075rem]">
                     {testimonial.frontmatter.name}
                 </p>
             </Link>