chore: use prettier-plugin-tailwindcss to order tailwind classes

.prettierrc.json

@@ -1,6 +1,8 @@
 {
-    "tabWidth": 2,
-    "semi": false,
-    "singleQuote": true,
-    "trailingComma": "all"
-}
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

package.json

@@ -67,6 +67,7 @@
     "install": "0.13.0",
     "postcss": "^8.4.41",
     "prettier": "3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.6",
     "tailwindcss": "^3.4.10",
     "typescript": "^5.2.2",
     "vite": "^5.4.2",

src/Resources.tsx

@@ -26,30 +26,30 @@ export const getLink = ({
 export const getLinks = (title: string, arrays: GetLinksType[]) => (
   <div className="divide-y divide-dashed">
     <div>
-      <h4 className="text-primary font-extrabold my-4">{title}</h4>
+      <h4 className="my-4 font-extrabold text-primary">{title}</h4>
       {arrays.map((arr) => (
-        <p className="underline text-[#999]">{getLink(arr)}</p>
+        <p className="text-[#999] underline">{getLink(arr)}</p>
       ))}
     </div>
   </div>
 )
 
 export const Resources = () => {
   return (
-    <div className="pt-8 flex">
+    <div className="flex pt-8">
       <Dialog>
         <DialogTrigger asChild>
           <a
             href="#"
-            className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground transition-colors py-2"
+            className="flex items-center gap-4 px-2.5 py-2 text-muted-foreground transition-colors hover:text-foreground"
           >
             <NotebookText className="h-5 w-5" />
             <span className="left">Resources</span>
           </a>
         </DialogTrigger>
         <DialogContent className="sm:max-w-[425px]">
           <DialogHeader>
-            <DialogTitle className="text-primary font-bold">
+            <DialogTitle className="font-bold text-primary">
               Resources
             </DialogTitle>
             <DialogDescription>

src/components/ThemedComponents.tsx

@@ -8,7 +8,7 @@ export const ThemedLink: React.FC<{
   className?: string
 }> = ({ children, to, target = '_parent', className }) => (
   <Link
-    className={`text-primary font-bold ${className}`}
+    className={`font-bold text-primary ${className}`}
     to={to}
     target={target}
   >

src/components/ui/dialog.tsx

@@ -19,7 +19,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
       className,
     )}
     {...props}

src/components/ui/sheet.tsx

@@ -19,7 +19,7 @@ const SheetOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Overlay
     className={cn(
-      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
       className,
     )}
     {...props}

src/components/ui/tabs.tsx

@@ -1,7 +1,7 @@
-import * as React from "react"
-import * as TabsPrimitive from "@radix-ui/react-tabs"
+import * as React from 'react'
+import * as TabsPrimitive from '@radix-ui/react-tabs'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
 const Tabs = TabsPrimitive.Root
 
@@ -12,8 +12,8 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
-      className
+      'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
+      className,
     )}
     {...props}
   />
@@ -27,8 +27,8 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
-      className
+      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
+      className,
     )}
     {...props}
   />
@@ -42,8 +42,8 @@ const TabsContent = React.forwardRef<
   <TabsPrimitive.Content
     ref={ref}
     className={cn(
-      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      className
+      'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      className,
     )}
     {...props}
   />

src/header.tsx

