From 924cbd845f1c37693e92169335429626435e551d Mon Sep 17 00:00:00 2001
From: aedwardg <aedwardg1@gmail.com>
Date: Sun, 26 Jan 2025 08:17:04 -0800
Subject: [PATCH 1/2] add tailwind prettier plugin

---
 package-lock.json | 80 +++++++++++++++++++++++++++++++++++++++++++++++
 package.json      |  6 ++++
 2 files changed, 86 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 82274aa..568b6e5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,6 +29,7 @@
         "lint-staged": "^15.3.0",
         "postcss": "^8.4.49",
         "prettier": "3.4.2",
+        "prettier-plugin-tailwindcss": "^0.6.11",
         "tailwindcss": "^3.4.17",
         "typescript": "~5.6.2",
         "typescript-eslint": "^8.18.2",
@@ -5037,6 +5038,85 @@
         "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
+    "node_modules/prettier-plugin-tailwindcss": {
+      "version": "0.6.11",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.11.tgz",
+      "integrity": "sha512-YxaYSIvZPAqhrrEpRtonnrXdghZg1irNg4qrjboCXrpybLWVs55cW2N3juhspVJiO0JBvYJT8SYsJpc8OQSnsA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.21.3"
+      },
+      "peerDependencies": {
+        "@ianvs/prettier-plugin-sort-imports": "*",
+        "@prettier/plugin-pug": "*",
+        "@shopify/prettier-plugin-liquid": "*",
+        "@trivago/prettier-plugin-sort-imports": "*",
+        "@zackad/prettier-plugin-twig": "*",
+        "prettier": "^3.0",
+        "prettier-plugin-astro": "*",
+        "prettier-plugin-css-order": "*",
+        "prettier-plugin-import-sort": "*",
+        "prettier-plugin-jsdoc": "*",
+        "prettier-plugin-marko": "*",
+        "prettier-plugin-multiline-arrays": "*",
+        "prettier-plugin-organize-attributes": "*",
+        "prettier-plugin-organize-imports": "*",
+        "prettier-plugin-sort-imports": "*",
+        "prettier-plugin-style-order": "*",
+        "prettier-plugin-svelte": "*"
+      },
+      "peerDependenciesMeta": {
+        "@ianvs/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@prettier/plugin-pug": {
+          "optional": true
+        },
+        "@shopify/prettier-plugin-liquid": {
+          "optional": true
+        },
+        "@trivago/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@zackad/prettier-plugin-twig": {
+          "optional": true
+        },
+        "prettier-plugin-astro": {
+          "optional": true
+        },
+        "prettier-plugin-css-order": {
+          "optional": true
+        },
+        "prettier-plugin-import-sort": {
+          "optional": true
+        },
+        "prettier-plugin-jsdoc": {
+          "optional": true
+        },
+        "prettier-plugin-marko": {
+          "optional": true
+        },
+        "prettier-plugin-multiline-arrays": {
+          "optional": true
+        },
+        "prettier-plugin-organize-attributes": {
+          "optional": true
+        },
+        "prettier-plugin-organize-imports": {
+          "optional": true
+        },
+        "prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "prettier-plugin-style-order": {
+          "optional": true
+        },
+        "prettier-plugin-svelte": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
diff --git a/package.json b/package.json
index e08406a..87a047a 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "lint-staged": "^15.3.0",
     "postcss": "^8.4.49",
     "prettier": "3.4.2",
+    "prettier-plugin-tailwindcss": "^0.6.11",
     "tailwindcss": "^3.4.17",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.18.2",
@@ -41,5 +42,10 @@
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": "eslint --fix",
     "*.{js,jsx,ts,tsx,md,html,css}": "prettier --write"
+  },
+  "prettier": {
+    "plugins": [
+      "prettier-plugin-tailwindcss"
+    ]
   }
 }

