do tailwind more smarter 🧠

app/previously/page.mdx

@@ -15,7 +15,7 @@ export const WarningMarquee = () => (
     <span className="leading-none">
       🚨 Trigger warning: excessive marquees, animated GIFs, Comic Sans, popups,{" "}
       <code className="text-[0.9rem] font-normal">
-        color: <span style={{ color: "#32cd32" }}>limegreen</span>
+        color: <span className="text-[#32cd32]">limegreen</span>
       </code>{" "}
       ahead...
     </span>

app/projects/page.tsx

@@ -70,8 +70,8 @@ const Page = async () => {
                 <div className="text-muted-foreground inline-flex flex-nowrap items-center gap-2">
                   {repo!.primaryLanguage.color && (
                     <span
-                      className="inline-block size-4 rounded-full"
-                      style={{ backgroundColor: repo!.primaryLanguage.color }}
+                      className="inline-block size-4 rounded-full bg-[var(--language-color)]"
+                      style={{ ["--language-color" as string]: repo!.primaryLanguage.color }}
                     />
                   )}
                   <span>{repo!.primaryLanguage.name}</span>

app/zip/page.mdx

@@ -11,9 +11,9 @@ export const metadata = createMetadata({
 
 export const Terminal = () => (
   <div
-    className="relative mx-auto my-6 w-full rounded-lg"
+    className="relative mx-auto my-6 w-full rounded-lg bg-center bg-no-repeat"
     style={{
-      background: `url(${backgroundImg.src}) center no-repeat`,
+      backgroundImage: `url(${backgroundImg.src})`,
     }}
   >
     <code className="border-ring block rounded-lg border border-solid bg-black/60 p-4 text-sm break-all text-white/90 backdrop-blur-xs backdrop-saturate-150">