@@ -81,9 +81,9 @@ export const Header = ({ lightClientLoaded, setLightClientLoaded }: Props) => {
           </Button>
         </SheetTrigger>
         <SheetContent side="left" className="sm:max-w-xs">
-          <div className="flex text-primary font-extrabold text-2xl">
+          <div className="flex text-2xl font-extrabold text-primary">
             <PolkadotIcon
-              className="max-h-[100%] w-[3.2rem] pr-3 pl-2.4"
+              className="pl-2.4 max-h-[100%] w-[3.2rem] pr-3"
               width={'2rem'}
               height={'2rem'}
             />
@@ -95,7 +95,7 @@ export const Header = ({ lightClientLoaded, setLightClientLoaded }: Props) => {
                 return (
                   <Accordion type="single" collapsible>
                     <AccordionItem value="item-1">
-                      <AccordionTrigger className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground transition-colors py-2 justify-start">
+                      <AccordionTrigger className="flex items-center justify-start gap-4 px-2.5 py-2 text-muted-foreground transition-colors hover:text-foreground">
                         <r.icon className="h-5 w-5" />
                         <span>{r.name}</span>
                       </AccordionTrigger>
@@ -145,7 +145,7 @@ export const Header = ({ lightClientLoaded, setLightClientLoaded }: Props) => {
               </DialogTrigger>
               <DialogContent className="sm:max-w-[425px]">
                 <DialogHeader>
-                  <DialogTitle className="text-primary font-bold">
+                  <DialogTitle className="font-bold text-primary">
                     Resources
                   </DialogTitle>
                   <DialogDescription>
@@ -159,13 +159,13 @@ export const Header = ({ lightClientLoaded, setLightClientLoaded }: Props) => {
             </Dialog>
             <Accordion type="single" collapsible>
               <AccordionItem value="item-1">
-                <AccordionTrigger className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground transition-colors py-2 justify-start">
+                <AccordionTrigger className="flex items-center justify-start gap-4 px-2.5 py-2 text-muted-foreground transition-colors hover:text-foreground">
                   <SiElement className="h-5 w-5" />
                   <span>Element</span>
                 </AccordionTrigger>
                 <AccordionContent className="p-0">
                   <a
-                    className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground transition-colors py-2 justify-start"
+                    className="flex items-center justify-start gap-4 px-2.5 py-2 text-muted-foreground transition-colors hover:text-foreground"
                     href="https://matrix.to/#/#fellowship-members:parity.io"
                     target="_blank"
                   >
@@ -174,7 +174,7 @@ export const Header = ({ lightClientLoaded, setLightClientLoaded }: Props) => {
                 </AccordionContent>
                 <AccordionContent className="p-0">
                   <a
-                    className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground transition-colors py-2 justify-start"
+                    className="flex items-center justify-start gap-4 px-2.5 py-2 text-muted-foreground transition-colors hover:text-foreground"
                     href="https://matrix.to/#/#fellowship-open-channel:parity.io"
                     target="_blank"
                   >
@@ -219,13 +219,13 @@ export const Header = ({ lightClientLoaded, setLightClientLoaded }: Props) => {
             </a>
           </nav>
 
-          <div className="fixed flex bottom-2 align-middle text-center text-sm text-primary font-bold flex-col">
+          <div className="fixed bottom-2 flex flex-col text-center align-middle text-sm font-bold text-primary">
             <span>©2024</span>
             <span>Polkadot Technical Fellowship</span>
           </div>
         </SheetContent>
       </Sheet>
-      <div className="flex justify-between w-full">
+      <div className="flex w-full justify-between">
         <div>
           {/* <Menubar>
             <MenubarMenu>

src/index.css

@@ -80,6 +80,6 @@
   }
 
   main {
-    @apply grid flex-1 items-start gap-4 p-4 sm:mx-[5%] xl:mx-[15%] mx-0 sm:px-6 sm:py-0 md:gap-8;
+    @apply mx-0 grid flex-1 items-start gap-4 p-4 sm:mx-[5%] sm:px-6 sm:py-0 md:gap-8 xl:mx-[15%];
   }
 }

src/navigation.tsx

@@ -55,8 +55,8 @@ export const Navigation = ({
 
   return (
     <aside className="fixed inset-y-0 left-0 z-10 hidden w-[14rem] flex-col border-r bg-background sm:flex">
-      <nav className="flex flex-col items-left gap-4 px-4 sm:py-5">
-        <div className="flex text-primary font-extrabold text-2xl">
+      <nav className="items-left flex flex-col gap-4 px-4 sm:py-5">
+        <div className="flex text-2xl font-extrabold text-primary">
           <PolkadotIcon
             className="max-h-[100%] w-12"
             width={'2.2rem'}
@@ -69,7 +69,7 @@ export const Navigation = ({
             return (
               <Accordion type="single" collapsible>
                 <AccordionItem value="item-1">
-                  <AccordionTrigger className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground transition-colors py-2 justify-start">
+                  <AccordionTrigger className="flex items-center justify-start gap-4 px-2.5 py-2 text-muted-foreground transition-colors hover:text-foreground">
                     <r.icon className="h-5 w-5" />
                     <span>{r.name}</span>
                   </AccordionTrigger>
@@ -78,7 +78,7 @@ export const Navigation = ({
                       <Link
                         className={
                           linkStyle(pathname, '/' + (c.link || '')) +
-                          ' flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground transition-colors py-2 '
+                          ' flex items-center gap-4 px-2.5 py-2 text-muted-foreground transition-colors hover:text-foreground'
                         }
                         to={c.link}
                       >
@@ -95,7 +95,7 @@ export const Navigation = ({
               <Link
                 className={
                   linkStyle(pathname, '/' + (r.link || '')) +
-                  ' flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground transition-colors py-2 '
+                  ' flex items-center gap-4 px-2.5 py-2 text-muted-foreground transition-colors hover:text-foreground'
                 }
                 to={r.link}
               >
@@ -117,20 +117,20 @@ export const Navigation = ({
         <Resources />
         <Accordion type="single" collapsible>
           <AccordionItem value="item-1">
-            <AccordionTrigger className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground transition-colors py-2 justify-start">
+            <AccordionTrigger className="flex items-center justify-start gap-4 px-2.5 py-2 text-muted-foreground transition-colors hover:text-foreground">
               <SiElement className="h-5 w-5" />
               <span>Element</span>
             </AccordionTrigger>
             <AccordionContent className="pl-4">
               <Link
-                className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground transition-colors py-2 justify-start"
+                className="flex items-center justify-start gap-4 px-2.5 py-2 text-muted-foreground transition-colors hover:text-foreground"
                 to="https://matrix.to/#/#fellowship-members:parity.io"
                 target="_blank"
               >
                 Fellowship Members
               </Link>
               <Link
-                className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground transition-colors py-2 justify-start"
+                className="flex items-center justify-start gap-4 px-2.5 py-2 text-muted-foreground transition-colors hover:text-foreground"
                 to="https://matrix.to/#/#fellowship-open-channel:parity.io"
                 target="_blank"
               >
@@ -140,7 +140,7 @@ export const Navigation = ({
           </AccordionItem>
         </Accordion>
       </nav>
-      <nav className="mt-auto flex flex-row justify-center items-center gap-8 px-2 sm:py-5">
+      <nav className="mt-auto flex flex-row items-center justify-center gap-8 px-2 sm:py-5">
         <Tooltip>
           <TooltipTrigger asChild>
             <a
@@ -193,7 +193,7 @@ export const Navigation = ({
           </TooltipContent>
         </Tooltip>
       </nav>
-      <div className="text-primary flex flex-col text-sm font-bold items-center px-2 pb-5">
+      <div className="flex flex-col items-center px-2 pb-5 text-sm font-bold text-primary">
         <span>Polkadot Technical Fellowship</span>
         <span>©2024</span>
       </div>

src/pages/About/MemberInfo.tsx

@@ -135,7 +135,7 @@ export const MemberInfo = ({
               <Polkicon copy size={72} address={address} />
             </DialogTitle>
             <DialogDescription>
-              <div className="flex, justify-center items-center">
+              <div className="flex, items-center justify-center">
                 <div className="my-4 flex flex-col items-center">
                   {display && (
                     <AccountName display={display} address={address} />
@@ -191,7 +191,7 @@ export const MemberInfo = ({
                         </CardTitle>
                       </div>
                     </CardHeader>
-                    <CardContent className="flex flex-row items-center gap-4 space-y-0 pb-2 [&>div]:flex-1 my-4">
+                    <CardContent className="my-4 flex flex-row items-center gap-4 space-y-0 pb-2 [&>div]:flex-1">
                       <div>
                         <CardDescription className="text-left">
                           Transferrable