Refactor tailwind calsses with the headwind extension

src/components/Footer.astro

@@ -1,3 +1,3 @@
 <footer class="p-4">
-    <p class="text-center text-sm">&copy; 2023 Thomas Cole.</p>
+    <p class="text-sm text-center">&copy; 2023 Thomas Cole.</p>
 </footer>

src/components/misc/BlogProjectCard.astro

@@ -12,10 +12,10 @@ const { title, subtitle, image, link } = Astro.props;
 
 <div class="rounded-lg ">
     <a href={link}>
-        <div class="my-2 flex flex-col sm:flex-col md:flex-col lg:flex-row xl:flex-row 2xl:flex-row w-11/12 mx-auto">
+        <div class="flex flex-col w-11/12 mx-auto my-2 sm:flex-col md:flex-col lg:flex-row xl:flex-row 2xl:flex-row">
-            <img class="h-44 lg:h-28 xl:h-28 my-2 aspect-video object-cover rounded-lg" src={image} alt="" loading="lazy">
+            <img class="object-cover my-2 rounded-lg h-44 lg:h-28 xl:h-28 aspect-video" src={image} alt="" loading="lazy">
             <div class="lg:ml-4 xl:ml-4 2xl:ml-4 grow">
-                <p class="mt-2 font-semibold text-2xl py-2 sm:text-2xl md:text-2xl lg:text-3xl xl:text-3xl 2xl:text-3xl">{title}</p>
+                <p class="py-2 mt-2 text-2xl font-semibold sm:text-2xl md:text-2xl lg:text-3xl xl:text-3xl 2xl:text-3xl">{title}</p>
                 <p>{subtitle}</p>
             </div>
         </div>

src/components/misc/ThemeToggle.astro

@@ -7,13 +7,13 @@ For the 3 lines of javascript needed I think its okay to use a script tag -->
     }
 </script>
 
-<label class="swap swap-rotate transition ease-in-out hover:scale-125">
+<label class="transition ease-in-out swap swap-rotate hover:scale-125">
     <!-- this hidden checkbox controls the state -->
     <input id="themetoggle" type="checkbox" data-toggle-theme="business,corporate" />
-    <span class="swap-off material-symbols-outlined mx-2">
+    <span class="mx-2 swap-off material-symbols-outlined">
         light_mode
     </span>
-    <span class="swap-on material-symbols-outlined mx-2">
+    <span class="mx-2 swap-on material-symbols-outlined">
         dark_mode
     </span>
 </label>

src/components/nav/Nav.astro

@@ -20,7 +20,7 @@
 </style>
 
 <div id="menu" data-shown=""
-    class="fixed top-0 left-0 w-72 h-screen p-4 flex flex-col bg-base-200 -translate-x-full lg:translate-x-0 xl:translate-x-0 transition-all duration-100 z-50">
+    class="fixed top-0 left-0 z-50 flex flex-col h-screen p-4 transition-all duration-100 -translate-x-full w-72 bg-base-200 lg:translate-x-0 xl:translate-x-0">
 
     <button id="menu-close" class="absolute top-0 right-0 p-2 lg:hidden">
         <span class="material-symbols-outlined">
@@ -29,8 +29,8 @@
     </button>
 
     <a href="/">
-        <div class="transition ease-in-out w-1/2 hover:scale-105 block mx-auto mt-2 mb-2">
+        <div class="block w-1/2 mx-auto mt-2 mb-2 transition ease-in-out hover:scale-105">
-            <img class="rounded-full aspect-square w-full object-cover" src="/img/profile.jpg" alt="">
+            <img class="object-cover w-full rounded-full aspect-square" src="/img/profile.jpg" alt="">
         </div>
     </a>
 
@@ -39,22 +39,22 @@
 
     <ul>
         <li class="flex flex-col">
-            <a href="/" class="w-full hover:bg-base-100 rounded transation ease-in-out duration-200">
+            <a href="/" class="w-full duration-200 ease-in-out rounded hover:bg-base-100 transation">
                 <button class="p-2">Home</button>
             </a>
         </li>
         <li class="flex">
