Added to tailwind-prettier plugin to the repo

.prettierrc

@@ -7,5 +7,6 @@
   "printWidth": 120,
   "arrowParens": "avoid",
   "jsxSingleQuote": false,
-  "bracketSpacing": true
+  "bracketSpacing": true,
+  "plugins": ["prettier-plugin-tailwindcss"]
 }

package.json

@@ -52,7 +52,8 @@
     "eslint-config-next": "^14.1.4",
     "eslint-config-prettier": "^9.1.0",
     "postcss": "^8",
-    "prettier": "3.3.3",
+    "prettier": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.9",
     "tailwindcss": "^3.3.0",
     "typescript": "^5",
     "typescript-eslint": "^8.14.0"

src/app/(pages)/contact/_components/ContactCard.tsx

@@ -8,7 +8,7 @@ type ContactCardProps = {
 export default function ContactCard({ children, link = '' }: ContactCardProps) {
   return (
     <a href={link} target="_blank" rel="noopener noreferrer">
-      <div className="box-border mb-12 bg-white w-72 h-72 rounded-[50px] flex flex-col items-center py-5 space-y-5 justify-center hover:shadow-2xl transition-shadow ease-in-out duration-200">
+      <div className="mb-12 box-border flex h-72 w-72 flex-col items-center justify-center space-y-5 rounded-[50px] bg-white py-5 transition-shadow duration-200 ease-in-out hover:shadow-2xl">
         {children}
       </div>
     </a>

src/app/(pages)/contact/_components/Form.tsx

@@ -40,11 +40,11 @@ export default function Form() {
   return (
     <form className="rounded text-white" onSubmit={sendEmail}>
       <div className="mb-4">
-        <label className="block font-bold mb-2" htmlFor="email">
+        <label className="mb-2 block font-bold" htmlFor="email">
           Email
         </label>
         <input
-          className="bg-blueprint border-b-2 border-white focus:outline-none w-full py-2 px-3 leading-tight placeholder-white"
+          className="w-full border-b-2 border-white bg-blueprint px-3 py-2 leading-tight placeholder-white focus:outline-none"
           name="email"
           id="email"
           type="email"
@@ -54,11 +54,11 @@ export default function Form() {
         />
       </div>
       <div className="mb-4">
-        <label className="block font-bold mb-2" htmlFor="name">
+        <label className="mb-2 block font-bold" htmlFor="name">
           Name
         </label>
         <input
-          className="bg-blueprint border-b-2 border-white focus:outline-none w-full py-2 px-3 leading-tight placeholder-white"
+          className="w-full border-b-2 border-white bg-blueprint px-3 py-2 leading-tight placeholder-white focus:outline-none"
           id="name"
           type="text"
           placeholder="Enter your name"
@@ -67,20 +67,20 @@ export default function Form() {
         />
       </div>
       <div className="mb-4">
-        <label className="block font-bold mb-2" htmlFor="message">
+        <label className="mb-2 block font-bold" htmlFor="message">
           Message
         </label>
         <div
-          className="bg-blueprint border-b-2 border-white focus:outline-none w-full py-2 px-3 leading-tight"
+          className="w-full border-b-2 border-white bg-blueprint px-3 py-2 leading-tight focus:outline-none"
           contentEditable
           role="textbox"
           id="message"
         ></div>
       </div>
-      <div className="flex items-center justify-center w-full mt-11">
+      <div className="mt-11 flex w-full items-center justify-center">
         <ReCAPTCHA sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY!} ref={recaptchaRef} size="invisible" />
         <button
-          className="bg-white hover:bg-blueprint-50 text-blueprint font-bold w-11/12 py-2 px-4 rounded-full tracking-[0.3em] hover:tracking-[0.2em] transition-all ease-in-out"
+          className="w-11/12 rounded-full bg-white px-4 py-2 font-bold tracking-[0.3em] text-blueprint transition-all ease-in-out hover:bg-blueprint-50 hover:tracking-[0.2em]"
           type="submit"
         >
           SUBMIT

src/app/(pages)/contact/page.tsx

@@ -11,40 +11,40 @@ import Form from './_components/Form';
 function Page() {
   return (
     <div className="bg-blueprint-50">
-      <div className="bg-blueprint-50 h-[200px] md:h-[425px] pt-12">
-        <div className="text-center font-black text-4xl md:text-5xl">
+      <div className="h-[200px] bg-blueprint-50 pt-12 md:h-[425px]">
+        <div className="text-center text-4xl font-black md:text-5xl">
           <span className="text-blueprint">Connect </span>
           With Us
         </div>
-        <div className="hidden md:flex container justify-around static pt-48 gap-4">
+        <div className="container static hidden justify-around gap-4 pt-48 md:flex">
           <ContactCard link="https://www.instagram.com/cublueprint/">
-            <FaInstagram className="text-[#3B6E9B] size-28" />
-            <h2 className="text-[#3B6E9B] text-3xl font-black">Instagram</h2>
+            <FaInstagram className="size-28 text-[#3B6E9B]" />
+            <h2 className="text-3xl font-black text-[#3B6E9B]">Instagram</h2>
           </ContactCard>
           <ContactCard link="mailto:[email protected]">
-            <MdEmail className="text-[#3B6E9B] size-28" />
-            <h2 className="text-[#3B6E9B] text-3xl font-black">Email</h2>
+            <MdEmail className="size-28 text-[#3B6E9B]" />
+            <h2 className="text-3xl font-black text-[#3B6E9B]">Email</h2>
           </ContactCard>
           <ContactCard link="https://discord.gg/7gkkW5nJPW">
-            <FaDiscord className="text-[#3B6E9B] size-28" />
-            <h2 className="text-[#3B6E9B] text-3xl font-black">Discord</h2>
+            <FaDiscord className="size-28 text-[#3B6E9B]" />
+            <h2 className="text-3xl font-black text-[#3B6E9B]">Discord</h2>
           </ContactCard>
         </div>
       </div>
       <BlockContainer flip="blueprint">
-        <div className="flex flex-col md:flex-row justify-between text-white text-lg pt-[5px] md:pt-[200px] md:pb-16 gap-24">
+        <div className="flex flex-col justify-between gap-24 pt-[5px] text-lg text-white md:flex-row md:pb-16 md:pt-[200px]">
           <div className="w-full md:w-1/3">
             <Form />
           </div>
           <div className="w-[340px] space-y-6">
-            <h2 className="font-extrabold text-3xl">Get in touch</h2>
+            <h2 className="text-3xl font-extrabold">Get in touch</h2>
             <p>We&apos;re here to help and answer any questions you might have. We look forward to hearing from you!</p>
             <div className="flex space-x-8">
               <a href="https://www.instagram.com/cublueprint/">
-                <GrInstagram className="size-10 text-white hover:text-slate-300 transition-colors ease-in-out duration-300" />
+                <GrInstagram className="size-10 text-white transition-colors duration-300 ease-in-out hover:text-slate-300" />
               </a>
               <a href="https://www.linkedin.com/company/cublueprint">
-                <FaLinkedinIn className="size-10 text-white hover:text-slate-300 transition-colors ease-in-out duration-300" />
+                <FaLinkedinIn className="size-10 text-white transition-colors duration-300 ease-in-out hover:text-slate-300" />
               </a>
             </div>
           </div>

src/app/(pages)/events/_components/EventCard.tsx

@@ -19,25 +19,25 @@ const EventCard: React.FC<EventCardProps> = ({ slug, imgURL, title, venue, time,
       href={`/events/${slug}`}
       target="_blank"
       rel="noopener noreferrer"
-      className="flex flex-col bg-white rounded-[30px] overflow-hidden shadow-md transition-transform duration-200 mt-12 max-w-md w-full relative hover:shadow-xl transform hover:-translate-y-1 cursor-pointer"
+      className="relative mt-12 flex w-full max-w-md transform cursor-pointer flex-col overflow-hidden rounded-[30px] bg-white shadow-md transition-transform duration-200 hover:-translate-y-1 hover:shadow-xl"
     >
-      <div className="relative w-full h-72">
+      <div className="relative h-72 w-full">
         <div className="max-h-full overflow-hidden">
           <CldImage src={imgURL} alt={title} width={400} height={400} className="rounded-lg" />
         </div>
       </div>
-      <div className="p-4 md:p-6 flex flex-col items-center justify-center text-center">
-        <h2 className="text-xl font-bold mb-1 md:mb-3">{title}</h2>
-        <hr className="w-full border-t-2 border-gray-300 my-1 md:my-3" />
-        <p className="text-lg text-indigo-600 font-semibold md:py-2">Location: {venue}</p>
+      <div className="flex flex-col items-center justify-center p-4 text-center md:p-6">
+        <h2 className="mb-1 text-xl font-bold md:mb-3">{title}</h2>
+        <hr className="my-1 w-full border-t-2 border-gray-300 md:my-3" />
+        <p className="text-lg font-semibold text-indigo-600 md:py-2">Location: {venue}</p>
         <p className="text-md italic text-gray-800 md:py-2">{time}</p>
-        <p className="text-gray-700 py-1 md:py-2">{description}</p>
+        <p className="py-1 text-gray-700 md:py-2">{description}</p>
         {isUpcoming ? (
-          <span className="px-3 py-1 text-white bg-green-500 rounded-full text-xs font-bold absolute top-4 right-4">
+          <span className="absolute right-4 top-4 rounded-full bg-green-500 px-3 py-1 text-xs font-bold text-white">
             Upcoming
           </span>
         ) : (
-          <span className="px-3 py-1 text-white bg-gray-400 rounded-full text-xs font-bold absolute top-4 right-4">
+          <span className="absolute right-4 top-4 rounded-full bg-gray-400 px-3 py-1 text-xs font-bold text-white">
             Passed
           </span>
         )}

src/app/(pages)/events/page.tsx

@@ -6,9 +6,9 @@ import BlockContainer from '@/components/BlockContainer';
 const EventsPage: React.FC = async () => {
   const res = await getEvents();
   return (
-    <div className="bg-blueprint-50 flex justify-center">
+    <div className="flex justify-center bg-blueprint-50">
       <BlockContainer title="Blueprint Events" roundedCorners inner centered margin>
-        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 px-4 sm:px-16 lg:px-12">
+        <div className="grid grid-cols-1 gap-4 px-4 sm:grid-cols-2 sm:px-16 lg:grid-cols-3 lg:px-12">
           {res.map(event => (
             <EventCard
               slug={event.slug}

src/app/(pages)/home/_components/AboutUsBlock.tsx

@@ -8,8 +8,8 @@ export default function AboutUsBlock() {
   return (
     <BlockContainer flip="light-blue" roundedCorners="bottom">
       <div className="flex flex-row">
-        <div className="md:w-2/3 text-2xl space-y-8">
-          <h1 className="text-blueprint font-bold text-4xl md:text-5xl">Our Mission</h1>
+        <div className="space-y-8 text-2xl md:w-2/3">
+          <h1 className="text-4xl font-bold text-blueprint md:text-5xl">Our Mission</h1>
           <p>
             Started at UC Berkeley, Blueprint strives to make technology more accessible and useful for those who create
             communities and promote public welfare. This chapter at Carleton University is no different.
@@ -18,13 +18,13 @@ export default function AboutUsBlock() {
             href="https://calblueprint.org/chapters"
             target="_blank"
             rel="noopener noreferrer"
-            className="text-blueprint group font-bold flex flex-row w-fit items-center text-sm md:text-2xl"
+            className="group flex w-fit flex-row items-center text-sm font-bold text-blueprint md:text-2xl"
           >
             <p>Check out our other Blueprint chapters</p>
-            <MdDoubleArrow className="ml-2 group-hover:ml-4 transition-spacing ease-in-out" />
+            <MdDoubleArrow className="ml-2 transition-spacing ease-in-out group-hover:ml-4" />
           </Link>
         </div>
-        <div className="hidden md:flex w-1/3 justify-end">
+        <div className="hidden w-1/3 justify-end md:flex">
           <Image src={image} alt="decorative image" className="flex w-[300px]" />
         </div>
       </div>

src/app/(pages)/home/_components/CallOut.tsx

@@ -12,11 +12,11 @@ export default function CallOut({
   toggleVisibility: () => void;
 }) {
   return (
-    <div className="bottom-10 md:top-28 md:left-4 z-50 h-16 fixed">
-      <div className="bg-white text-gray-900 rounded-md p-2 shadow-lg max-w-md hover:shadow-xl transition-shadow relative flex pr-4  border-[#0A1E3A] border-2 border-r-md">
+    <div className="fixed bottom-10 z-50 h-16 md:left-4 md:top-28">
+      <div className="border-r-md relative flex max-w-md rounded-md border-2 border-[#0A1E3A] bg-white p-2 pr-4 text-gray-900 shadow-lg transition-shadow hover:shadow-xl">
         <div className="flex items-center space-x-4">
           <Image src={callOutIcon} alt="Call Out Icon" width={50} height={50} className="absolute" />
-          <p className="pl-[50px] pr-[10px] text-md line-clamp-3">
+          <p className="text-md line-clamp-3 pl-[50px] pr-[10px]">
             <RichText className="" text={text.callout} />
           </p>
         </div>

src/app/(pages)/home/_components/EventCard.tsx

@@ -8,18 +8,18 @@ export default function EventCard({ data }: { data: EventDataType }) {
   return (
     <div className="group">
       <Link href={'/events/' + data.slug} className="relative p-1">
-        <Card className="h-[23rem] md:h-[36rem] min-w-fit relative rounded-[50px] shadow-[0px_4px_4px_0_rgba(0,0,0,0.3)] overflow-hidden">
+        <Card className="relative h-[23rem] min-w-fit overflow-hidden rounded-[50px] shadow-[0px_4px_4px_0_rgba(0,0,0,0.3)] md:h-[36rem]">
           <CldImage
             src={data.homePageURL || '/default'}
             alt="decorative image"
             width={688}
             height={600}
-            className="absolute w-full h-full object-cover"
+            className="absolute h-full w-full object-cover"
           />
-          <CardContent className="absolute bg-gradient-to-t from-blueprint/70 to-blueprint/15 from-25% to-65% w-full h-full rounded-[50px]">
-            <span className="absolute bottom-0 left-0 px-6 pb-8 text-white translate-y-14 group-hover:translate-y-0 group:transition duration-300 ease-in-out">
+          <CardContent className="absolute h-full w-full rounded-[50px] bg-gradient-to-t from-blueprint/70 from-25% to-blueprint/15 to-65%">
+            <span className="group:transition absolute bottom-0 left-0 translate-y-14 px-6 pb-8 text-white duration-300 ease-in-out group-hover:translate-y-0">
               <h2 className="text-3xl font-semibold">{data.eventName}</h2>
-              <p className="h-12 opacity-0 group-hover:opacity-100 group:transition duration-300 ease-in-out line-clamp-1">
+              <p className="group:transition line-clamp-1 h-12 opacity-0 duration-300 ease-in-out group-hover:opacity-100">
                 {data.description}
               </p>
             </span>

src/app/(pages)/home/_components/HeroBlock.tsx

@@ -10,28 +10,28 @@ export default async function HeroBlock() {
   const text = await getLatestCallout();
 
   return (
-    <div className="bg-[#0A1E3A] h-fit overflow-hidden relative">
+    <div className="relative h-fit overflow-hidden bg-[#0A1E3A]">
       {text && <CallOutWrapper text={text} />}
-      <div className="flex items-center w-full h-screen container">
-        <div className="md:w-1/2 md:m-0 flex items-center justify-center">
-          <div className="text-white items-center h-min">
+      <div className="container flex h-screen w-full items-center">
+        <div className="flex items-center justify-center md:m-0 md:w-1/2">
+          <div className="h-min items-center text-white">
             <h1 className="text-6xl font-bold">Carleton Blueprint</h1>
-            <h2 className="text-3xl mb-6">Tech for social good.</h2>
+            <h2 className="mb-6 text-3xl">Tech for social good.</h2>
             <Link
               href={'https://discord.com/invite/7gkkW5nJPW'}
               target="_blank"
               rel="noopener noreferrer"
-              className="flex w-fit mb-[-10px]"
+              className="mb-[-10px] flex w-fit"
             >
-              <button className="self-start text-white font-bold px-5 py-2 w-[150px] rounded-full bg-blueprint hover:bg-blueprint-300">
+              <button className="w-[150px] self-start rounded-full bg-blueprint px-5 py-2 font-bold text-white hover:bg-blueprint-300">
                 Join Us
               </button>
             </Link>
             <Image src={button} alt="Join Us" />
           </div>
         </div>
       </div>
-      <Image src={home} className="hidden md:block absolute top-0 right-0 md:w-1/2 2xl:w-1/3" alt="Home" />
+      <Image src={home} className="absolute right-0 top-0 hidden md:block md:w-1/2 2xl:w-1/3" alt="Home" />
     </div>
   );
 }