From 427e5ae0068243d3bf4fc6c15857f65f6e94b7cd Mon Sep 17 00:00:00 2001
From: aedwardg <aedwardg1@gmail.com>
Date: Sun, 26 Jan 2025 08:17:27 -0800
Subject: [PATCH 2/2] run prettier on project with tailwind plugin enabled

---
 src/components/Layout/Footer.tsx |  8 +++----
 src/components/Layout/Header.tsx |  6 ++---
 src/routes/About/index.tsx       |  2 +-
 src/routes/Home/CTA.tsx          | 10 ++++----
 src/routes/Home/Features.tsx     | 32 ++++++++++++-------------
 src/routes/Home/Hero.tsx         | 12 +++++-----
 src/routes/Home/Showcase.tsx     | 40 ++++++++++++++++----------------
 7 files changed, 55 insertions(+), 55 deletions(-)

diff --git a/src/components/Layout/Footer.tsx b/src/components/Layout/Footer.tsx
index bb554ce..de9befa 100644
--- a/src/components/Layout/Footer.tsx
+++ b/src/components/Layout/Footer.tsx
@@ -3,16 +3,16 @@ import { Code } from "lucide-react";
 
 export default function Footer() {
   return (
-    <footer className="py-16 bg-background flex justify-around">
+    <footer className="flex justify-around bg-background py-16">
       <div className="footer-container text-primary">
-        <h4 className="text-xl font-bold flex items-center gap-2">
+        <h4 className="flex items-center gap-2 text-xl font-bold">
           <Code size={48} className="text-primary" />
           Code Cafe
         </h4>
         <p className="text-sm">Your home for coding and community</p>
       </div>
       <div className="footer-container text-primary">
-        <h4 className="text-xl font-bold mb-4">Community</h4>
+        <h4 className="mb-4 text-xl font-bold">Community</h4>
         <ul className="list-none">
           <li className="mb-3 text-sm">
             <Link to="/events">Events</Link>
@@ -23,7 +23,7 @@ export default function Footer() {
         </ul>
       </div>
       <div className="footer-container text-primary">
-        <h4 className="text-xl font-bold mb-4">Resources</h4>
+        <h4 className="mb-4 text-xl font-bold">Resources</h4>
         <ul className="list-none">
           <li className="mb-3 text-sm">Documentation</li>
           <li className="mb-3 text-sm">Blog</li>
diff --git a/src/components/Layout/Header.tsx b/src/components/Layout/Header.tsx
index 2c1efe6..9727819 100644
--- a/src/components/Layout/Header.tsx
+++ b/src/components/Layout/Header.tsx
@@ -2,14 +2,14 @@ import { NavLink } from "react-router";
 
 export default function Header() {
   return (
-    <header className="sticky top-0 bg-primary/80 backdrop-blur-lg py-4 flex justify-around items-center">
-      <NavLink className="flex gap-2 items-center" to="/">
+    <header className="sticky top-0 flex items-center justify-around bg-primary/80 py-4 backdrop-blur-lg">
+      <NavLink className="flex items-center gap-2" to="/">
         <img
           className="w-12 pr-2"
           src={"/images/coffee_cup.png"}
           alt="Code Cafe Logo"
         />
-        <h1 className="text-secondary text-3xl">Code Cafe</h1>
+        <h1 className="text-3xl text-secondary">Code Cafe</h1>
       </NavLink>
       <nav>
         <ul className="flex list-none gap-3 text-secondary">
diff --git a/src/routes/About/index.tsx b/src/routes/About/index.tsx
index 9586de7..37297fa 100644
--- a/src/routes/About/index.tsx
+++ b/src/routes/About/index.tsx
@@ -1,6 +1,6 @@
 export default function About() {
   return (
-    <main className="min-h-[25vh] grid place-items-center bg-primary">
+    <main className="grid min-h-[25vh] place-items-center bg-primary">
       <h3 className="text-3xl text-secondary">About Code Cafe</h3>
     </main>
   );
diff --git a/src/routes/Home/CTA.tsx b/src/routes/Home/CTA.tsx
index b742f27..50bf5d4 100644
--- a/src/routes/Home/CTA.tsx
+++ b/src/routes/Home/CTA.tsx
@@ -2,18 +2,18 @@ export default function CTA() {
   return (
     <section
       id="cta"
-      className="bg-primary flex justify-center items-center p-6 md:py-20"
+      className="flex items-center justify-center bg-primary p-6 md:py-20"
     >
-      <div className="cta-container bg-gradient-to-r from-accent to-secondary shadow-md rounded-3xl p-10 md:px-60 md:py-20 flex flex-col justify-evenly items-center text-primary">
-        <h2 className="text-3xl font-bold mb-4 text-center">
+      <div className="cta-container flex flex-col items-center justify-evenly rounded-3xl bg-gradient-to-r from-accent to-secondary p-10 text-primary shadow-md md:px-60 md:py-20">
+        <h2 className="mb-4 text-center text-3xl font-bold">
           Ready to Join Our Community?
         </h2>
-        <p className="text-center text-lg mb-6">
+        <p className="mb-6 text-center text-lg">
           Start your journey with Code Cafe today and become part of a thriving
           developer community.
         </p>
         <a
-          className="discord-button bg-primary px-8 py-4 rounded-lg border-2 border-primary text-secondary hover:bg-secondary hover:text-primary transition-all hover:no-underline"
+          className="discord-button rounded-lg border-2 border-primary bg-primary px-8 py-4 text-secondary transition-all hover:bg-secondary hover:text-primary hover:no-underline"
           href="https://discord.gg/code-cafe"
         >
           Join Code Cafe
diff --git a/src/routes/Home/Features.tsx b/src/routes/Home/Features.tsx
index fe8a33b..1ed1c88 100644
--- a/src/routes/Home/Features.tsx
+++ b/src/routes/Home/Features.tsx
@@ -3,35 +3,35 @@ import { Users, CircleHelp, BookOpen } from "lucide-react";
 export default function Features() {
   return (
     <section className="bg-background py-20">
-      <div className="outer mx-auto border border-solid border-transparent rounded-2xl max-w-6xl p-2.5">
-        <div className="inner rounded-lg flex gap-x-6 py-6 px-4">
-          <div className="flex-1 flex flex-col items-center text-center py-6">
-            <Users size={48} className="text-accent mb-2" />
-            <h3 className="text-secondary text-xl mb-2 font-mono">
+      <div className="outer mx-auto max-w-6xl rounded-2xl border border-solid border-transparent p-2.5">
+        <div className="inner flex gap-x-6 rounded-lg px-4 py-6">
+          <div className="flex flex-1 flex-col items-center py-6 text-center">
+            <Users size={48} className="mb-2 text-accent" />
+            <h3 className="mb-2 font-mono text-xl text-secondary">
               Active Community
             </h3>
-            <p className="text-secondary text-sm">
+            <p className="text-sm text-secondary">
               Connect with like-minded developers and build lasting
               relationships.
             </p>
           </div>
-          <div className="self-center bg-[rgba(255,255,255,0.1)] bg-clip-border bg-origin-padding bg-scroll bg-repeat shadow-[0px_0px_70px_15px_rgba(0,0,0,0.75)] box-border text-white font-sans font-[cv05_ss01_ss03_zero] text-base leading-6 h-[100px] w-[1px] text-left hidden lg:block"></div>
+          <div className="box-border hidden h-[100px] w-[1px] self-center bg-[rgba(255,255,255,0.1)] bg-scroll bg-clip-border bg-repeat bg-origin-padding text-left font-sans text-base font-[cv05_ss01_ss03_zero] leading-6 text-white shadow-[0px_0px_70px_15px_rgba(0,0,0,0.75)] lg:block"></div>
 
-          <div className="flex-1 flex flex-col items-center text-center py-6 font-mono">
-            <CircleHelp size={48} className="text-accent mb-2" />
-            <h3 className="text-secondary text-xl mb-2">Some other thing</h3>
-            <p className="text-secondary text-sm">
+          <div className="flex flex-1 flex-col items-center py-6 text-center font-mono">
+            <CircleHelp size={48} className="mb-2 text-accent" />
+            <h3 className="mb-2 text-xl text-secondary">Some other thing</h3>
+            <p className="text-sm text-secondary">
               Description about that other thing.
             </p>
           </div>
-          <div className="self-center bg-[rgba(255,255,255,0.1)] bg-clip-border bg-origin-padding bg-scroll bg-repeat shadow-[0px_0px_70px_15px_rgba(0,0,0,0.75)] box-border text-white font-sans font-[cv05_ss01_ss03_zero] text-base leading-6 h-[100px] w-[1px] text-left hidden lg:block"></div>
+          <div className="box-border hidden h-[100px] w-[1px] self-center bg-[rgba(255,255,255,0.1)] bg-scroll bg-clip-border bg-repeat bg-origin-padding text-left font-sans text-base font-[cv05_ss01_ss03_zero] leading-6 text-white shadow-[0px_0px_70px_15px_rgba(0,0,0,0.75)] lg:block"></div>
 
-          <div className="flex-1 flex flex-col items-center text-center py-6">
-            <BookOpen size={48} className="text-accent mb-2" />
-            <h3 className="text-secondary text-xl mb-2 font-mono">
+          <div className="flex flex-1 flex-col items-center py-6 text-center">
+            <BookOpen size={48} className="mb-2 text-accent" />
+            <h3 className="mb-2 font-mono text-xl text-secondary">
               Learning Resources
             </h3>
-            <p className="text-secondary text-sm">
+            <p className="text-sm text-secondary">
               Access curated learning materials and documentation.
             </p>
           </div>
diff --git a/src/routes/Home/Hero.tsx b/src/routes/Home/Hero.tsx
index 2b79a28..21e86b4 100644
--- a/src/routes/Home/Hero.tsx
+++ b/src/routes/Home/Hero.tsx
@@ -2,21 +2,21 @@ export default function Hero() {
   return (
     <section
       id="hero"
-      className="min-h-[8vh] bg-primary flex flex-col justify-evenly items-center text-accent py-8"
+      className="flex min-h-[8vh] flex-col items-center justify-evenly bg-primary py-8 text-accent"
     >
-      <div className="text-center flex items-center justify-center flex-wrap xl:flex-nowrap p-8 lg:p-5">
+      <div className="flex flex-wrap items-center justify-center p-8 text-center lg:p-5 xl:flex-nowrap">
         <div className="flex flex-col items-center">
-          <h2 className="text-xl md:text-xl lg:text-4xl mb-2">
+          <h2 className="mb-2 text-xl md:text-xl lg:text-4xl">
             Where Code Meets Community
           </h2>
-          <p className="font-mono text-lg max-w-prose">
+          <p className="max-w-prose font-mono text-lg">
             Join our vibrant community of developers, share knowledge and grow
             together in a welcoming environment.
           </p>
         </div>
       </div>
-      <div className="flex gap-10 my-6">
-        <button className="px-8 py-4 text-primary rounded-lg border-2 border-secondary hover:border-secondary bg-secondary hover:text-secondary hover:bg-primary transition-all">
+      <div className="my-6 flex gap-10">
+        <button className="rounded-lg border-2 border-secondary bg-secondary px-8 py-4 text-primary transition-all hover:border-secondary hover:bg-primary hover:text-secondary">
           Join us
         </button>
       </div>
diff --git a/src/routes/Home/Showcase.tsx b/src/routes/Home/Showcase.tsx
index ab2896d..6b49289 100644
--- a/src/routes/Home/Showcase.tsx
+++ b/src/routes/Home/Showcase.tsx
@@ -3,55 +3,55 @@ import { Smile } from "lucide-react";
 export default function Showcase() {
   return (
     <section className="flex flex-col items-center bg-background py-20">
-      <h2 className="text-xl md:text-xl lg:text-4xl mb-6 text-primary">
+      <h2 className="mb-6 text-xl text-primary md:text-xl lg:text-4xl">
         Community Showcase
       </h2>
-      <div className="flex flex-1 gap-1 mx-4">
-        <div className="outer mx-auto border border-solid border-transparent rounded-2xl max-w-6xl p-2.5">
-          <div className="inner rounded-lg py-6 px-4">
-            <div className="flex-1 flex flex-col text-center px-6 py-6">
+      <div className="mx-4 flex flex-1 gap-1">
+        <div className="outer mx-auto max-w-6xl rounded-2xl border border-solid border-transparent p-2.5">
+          <div className="inner rounded-lg px-4 py-6">
+            <div className="flex flex-1 flex-col px-6 py-6 text-center">
               <div className="flex flex-1 justify-start">
-                <Smile size={48} className="text-accent mb-2 mr-4" />
-                <h3 className="flex flex-col items-start text-secondary text-xl mb-2 font-mono">
+                <Smile size={48} className="mb-2 mr-4 text-accent" />
+                <h3 className="mb-2 flex flex-col items-start font-mono text-xl text-secondary">
                   Sarah Johnson
                   <span className="text-sm">Task Manager App</span>
                 </h3>
               </div>
-              <p className="text-secondary text-left text-md max-w-full">
+              <p className="text-md max-w-full text-left text-secondary">
                 A sleek, intuitive task management application built with React
                 and Node.js.
               </p>
             </div>
           </div>
         </div>
-        <div className="outer mx-auto border border-solid border-transparent rounded-2xl max-w-6xl p-2.5">
-          <div className="inner rounded-lg py-6 px-4">
-            <div className="flex-1 flex flex-col text-center px-6 py-6">
+        <div className="outer mx-auto max-w-6xl rounded-2xl border border-solid border-transparent p-2.5">
+          <div className="inner rounded-lg px-4 py-6">
+            <div className="flex flex-1 flex-col px-6 py-6 text-center">
               <div className="flex flex-1 justify-start">
-                <Smile size={48} className="text-accent mb-2 mr-4" />
-                <h3 className="flex flex-col items-start text-secondary text-xl mb-2 font-mono">
+                <Smile size={48} className="mb-2 mr-4 text-accent" />
+                <h3 className="mb-2 flex flex-col items-start font-mono text-xl text-secondary">
                   Mike Chen
                   <span className="text-sm">Weather Dashboard</span>
                 </h3>
               </div>
-              <p className="text-secondary text-left text-md max-w-full">
+              <p className="text-md max-w-full text-left text-secondary">
                 Real-time weather information visualized beautifully using D3.js
                 and OpenWeatherMap API.
               </p>
             </div>
           </div>
         </div>
-        <div className="outer mx-auto border border-solid border-transparent rounded-2xl max-w-6xl p-2.5">
-          <div className="inner rounded-lg py-6 px-4">
-            <div className="flex-1 flex flex-col text-center px-6 py-6">
+        <div className="outer mx-auto max-w-6xl rounded-2xl border border-solid border-transparent p-2.5">
+          <div className="inner rounded-lg px-4 py-6">
+            <div className="flex flex-1 flex-col px-6 py-6 text-center">
               <div className="flex flex-1 justify-start">
-                <Smile size={48} className="text-accent mb-2 mr-4" />
-                <h3 className="flex flex-col items-start text-secondary text-xl mb-2 font-mono">
+                <Smile size={48} className="mb-2 mr-4 text-accent" />
+                <h3 className="mb-2 flex flex-col items-start font-mono text-xl text-secondary">
                   Emily Rodriguez
                   <span className="text-sm">Code Snippet Library</span>
                 </h3>
               </div>
-              <p className="text-secondary text-left text-md max-w-full">
+              <p className="text-md max-w-full text-left text-secondary">
                 A collaborative platform for developers to share and discover
                 useful code snippets.
               </p>