-            <a href="/projects/1" class="w-full hover:bg-base-100 rounded transation ease-in-out duration-200">
+            <a href="/projects/1" class="w-full duration-200 ease-in-out rounded hover:bg-base-100 transation">
                 <button class="p-2">Projects</button>
             </a>
         </li>
         <li class="flex">
-            <a href="/resume" class="w-full hover:bg-base-100 rounded transation ease-in-out duration-200">
+            <a href="/resume" class="w-full duration-200 ease-in-out rounded hover:bg-base-100 transation">
                 <button class="p-2">Resume/CV</button>
             </a>
         </li>
         <li class="flex">
-            <a href="/contact" class="w-full hover:bg-base-100 rounded transation ease-in-out duration-200">
+            <a href="/contact" class="w-full duration-200 ease-in-out rounded hover:bg-base-100 transation">
                 <button class="p-2">Contact</button>
             </a>
         </li>
@@ -64,13 +64,13 @@
     <div class="grow"></div>
 </div>
 
-<div class="h-12 w-full flex lg:hidden xl:hidden bg-base-200 text-left transition-all duration-100">
+<div class="flex w-full h-12 text-left transition-all duration-100 lg:hidden xl:hidden bg-base-200">
     <button id="menubtn" class="w-12 h-12">
-        <span class="material-symbols-outlined mt-1">
+        <span class="mt-1 material-symbols-outlined">
             menu
         </span>
     </button>
-    <p class="my-auto mx-auto -translate-x-1/2 font-semibold text-xl">{displayedName}</p>
+    <p class="mx-auto my-auto text-xl font-semibold -translate-x-1/2">{displayedName}</p>
 </div>
 
 <div id="draweroverlay" class="hidden fixed top-0 left-0 w-full h-[100vh] z-10 bg-black/50" />

src/components/nav/SocialLinks.astro

@@ -2,9 +2,9 @@
 import ThemeToggle from "../misc/ThemeToggle.astro";
 ---
 
-<div class="flex place-content-center mt-4">
+<div class="flex mt-4 place-content-center">
     <a class="mx-2" href="https://git.thomaspcole.com/thomascole">
-        <svg class="inline-block w-7 h-7 transition ease-in-out hover:scale-125" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+        <svg class="inline-block transition ease-in-out w-7 h-7 hover:scale-125" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
             version="1.1" id="main_outline" viewBox="0 0 640 640" xml:space="preserve">
             <g>
                 <path id="teabag" class="fill-none"
@@ -21,13 +21,13 @@ import ThemeToggle from "../misc/ThemeToggle.astro";
         </svg>
     </a>
     <a class="mx-2" href="https://github.com/thomaspcole">
-        <svg class="inline-block w-6 h-6 fill-current transition ease-in-out hover:scale-125" viewBox="0 0 96 98" xmlns="http://www.w3.org/2000/svg">
+        <svg class="inline-block w-6 h-6 transition ease-in-out fill-current hover:scale-125" viewBox="0 0 96 98" xmlns="http://www.w3.org/2000/svg">
             <path fill-rule="evenodd" clip-rule="evenodd"
                 d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" />
         </svg>
     </a>
     <a class="mx-2" href="https://www.linkedin.com/in/thomaspcole">
-        <svg class="inline-block w-6 h-6 fill-current transition ease-in-out hover:scale-125" xmlns="http://www.w3.org/2000/svg"
+        <svg class="inline-block w-6 h-6 transition ease-in-out fill-current hover:scale-125" xmlns="http://www.w3.org/2000/svg"
             xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 455 455"
             style="enable-background:new 0 0 455 455;" xml:space="preserve">
             <g>

src/components/resume/Timeline.astro

@@ -9,11 +9,11 @@ const { title, subtitle } = Astro.props;
 
 <div class="flex">
     <div>
-        <span class="w-4 h-4 bg-primary block rounded-full mt-2"></span>
+        <span class="block w-4 h-4 mt-2 rounded-full bg-primary"></span>
         <span class="bg-primary block h-full w-[2px] translate-x-[7px]"></span>
     </div>
     <div class="px-5">
-        <p class="font-semibold text-xl">{title}</p>
+        <p class="text-xl font-semibold">{title}</p>
         <span class="text-sm font-light">{subtitle}</span>
         <slot></slot>
     </div>

