upgrade to tailwind v4.0 (#33)

* begin switching to tailwind v4

* remove old tw config file

* convert colors back to hex

* move all content out of tw config

* fixed colors

* better match colors

* remove abnormally large margins

astro.config.ts

@@ -2,13 +2,16 @@ import { defineConfig, passthroughImageService } from "astro/config";
 import sitemap from "@astrojs/sitemap";
 import rehypeExternalLinks from "rehype-external-links";
 import mdx from "@astrojs/mdx";
-import tailwind from "@astrojs/tailwind";
+import tailwindcss from "@tailwindcss/vite";
 import icon from "astro-icon";
 
 // https://astro.build/config
 export default defineConfig({
   site: "https://troylusty.com",
-  integrations: [sitemap(), mdx(), tailwind(), icon()],
+  integrations: [sitemap(), mdx(), icon()],
+  vite: {
+    plugins: [tailwindcss()],
+  },
   output: "static",
   markdown: {
     rehypePlugins: [

package.json

@@ -12,24 +12,24 @@
   },
   "dependencies": {
     "@astrojs/check": "0.9.4",
-    "@astrojs/mdx": "^4.0.6",
+    "@astrojs/mdx": "^4.0.7",
     "@astrojs/rss": "^4.0.11",
     "@astrojs/sitemap": "3.2.1",
-    "@astrojs/tailwind": "^5.1.4",
     "@fontsource-variable/outfit": "^5.1.1",
     "@fontsource-variable/red-hat-mono": "^5.1.1",
     "@fontsource/borel": "^5.1.1",
-    "astro": "^5.1.7",
+    "@tailwindcss/vite": "^4.0.0",
+    "astro": "^5.1.9",
     "astro-icon": "^1.1.5",
     "rehype-external-links": "^3.0.0",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.0.0",
     "typescript": "^5.7.3"
   },
   "devDependencies": {
-    "@iconify-json/mdi": "^1.2.2",
+    "@iconify-json/mdi": "^1.2.3",
-    "@iconify-json/simple-icons": "^1.2.20",
+    "@iconify-json/simple-icons": "^1.2.21",
     "@tailwindcss/typography": "^0.5.16",
-    "@types/node": "^22.10.7",
+    "@types/node": "^22.10.9",
     "prettier": "^3.4.2",
     "prettier-plugin-astro": "^0.14.1",
     "prettier-plugin-tailwindcss": "^0.6.10"

src/components/Accordion.astro

@@ -16,18 +16,18 @@ const { institution, qualification, grades, isOpen = false } = Astro.props;
     <summary
       class="flex cursor-pointer items-center justify-between py-3 font-bold"
     >
-      <p class="m-0 text-balance font-semibold text-secondary">
+      <p class="text-secondary m-0 font-semibold text-balance">
         {qualification}
       </p>
       <span class="transition group-open:rotate-180">
         <Icon
           name="mdi:chevron-down"
-          class="h-6 w-auto text-secondary transition-colors group-open:text-tertiary"
+          class="text-secondary group-open:text-tertiary h-6 w-auto transition-colors"
         />
       </span>
     </summary>
     <div class="p-4">
-      <p class="my-0 mb-2 font-semibold text-tertiary">
+      <p class="text-tertiary my-0 mb-2 font-semibold">
         {institution}
       </p>
       <ol class="list-inside list-disc">

src/components/Article.astro

@@ -30,14 +30,14 @@ const listFormatter = new Intl.ListFormat("en-GB", {
 >
   <div class="mx-auto mb-8">
     <h1
-      class="animate-reveal break-words text-start text-2xl font-semibold opacity-0"
+      class="animate-reveal text-start text-2xl font-semibold break-words opacity-0"
     >
       <span class="text-secondary">{article.data.title}</span><span
-        class="ml-2 text-tertiary">{article.data.description}</span
+        class="text-tertiary ml-2">{article.data.description}</span
       >
     </h1>
     <div
-      class="mt-4 flex animate-reveal flex-col flex-wrap items-start gap-2 text-tertiary opacity-0 [animation-delay:0.1s] md:flex-row"
+      class="animate-reveal text-tertiary mt-4 flex flex-col flex-wrap items-start gap-2 opacity-0 [animation-delay:0.1s] md:flex-row"
     >
       <div class="flex items-center gap-2">
         <Icon name="mdi:calendar" />
@@ -79,7 +79,7 @@ const listFormatter = new Intl.ListFormat("en-GB", {
       }
     </div>
   </div>
-  <div class="mx-auto animate-reveal opacity-0 [animation-delay:0.2s]">
+  <div class="animate-reveal mx-auto opacity-0 [animation-delay:0.2s]">
     <Prose>
       <Content />
     </Prose>

src/components/Button.astro

@@ -9,7 +9,7 @@ const { href, link } = Astro.props;
 
 <a href={`${href}`}>
   <div
-    class="m-4 flex w-fit animate-reveal flex-row items-center gap-1 justify-self-center rounded-full bg-tertiary px-2 py-1 text-sm font-medium capitalize text-primary opacity-0 transition-colors [animation-delay:0.1s] hover:bg-accent text-center text-nowrap"
+    class="animate-reveal bg-tertiary text-primary hover:bg-accent m-4 flex w-fit flex-row items-center gap-1 justify-self-center rounded-full px-2 py-1 text-center text-sm font-medium text-nowrap capitalize opacity-0 transition-colors [animation-delay:0.1s]"
   >
     {link}
   </div>

src/components/Footer.astro

@@ -4,27 +4,31 @@ import Link from "@components/Link.astro";
 import { Icon } from "astro-icon/components";
 ---
 
-<footer class="mx-auto mb-8 mt-auto w-full max-w-prose space-y-6 pt-12">
+<footer class="mx-auto mt-auto mb-8 w-full max-w-prose space-y-6 pt-12">
   <div class="md:flex md:justify-between">
-    <div class="mb-6 text-secondary md:mb-0">
+    <div class="text-secondary mb-6 md:mb-0">
-      <a class="inline-flex items-center group" href="#top" title="Back to top">
+      <a class="group inline-flex items-center" href="#top" title="Back to top">
-        <Icon name="icon" title={SITE.TITLE} class="h-8 w-auto ease-in-out transition-colors duration-500 group-hover:text-tertiary" />
+        <Icon
+          name="icon"
+          title={SITE.TITLE}
+          class="group-hover:text-tertiary h-8 w-auto transition-colors duration-500 ease-in-out"
+        />
         <div
-          class="ml-2 hidden flex-none text-sm font-bold capitalize md:visible lg:block transition-colors duration-500 group-hover:text-tertiary"
+          class="group-hover:text-tertiary ml-2 hidden flex-none text-sm font-bold capitalize transition-colors duration-500 md:visible lg:block"
         >
           Troy Lusty
         </div>
       </a>
     </div>
     <div class="text-left sm:gap-6 md:text-right">
-      <ul class="font-medium text-tertiary">
+      <ul class="text-tertiary font-medium">
         {
           SITE.NAVLINKS.map((i) => (
             <li class="mb-1 last:mb-0">
               <a
                 data-navlink
                 href={i.href}
-                class="capitalize transition-colors hover:text-secondary"
+                class="hover:text-secondary capitalize transition-colors"
               >
                 {i.name}
               </a>
@@ -34,10 +38,10 @@ import { Icon } from "astro-icon/components";
       </ul>
     </div>
   </div>
-  <div class="mt-12 sm:flex sm:items-center sm:justify-between lg:mt-16">
+  <div class="sm:flex sm:items-center sm:justify-between">
-    <span class="text-sm text-tertiary sm:text-center"
+    <span class="text-tertiary text-sm sm:text-center"
       >&copy; {new Date().getFullYear()}
-      <a href="/" class="transition-colors hover:text-secondary">{SITE.TITLE}</a
+      <a href="/" class="hover:text-secondary transition-colors">{SITE.TITLE}</a
       >. All Rights Reserved.
     </span>
     <div class="mt-4 flex gap-2 sm:mt-0 sm:justify-center">
@@ -47,7 +51,7 @@ import { Icon } from "astro-icon/components";
             <Icon
               name={i.icon}
               title={i.name}
-              class="h-5 w-5 text-tertiary transition-colors hover:text-secondary"
+              class="text-tertiary hover:text-secondary h-5 w-5 transition-colors"
             />
           </Link>
         ))

src/components/Header.astro

@@ -5,12 +5,16 @@ import { Icon } from "astro-icon/components";
 
 <header class="mx-auto mb-8 w-full max-w-prose space-y-6 pt-12">
   <div
-    class="flex h-12 items-center justify-between leading-[0px] text-secondary group"
+    class="text-secondary group flex h-12 items-center justify-between leading-[0px]"
   >
     <a class="inline-flex items-center" href="/" title={SITE.TITLE}>
-      <Icon name="icon" title={SITE.TITLE} class="h-8 w-auto ease-in-out group-hover:text-tertiary transition-colors duration-500" />
+      <Icon
+        name="icon"
+        title={SITE.TITLE}
+        class="group-hover:text-tertiary h-8 w-auto transition-colors duration-500 ease-in-out"
+      />
       <div
-        class="ml-2 hidden flex-none text-sm font-bold capitalize md:visible lg:block group-hover:text-tertiary transition-colors duration-500"
+        class="group-hover:text-tertiary ml-2 hidden flex-none text-sm font-bold capitalize transition-colors duration-500 md:visible lg:block"
       >
         Troy Lusty
       </div>

src/components/Hero.astro

@@ -10,12 +10,12 @@ import borel from "@fontsource/borel/files/borel-latin-400-normal.woff2?url";
   crossorigin="anonymous"
 />
 
-<section class="mb-32 overflow-clip">
+<section class="mt-6 overflow-clip">
   <h1
-    class="--translate-y-full animate-logo text-pretty text-4xl font-bold md:text-6xl"
+    class="--translate-y-full animate-logo text-4xl font-bold text-pretty md:text-6xl"
   >
     Digital designer based in the <span
-      class="animate-gradient-x bg-gradient-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90% bg-clip-text px-1 font-['Borel'] text-3xl font-bold text-transparent md:text-5xl"
+      class="animate-gradient-x bg-gradient-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90% bg-clip-text px-1 font-['Borel'] text-3xl text-transparent md:text-5xl"
       >United Kingdom</span
     >.
   </h1>

src/components/Prose.astro

@@ -1,5 +1,5 @@
 <div
-  class="prose max-w-full prose-headings:text-secondary prose-h1:text-xl prose-h1:font-bold prose-p:max-w-full prose-p:text-pretty prose-p:break-words prose-p:text-secondary prose-a:text-secondary prose-a:underline prose-a:decoration-tertiary prose-a:decoration-wavy prose-blockquote:border-secondary prose-strong:text-secondary prose-code:whitespace-pre-wrap prose-code:font-medium prose-code:text-secondary prose-code:before:content-none prose-code:after:content-none prose-li:text-secondary prose-li:marker:text-secondary prose-img:max-h-[90vh] prose-img:w-auto prose-img:max-w-full prose-img:rounded prose-video:max-h-[90vh] prose-video:w-auto prose-video:max-w-full prose-video:rounded"
+  class="prose prose-headings:text-secondary prose-h1:text-xl prose-h1:font-bold prose-p:max-w-full prose-p:text-pretty prose-p:break-words prose-p:text-secondary prose-a:text-secondary prose-a:underline prose-a:decoration-tertiary prose-a:decoration-wavy prose-blockquote:border-secondary prose-strong:text-secondary prose-code:whitespace-pre-wrap prose-code:font-medium prose-code:text-secondary prose-code:before:content-none prose-code:after:content-none prose-li:text-secondary prose-li:marker:text-secondary prose-img:max-h-[90vh] prose-img:w-auto prose-img:max-w-full prose-img:rounded prose-video:max-h-[90vh] prose-video:w-auto prose-video:max-w-full prose-video:rounded max-w-full"
 >
   <slot />
 </div>

src/components/RelatedArticles.astro

@@ -19,15 +19,15 @@ const next = items[(index + 1) % items.length];
 
 {
   items.length > 1 ? (
-    <div class="mx-auto mt-8 flex max-w-prose md:flex-row justify-between gap-4 md:gap-0 flex-col-reverse">
+    <div class="mx-auto mt-8 flex max-w-prose flex-col-reverse justify-between gap-4 md:flex-row md:gap-0">
-        <Button
+      <Button
-          href={`/${prev.collection}/${prev.slug}`}
+        href={`/${prev.collection}/${prev.slug}`}
-          link={`Previous: ${prev.data.title}`}
+        link={`Previous: ${prev.data.title}`}
-        />
+      />
-        <Button
+      <Button
-          href={`/${next.collection}/${next.slug}`}
+        href={`/${next.collection}/${next.slug}`}
-          link={`Next: ${next.data.title}`}
+        link={`Next: ${next.data.title}`}
-        />
+      />
     </div>
   ) : null
 }

src/components/ShowcasePost.astro

@@ -10,17 +10,17 @@ const { collection } = Astro.props;
 
 <li>
   <a
-    class="group bg-none hover:bg-tertiary/30"
+    class="group hover:bg-tertiary/30 bg-none"
     href={`/${collection.collection}/${collection.slug}`}
   >
     <article class="flex flex-col">
-      <h3 class="mb-1 text-balance font-semibold">
+      <h3 class="mb-1 font-semibold text-balance">
         <span class="text-secondary">{collection.data.title}</span><span
-          class="ml-2 text-tertiary transition-colors group-hover:text-accent"
+          class="text-tertiary group-hover:text-accent ml-2 transition-colors"
           >{collection.data.description}</span
         >
       </h3>
-      <time class="block text-sm text-accent"
+      <time class="text-accent block text-sm"
         ><FormattedDate date={collection.data.date} /></time
       >
     </article>

src/components/ShowcaseProject.astro

@@ -11,7 +11,7 @@ const { collection } = Astro.props;
 
 <li>
   <article
-    class="group relative isolate mx-auto flex h-full w-full flex-col justify-end overflow-hidden rounded px-8 pb-8 pt-40"
+    class="group relative isolate mx-auto flex h-full w-full flex-col justify-end overflow-hidden rounded px-8 pt-40 pb-8"
   >
     <Image
       src={collection.data.image.url}
@@ -27,12 +27,12 @@ const { collection } = Astro.props;
       href={`/${collection.collection}/${collection.slug}`}
       aria-label={collection.data.title}></a>
     <h3
-      class="z-10 w-fit text-xl font-semibold text-primary opacity-0 transition-opacity duration-300 group-hover:opacity-100 dark:text-secondary"
+      class="text-primary dark:text-secondary z-10 w-fit text-xl font-semibold opacity-0 transition-opacity duration-300 group-hover:opacity-100"
     >
       {collection.data.title}
     </h3>
     <div
-      class="z-10 w-fit gap-y-1 overflow-hidden text-sm leading-6 text-accent opacity-0 transition-opacity duration-500 group-hover:opacity-100"
+      class="text-accent z-10 w-fit gap-y-1 overflow-hidden text-sm leading-6 opacity-0 transition-opacity duration-500 group-hover:opacity-100"
     >
       {
         collection.data.collection ? (

src/components/Skills.astro

@@ -15,10 +15,10 @@ const skills = await Promise.all(
 <ul class="flex max-w-full list-none flex-wrap gap-4 px-0">
   {
     skills.map((entry) => (
-      <li class="group flex items-center gap-2 rounded border border-tertiary p-2 text-tertiary transition-colors hover:border-accent hover:text-accent">
+      <li class="group border-tertiary text-tertiary hover:border-accent hover:text-accent flex items-center gap-2 rounded border p-2 transition-colors">
         <Icon
           name={entry.data.icon}
-          class="h-5 w-auto text-tertiary transition-colors group-hover:text-accent"
+          class="text-tertiary group-hover:text-accent h-5 w-auto transition-colors"
         />
         <p class="m-0 cursor-default">{entry.data.title}</p>
       </li>

src/components/SkinnyCenter.astro

@@ -1,5 +1,5 @@
 <div
-  class="mx-auto mb-8 mt-2 w-full max-w-[60ch] p-4 pb-16 md:mb-32 md:mt-16 md:p-5"
+  class="mx-auto mt-2 mb-8 w-full max-w-[60ch] p-4 pb-16 md:mt-16 md:mb-32 md:p-5"
 >
   <slot />
 </div>

src/components/Work.astro

@@ -20,14 +20,14 @@ const work = await Promise.all(
   {
     work.map((entry) => (
       <li class="pb-4 pl-0 last:pb-0">
-        <h3 class="mb-1 mt-4 text-balance font-semibold text-secondary">
+        <h3 class="text-secondary mt-4 mb-1 font-semibold text-balance">
           <span class="text-tertiary">{entry.data.role} at</span>
           {entry.data.company}
         </h3>
-        <time class="block text-accent">
+        <time class="text-accent block">
           {dateRange(entry.data.dateStart, entry.data.dateEnd)}
         </time>
-        <article class="mt-2 text-secondary prose-a:underline prose-a:decoration-tertiary prose-a:decoration-wavy">
+        <article class="text-secondary prose-a:underline prose-a:decoration-tertiary prose-a:decoration-wavy mt-2">
           <entry.Content />
         </article>
         {entry.data.article ? (

src/layouts/Layout.astro

@@ -27,7 +27,7 @@ const { title, description, image, date, updated, tags } = Astro.props;
     tags={tags}
   />
   <body
-    class="flex min-h-screen flex-col justify-start bg-primary p-8 pt-0 text-secondary md:pt-8"
+    class="bg-primary text-secondary flex min-h-screen flex-col justify-start p-8 pt-0 md:pt-8"
   >
     <Header />
     <main

src/pages/404.astro

@@ -11,13 +11,13 @@ import Button from "@components/Button.astro";
     >
       <div>
         <h2
-          class="animate-reveal break-words text-2xl font-semibold opacity-0"
+          class="animate-reveal text-2xl font-semibold break-words opacity-0"
           id="featured-projects"
         >
           404
         </h2>
         <h3
-          class="mt-2 animate-reveal font-bold opacity-0 [animation-delay:0.1s]"
+          class="animate-reveal mt-2 font-bold opacity-0 [animation-delay:0.1s]"
         >
           Content not found
         </h3>

src/pages/cv.astro

@@ -13,15 +13,15 @@ import Link from "@components/Link.astro";
     <div
       class="flex flex-col items-start justify-between gap-6 md:flex-row md:items-center"
     >
-      <h1 class="animate-reveal break-words text-2xl font-semibold opacity-0">
+      <h1 class="animate-reveal text-2xl font-semibold break-words opacity-0">
         Troy Lusty
       </h1>
       <div
-        class="mt-4 flex flex-col items-start gap-2 text-tertiary md:flex-row"
+        class="text-tertiary mt-4 flex flex-col items-start gap-2 md:flex-row"
       >
-        <div class="flex animate-reveal items-center gap-2 opacity-0">
+        <div class="animate-reveal flex items-center gap-2 opacity-0">
           <div
-            class="flex flex-row items-center gap-2 text-tertiary transition-colors hover:text-accent"
+            class="text-tertiary hover:text-accent flex flex-row items-center gap-2 transition-colors"
           >
             <Icon name="mdi:email" />
             <Link href="mailto:hello@troylusty.com">
@@ -29,7 +29,7 @@ import Link from "@components/Link.astro";
             </Link>
           </div>
           <div
-            class="flex flex-row items-center gap-2 text-tertiary transition-colors hover:text-accent"
+            class="text-tertiary hover:text-accent flex flex-row items-center gap-2 transition-colors"
           >
             <Icon name="mdi:web" />
             <Link href="/">
@@ -40,8 +40,8 @@ import Link from "@components/Link.astro";
       </div>
     </div>
   </section>
-  <section class="mt-16 animate-reveal opacity-0 [animation-delay:0.1s]">
+  <section class="animate-reveal opacity-0 [animation-delay:0.1s]">
-    <h2 class="mb-4 break-words text-2xl font-semibold capitalize">About me</h2>
+    <h2 class="mb-4 text-2xl font-semibold break-words capitalize">About me</h2>
     <p class="mb-2">
       Hi, my name is Troy and I’m a student 3D artist studying on a BA (Hons)
       Game Arts and Design course in the UK.
@@ -57,19 +57,19 @@ import Link from "@components/Link.astro";
     <p class="mb-2">
       My current portfolio of work can be found on my website at:
       <a
-        class="text-secondary underline decoration-tertiary decoration-wavy"
+        class="text-secondary decoration-tertiary underline decoration-wavy"
         href="/projects">troylusty.com/projects</a
       >.
     </p>
   </section>
-  <section class="mt-16 animate-reveal opacity-0 [animation-delay:0.2s]">
+  <section class="animate-reveal opacity-0 [animation-delay:0.2s]">
-    <h2 class="mb-4 break-words text-2xl font-semibold capitalize">
+    <h2 class="mb-4 text-2xl font-semibold break-words capitalize">
       Education
     </h2>
     <Education />
   </section>
-  <section class="mt-16 animate-reveal opacity-0 [animation-delay:0.3s]">
+  <section class="animate-reveal opacity-0 [animation-delay:0.3s]">
-    <h2 class="mb-4 break-words text-2xl font-semibold capitalize">Skills</h2>
+    <h2 class="mb-4 text-2xl font-semibold break-words capitalize">Skills</h2>
     <p class="mb-2">
       My specific chosen area of focus is design, lighting, and rendering
       focusing on 3D environments within software such as Blender and Unreal
@@ -78,8 +78,8 @@ import Link from "@components/Link.astro";
     </p>
     <Skills />
   </section>
-  <section class="mt-16 animate-reveal opacity-0 [animation-delay:0.4s]">
+  <section class="animate-reveal opacity-0 [animation-delay:0.4s]">
-    <h2 class="mb-4 break-words text-2xl font-semibold capitalize">
+    <h2 class="mb-4 text-2xl font-semibold break-words capitalize">
       Experience
     </h2>
     <Work />

src/pages/index.astro

@@ -24,11 +24,11 @@ const projects = allProjects
 
 <Layout title={HOME.TITLE} description={HOME.DESCRIPTION}>
   <Hero />
-  <section class="mb-32" aria-labelledby="featured-projects">
+  <section aria-labelledby="featured-projects">
     <div class="group flex w-fit flex-row items-center justify-between gap-6">
       <a href="/projects">
         <h2
-          class="animate-reveal break-words text-2xl font-semibold capitalize opacity-0 transition-colors duration-500 group-hover:text-tertiary"
+          class="animate-reveal group-hover:text-tertiary text-2xl font-semibold break-words capitalize opacity-0 transition-colors duration-500"
           id="featured-projects"
         >
           Featured projects
@@ -36,7 +36,7 @@ const projects = allProjects
       </a>
     </div>
     <ol
-      class="mt-8 grid animate-reveal grid-cols-1 gap-4 opacity-0 [animation-delay:0.1s] md:grid-cols-2"
+      class="animate-reveal mt-8 grid grid-cols-1 gap-4 opacity-0 [animation-delay:0.1s] md:grid-cols-2"
     >
       {projects.map((project) => <ShowcaseProject collection={project} />)}
     </ol>
@@ -50,7 +50,7 @@ const projects = allProjects
     <div class="group flex w-fit flex-row items-center justify-between gap-6">
       <a href="/posts">
         <h2
-          class="animate-reveal break-words text-2xl font-semibold capitalize opacity-0 transition-colors duration-500 [animation-delay:0.2s] group-hover:text-tertiary"
+          class="animate-reveal group-hover:text-tertiary text-2xl font-semibold break-words capitalize opacity-0 transition-colors duration-500 [animation-delay:0.2s]"
           id="featured-projects"
         >
           Recent posts
@@ -58,7 +58,7 @@ const projects = allProjects
       </a>
     </div>
     <ol
-      class="mt-8 grid animate-reveal grid-cols-1 gap-6 opacity-0 [animation-delay:0.3s]"
+      class="animate-reveal mt-8 grid grid-cols-1 gap-6 opacity-0 [animation-delay:0.3s]"
     >
       {posts.map((post) => <ShowcasePost collection={post} />)}
     </ol>

src/pages/posts/index.astro

@@ -10,11 +10,11 @@ const posts = (await getCollection("posts"))
 ---
 
 <Layout title={SITE.TITLE} description={POSTS.DESCRIPTION}>
-  <h1 class="animate-reveal break-words text-2xl font-semibold opacity-0">
+  <h1 class="animate-reveal text-2xl font-semibold break-words opacity-0">
     {POSTS.TITLE}
   </h1>
   <ol
-    class="mt-16 grid animate-reveal grid-cols-1 gap-6 opacity-0 [animation-delay:0.1s]"
+    class="animate-reveal mt-16 grid grid-cols-1 gap-6 opacity-0 [animation-delay:0.1s]"
   >
     {posts.map((article: any) => <ShowcasePost collection={article} />)}
   </ol>

src/pages/projects/index.astro

@@ -10,11 +10,11 @@ const projects = (await getCollection("projects"))
 ---
 
 <Layout title={SITE.TITLE} description={PROJECTS.DESCRIPTION}>
-  <h1 class="animate-reveal break-words text-2xl font-semibold opacity-0">
+  <h1 class="animate-reveal text-2xl font-semibold break-words opacity-0">
     {PROJECTS.TITLE}
   </h1>
   <ol
-    class="mt-16 grid animate-reveal grid-cols-1 gap-4 opacity-0 [animation-delay:0.1s] md:grid-cols-2"
+    class="animate-reveal mt-16 grid grid-cols-1 gap-4 opacity-0 [animation-delay:0.1s] md:grid-cols-2"
   >
     {projects.map((article: any) => <ShowcaseProject collection={article} />)}
   </ol>

src/styles/global.css

@@ -2,33 +2,101 @@
 @import "@fontsource-variable/outfit";
 @import "@fontsource/borel";
 
-@tailwind base;
+@import "tailwindcss";
-@tailwind components;
+@plugin "@tailwindcss/typography";
-@tailwind utilities;
 
-@layer base {
+@theme inline {
-  :root {
+  --color-primary: var(--primary);
-    --primary: 0deg 0% 99%;
+  --color-secondary: var(--secondary);
-    --secondary: 0deg 0% 13%;
+  --color-tertiary: var(--tertiary);
-    --tertiary: 0deg 0% 45%;
+  --color-accent: var(--accent);
-    --accent: 0deg 0% 39%;
+}
+
+@theme {
+  --font-sans: "Outfit Variable", "sans-serif";
+  --font-mono: "Red Hat Mono Variable", "monospace";
+
+  --animate-reveal: reveal 0.3s forwards ease-in-out;
+  --animate-logo: logo 0.5s forwards ease-out;
+  --animate-gradient-x: gradient-x 6s ease infinite;
+  --animate-gradient-y: gradient-y 6s ease infinite;
+  --animate-gradient-xy: gradient-xy 6s ease infinite;
+  @keyframes reveal {
+    0% {
+      opacity: 0;
+      transform: translateY(20px);
+      filter: blur(4px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0px);
+      filter: blur(0px);
+    }
   }
-  @media (prefers-color-scheme: dark) {
+  @keyframes logo {
-    :root {
+    0% {
-      --primary: 0deg 0% 0%;
+      transform: translateY(100%);
-      --secondary: 0deg 0% 93%;
+      color: var(--primary);
-      --tertiary: 0deg 0% 50%;
+    }
-      --accent: 0deg 0% 71%;
+    100% {
+      transform: translateY(0%);
+      color: var(--secondary);
+    }
+  }
+  @keyframes gradient-x {
+    0%,
+    100% {
+      background-size: 200% 200%;
+      background-position: left center;
+    }
+    50% {
+      background-size: 200% 200%;
+      background-position: right center;
+    }
+  }
+  @keyframes gradient-y {
+    0%,
+    100% {
+      background-size: 400% 400%;
+      background-position: center top;
+    }
+    50% {
+      background-size: 200% 200%;
+      background-position: center center;
+    }
+  }
+  @keyframes gradient-xy {
+    0%,
+    100% {
+      background-size: 400% 400%;
+      background-position: left center;
+    }
+    50% {
+      background-size: 200% 200%;
+      background-position: right center;
     }
   }
 }
 
+:root {
+  --primary: oklch(99% 0 0);
+  --secondary: oklch(15% 0 0);
+  --tertiary: oklch(40% 0 0);
+  --accent: oklch(25% 0 0);
+}
+
 @media (prefers-color-scheme: dark) {
+  :root {
+    --primary: oklch(0% 0 0);
+    --secondary: oklch(95% 0 0);
+    --tertiary: oklch(60% 0 0);
+    --accent: oklch(75% 0 0);
+  }
+
   .astro-code,
   .astro-code span {
     color: var(--shiki-dark) !important;
     background-color: var(--shiki-dark-bg) !important;
-    /* Optional, if you also want font styles */
     font-style: var(--shiki-dark-font-style) !important;
     font-weight: var(--shiki-dark-font-weight) !important;
     text-decoration: var(--shiki-dark-text-decoration) !important;

tailwind.config.ts

@@ -1,83 +0,0 @@
-import type { Config } from "tailwindcss";
-import defaultTheme from "tailwindcss/defaultTheme";
-
-export default {
-  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
-  theme: {
-    extend: {
-      fontFamily: {
-        sans: ["'Outfit Variable'", ...defaultTheme.fontFamily.sans],
-        serif: [...defaultTheme.fontFamily.serif],
-        mono: ["'Red Hat Mono Variable'", ...defaultTheme.fontFamily.mono],
-      },
-      colors: {
-        primary: "hsl(var(--primary))",
-        secondary: "hsl(var(--secondary))",
-        tertiary: "hsl(var(--tertiary))",
-        accent: "hsl(var(--accent))",
-      },
-    },
-    animation: {
-      reveal: "reveal 0.3s forwards ease-in-out",
-      logo: "logo 0.5s forwards ease-out",
-      "gradient-x": "gradient-x 6s ease infinite",
-      "gradient-y": "gradient-y 6s ease infinite",
-      "gradient-xy": "gradient-xy 6s ease infinite",
-    },
-    keyframes: {
-      reveal: {
-        "0%": {
-          transform: "translateY(20px)",
-          opacity: "0",
-          filter: "blur(4px)",
-        },
-        "100%": {
-          transform: "translateY(0px)",
-          opacity: "1",
-          filter: "blur(0px)",
-        },
-      },
-      logo: {
-        "0%": {
-          transform: "translateY(100%)",
-          color: "hsl(var(--primary))",
-        },
-        "100%": {
-          transform: "translateY(0%)",
-          color: "hsl(var(--secondary))",
-        },
-      },
-      "gradient-y": {
-        "0%, 100%": {
-          "background-size": "400% 400%",
-          "background-position": "center top",
-        },
-        "50%": {
-          "background-size": "200% 200%",
-          "background-position": "center center",
-        },
-      },
-      "gradient-x": {
-        "0%, 100%": {
-          "background-size": "200% 200%",
-          "background-position": "left center",
-        },
-        "50%": {
-          "background-size": "200% 200%",
-          "background-position": "right center",
-        },
-      },
-      "gradient-xy": {
-        "0%, 100%": {
-          "background-size": "400% 400%",
-          "background-position": "left center",
-        },
-        "50%": {
-          "background-size": "200% 200%",
-          "background-position": "right center",
-        },
-      },
-    },
-  },
-  plugins: [require("@tailwindcss/typography")],
-} satisfies Config;