Refactored terminal border to allow injecting arbitrary tailwind css

src/components/BlogItem.astro

@@ -19,7 +19,7 @@ interface Props {
 const { title, description, date, href, header } = Astro.props;
 ---
 
-<TerminalBorder header={header} footer={formatDate(date)} margin="0 0 2vw;">
+<TerminalBorder header={header} footer={formatDate(date)} extra="mb-[2vw]">
     <span class="cursor-pointer group block w-full">
         {
             href ? (

src/components/TerminalBorder.astro

@@ -2,13 +2,13 @@
 interface Props {
     header?: string;
     footer?: string;
-    margin?: string;
+    extra?: string;
 }
 
-const { header = "", footer = "", margin = "-0.1vw" } = Astro.props;
+const { header = "", footer = "", extra = "m-[-0.1vw]" } = Astro.props;
 ---
 
-<div class="section" style={`margin: ${margin};`}>
+<div class=`section ${extra}`>
     <span class="tag-top">{header}</span>
     <span class="tag-bottom">{footer}</span>
     <slot />

src/pages/404.astro

@@ -1,14 +1,17 @@
 ---
-import TerminalBorder from "@components/TerminalBorder.astro"
-import Terminal from "@layouts/Terminal.astro"
+import TerminalBorder from "@components/TerminalBorder.astro";
+import Terminal from "@layouts/Terminal.astro";
 
 const url = new URL(Astro.request.url).pathname.substring(1);
 ---
+
 <Terminal path="404">
-    <TerminalBorder header="Shell" margin="0.5rem 0">
+    <TerminalBorder header="Shell" extra="my-[0.625vw]">
         <span>
             <p id="cd">$ cd ~/{url}</p>
-            <p id="err" class="pt-3">"{url}": No such file or directory (os error 2)</p>
+            <p id="err" class="pt-[1vw]">
+                "{url}": No such file or directory (os error 2)
+            </p>
         </span>
     </TerminalBorder>
 </Terminal>
@@ -16,6 +19,7 @@ const url = new URL(Astro.request.url).pathname.substring(1);
     document.addEventListener("DOMContentLoaded", () => {
         const url = window.location.pathname.substring(1);
         document.getElementById("cd")!.textContent = `$ cd ~/${url}`;
-        document.getElementById("err")!.textContent = `"${url}": No such file or directory (os error 2)`;
+        document.getElementById("err")!.textContent =
+            `"${url}": No such file or directory (os error 2)`;
     });
 </script>

src/pages/blogs.astro

@@ -15,7 +15,7 @@ const blogs = (await getCollection("blogs"))
 ---
 
 <Terminal path="blogs/">
-    <TerminalBorder header="Shell" margin="0.625vw 0 1.5625vw">
+    <TerminalBorder header="Shell" extra="mt-[0.625vw] mb-[1.5625vw]">
         <p>$ ls -lah -t --color=auto ~/blogs</p>
     </TerminalBorder>
     <div class="max-h-[24vw] overflow-y-auto">

src/pages/index.astro

@@ -117,7 +117,7 @@ watching Anime or solving Rubik's cubes fast.`.trimStart();
                     </Link> | Learning Golang & Backend | Available for hire
                 </p>
             </TerminalBorder>
-            <TerminalBorder header="About Me" margin="2.5vw 0">
+            <TerminalBorder header="About Me" extra="my-[2.5vw]">
                 <p>{aboutMe}</p>
             </TerminalBorder>
             <BlogItem

src/pages/skills.astro

@@ -13,7 +13,13 @@ const data = [
 ];
 
 const langs = ["Java", "C/C++", "Golang", "Kotlin", "Rust", "Lua"];
-const tools = ["Git & GitHub", "Sqlite3", "Neovim and IntelliJ", "Linux", "NixOS"];
+const tools = [
+    "Git & GitHub",
+    "Sqlite3",
+    "Neovim and IntelliJ",
+    "Linux",
+    "NixOS",
+];
 const frameworks = ["Spigot API", "Bubbletea", "Astro"];
 ---
 
@@ -25,7 +31,7 @@ const frameworks = ["Spigot API", "Bubbletea", "Astro"];
                     {langs.map((lang) => <p>{lang}</p>)}
                 </div>
             </TerminalBorder>
-            <TerminalBorder header="Frameworks" margin="2.25vw 0">
+            <TerminalBorder header="Frameworks" extra="my-[2.25vw]">
                 <div class="grid grid-cols-1 items-center gap-x-[0.625vw]">
                     {frameworks.map((framework) => <p>{framework}</p>)}
                 </div>