src/layouts/BlogLayout.astro

@@ -7,14 +7,14 @@ const { frontmatter } = Astro.props;
 
 <Layout>
     <main
-        class="w-1/2 sm:w-5/6 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2 mx-auto mt-4 mb-6 flex flex-col justify-center">
+        class="flex flex-col justify-center w-1/2 mx-auto mt-4 mb-6 sm:w-5/6 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2">
         <div class="relative mb-4">
-            <img class="aspect-video object-cover" src={frontmatter.image} alt="" loading="lazy"/>
+            <img class="object-cover aspect-video" src={frontmatter.image} alt="" loading="lazy"/>
             <a href={frontmatter.imageattr} class="absolute bottom-0 right-0 h-[24px]">
                 <span class="material-symbols-outlined opacity-25 mr-[4px]">link</span>
             </a>
         </div>
-        <p class="my-2 font-bold text-5xl">{frontmatter.title}</p>
+        <p class="my-2 text-5xl font-bold">{frontmatter.title}</p>
         <p>{frontmatter.date}</p>
         <Divider />
         <slot />

src/layouts/InteractiveDemoLayout.astro

@@ -5,14 +5,14 @@
 ---
 
 <Layout>
-    <main class="w-5/6 sm:w-5/6 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2 mx-auto mt-4 mb-6 flex flex-col justify-center">
+    <main class="flex flex-col justify-center w-5/6 mx-auto mt-4 mb-6 sm:w-5/6 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2">
         <div class="relative mb-4">
-            <img class="aspect-video object-cover rounded-xl" src={frontmatter.image} alt="" />
+            <img class="object-cover aspect-video rounded-xl" src={frontmatter.image} alt="" />
             <a href={frontmatter.imageattr} class="absolute bottom-0 right-0 h-[24px]">
                 <span class="material-symbols-outlined opacity-25 mr-[4px]">link</span>
             </a>
         </div>
-        <p class="my-2 font-bold text-5xl">{frontmatter.title}</p>
+        <p class="my-2 text-5xl font-bold">{frontmatter.title}</p>
         <p>{frontmatter.date}</p>
         <Divider />
         <!-- Render our markdown with the normal header styling and some extra padding. -->

src/pages/contact.astro

@@ -3,15 +3,15 @@
 ---
 
 <Layout title={" | Contact"}>
-    <div class="my-2 flex flex-col sm:flex-col md:flex-col lg:flex-row xl:flex-row 2xl:flex-row w-5/6 mx-auto">
+    <div class="flex flex-col w-5/6 mx-auto my-2 sm:flex-col md:flex-col lg:flex-row xl:flex-row 2xl:flex-row">
-        <div class="w-full lg:w-1/2 text-center">
+        <div class="w-full text-center lg:w-1/2">
             <p>Picture here</p>
         </div>
-        <div class="w-full lg:w-1/2 text-center flex flex-col gap-4">
+        <div class="flex flex-col w-full gap-4 text-center lg:w-1/2">
-            <input type="text" placeholder="Name" class="input input-bordered w-full" />
+            <input type="text" placeholder="Name" class="w-full input input-bordered" />
-            <input type="text" placeholder="Email" class="input input-bordered w-full" />
+            <input type="text" placeholder="Email" class="w-full input input-bordered" />
-            <textarea class="textarea textarea-bordered w-full" placeholder="Message" style="resize:none"></textarea>
+            <textarea class="w-full textarea textarea-bordered" placeholder="Message" style="resize:none"></textarea>
-            <button class="btn w-full">Submit</button>
+            <button class="w-full btn">Submit</button>
         </div>
     </div>
 </Layout>

src/pages/index.astro

@@ -11,7 +11,7 @@ const projects = (await Astro.glob("./projects/**/*.{md,mdx}")).sort(
 ---
 
 <Layout>
-	<main class="flex flex-col m-6 mx-auto w-5/6 sm:w-5/6 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2">
+	<main class="flex flex-col w-5/6 m-6 mx-auto sm:w-5/6 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2">
 		<section>
 			<div class="flex flex-row">
 				<p class="text-5xl sm:text-5xl md:text-5xl lg:text-6xl py-1 font-extrabold text-transparent bg-clip-text bg-gradient-to-br from-[#1f89db] to-[#f42a8b]">Hello World!</p>
@@ -21,7 +21,7 @@ const projects = (await Astro.glob("./projects/**/*.{md,mdx}")).sort(
 		</section>
 		<div class="divider"/>
 		<section>
-			<p class="text-2xl font-bold py-2 sm:text-2xl md:text-2xl lg:text-4xl xl:text-4xl 2xl:text-4xl">Latest Projects</p>
+			<p class="py-2 text-2xl font-bold sm:text-2xl md:text-2xl lg:text-4xl xl:text-4xl 2xl:text-4xl">Latest Projects</p>
 			{
 				projects.map((post) => (
 					<BlogProjectCard

src/pages/projects/[page].astro

@@ -17,7 +17,7 @@
 ---
 
 <Layout title=" | Projects">
-    <main class="w-full md:w-5/6 lg:w-4/5 xl:w-4/5 mx-auto mt-4">
+    <main class="w-full mx-auto mt-4 md:w-5/6 lg:w-4/5 xl:w-4/5">
         <div class="flex flex-col">
             {
             page.data.map((post: any) => (
@@ -27,10 +27,10 @@
             ))
             }
         </div>
-        <div class="w-1/2 mx-auto flex justify-between">
+        <div class="flex justify-between w-1/2 mx-auto">
             {
             page.url.prev ? (
-            <a class="w-40 flex" href={page.url.prev}>
+            <a class="flex w-40" href={page.url.prev}>
                 <span class="material-symbols-outlined">
                     chevron_left
                 </span>
@@ -41,11 +41,11 @@
             )
             }
 
-            <p class="grow text-center whitespace-nowrap">Page {page.currentPage}</p>
+            <p class="text-center grow whitespace-nowrap">Page {page.currentPage}</p>
             {
             page.url.next ? (
-            <a class="w-40 flex" href={page.url.next}>
+            <a class="flex w-40" href={page.url.next}>
-                <p class="grow text-right">Next Page</p>
+                <p class="text-right grow">Next Page</p>
                 <span class="material-symbols-outlined">
                     chevron_right
                 </span>

src/pages/resume.astro

@@ -24,11 +24,11 @@
     </style>
 
     <main class="w-5/6 mx-auto sm:w-5/6 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2">
-        <p class="font-bold text-2xl py-6">About Me</p>
+        <p class="py-6 text-2xl font-bold">About Me</p>
         <p>{resume.basics.summary}</p>
         
         <div class="divider"/>
-        <p class="font-bold text-2xl pb-6">Work Experience</p>
+        <p class="pb-6 text-2xl font-bold">Work Experience</p>
         <div class="time-line-container">
             {resume.work.map((item:any)=>
                 <Timeline title={item.position} subtitle={item.name + " | " + parseDate(item.startDate) + " - " + parseDate(item.endDate)}>
@@ -41,24 +41,24 @@
             )}
         </div>
 
-        <p class="font-bold text-2xl py-6">Education</p>
+        <p class="py-6 text-2xl font-bold">Education</p>
         <div class="time-line-container">
             {resume.education.map((item:any)=>
                 <Timeline title={item.institution} subtitle={item.area + " | " + parseDate(item.endDate)}/>
             )}
         </div>
 
-        <p class="font-bold text-2xl py-6">Professional Certificates</p>
+        <p class="py-6 text-2xl font-bold">Professional Certificates</p>
         <div class="time-line-container">
             {resume.certificates.map((item:any)=>
                 <Timeline title={item.name} subtitle={item.issuer + " | " + parseDate(item.date)}/>
             )}
         </div>
 
-        <p class="font-bold text-2xl py-6">Skills</p>
+        <p class="py-6 text-2xl font-bold">Skills</p>
         {resume.skills.map((item:any)=>
             <div class="divider">{item.name}</div>
-            <div class="flex flex-wrap gap-2 mx-auto my-2 pb-4">
+            <div class="flex flex-wrap gap-2 pb-4 mx-auto my-2">
                 {item.keywords.map((skill:any)=>
                     <div class="badge badge-lg">{skill}</div>
                 )}