add prettier-plugin-tailwindcss, class reordering (ocodista#107)

apps/web/app/components/AutoComplete.tsx

@@ -54,12 +54,12 @@ export function AutoComplete({
             </Combobox.Button>
           </div>
           {selectedOptions.length > 0 && (
-            <ul className="flex flex-wrap gap-2 mt-2">
+            <ul className="mt-2 flex flex-wrap gap-2">
               {selectedOptions.map((option) => (
                 <li key={option.value}>
                   <button
                     disabled={disabled}
-                    className="cursor-pointer rounded-2xl border text-sm font-semibold px-2 py-1 border-s-gray-300"
+                    className="cursor-pointer rounded-2xl border border-s-gray-300 px-2 py-1 text-sm font-semibold"
                     onClick={() =>
                       onSelectChange(
                         selectedOptions.filter(
@@ -84,7 +84,7 @@ export function AutoComplete({
           >
             <Combobox.Options className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
               {filteredOptions.length === 0 && query !== '' ? (
-                <div className="relative cursor-default select-none py-2 px-4 text-gray-700">
+                <div className="relative cursor-default select-none px-4 py-2 text-gray-700">
                   Nenhum resultado encontrado.
                 </div>
               ) : (

apps/web/app/components/EmailForm.tsx

@@ -81,7 +81,7 @@ export const EmailForm = () => {
   return (
     <>
       {isConfettiVisible && (
-        <div className="absolute top-0 left-0">
+        <div className="absolute left-0 top-0">
           <Confetti width={window.innerWidth - PADDING_X} />
         </div>
       )}
@@ -95,7 +95,7 @@ export const EmailForm = () => {
         <div className="flex flex-wrap items-center">
           <div className="w-full xl:flex-1">
             <input
-              className="p-3 xl:p-0 xl:pr-7 w-full text-gray-600 placeholder-gray-600 outline-none"
+              className="w-full p-3 text-gray-600 placeholder-gray-600 outline-none xl:p-0 xl:pr-7"
               id="email"
               type="email"
               placeholder="Digite seu melhor e-mail"
@@ -107,7 +107,7 @@ export const EmailForm = () => {
               <button
                 type="submit"
                 disabled={!isValid || isLoading}
-                className="py-4 px-7 w-full text-white font-semibold rounded-xl focus:ring focus:ring-indigo-300 bg-indigo-600 hover:bg-indigo-700 transition ease-in-out duration-200 pointer disabled:opacity-50 cursor-pointer disabled:cursor-default"
+                className="pointer w-full cursor-pointer rounded-xl bg-indigo-600 px-7 py-4 font-semibold text-white transition duration-200 ease-in-out hover:bg-indigo-700 focus:ring focus:ring-indigo-300 disabled:cursor-default disabled:opacity-50"
               >
                 Quero participar
               </button>

apps/web/app/components/FirstJobPicker.tsx

@@ -16,17 +16,17 @@ export function DOBPicker({
   const maxDate = new Date()
 
   return (
-    <div className="w-full border border-gray-200 bg-white border-solid rounded-sm">
+    <div className="w-full rounded-sm border border-solid border-gray-200 bg-white">
       <Popover>
         <PopoverTrigger asChild>
           <Button
             variant={'default'}
             className={cn(
-              'w-full justify-start font-mono text-left font-normal',
+              'w-full justify-start text-left font-mono font-normal',
               !dob && 'text-muted-foreground'
             )}
           >
-            <svg className="w-4 h-4 mr-2" fill="none" viewBox="0 0 24 24">
+            <svg className="mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24">
               <path
                 stroke="currentColor"
                 strokeLinecap="round"
@@ -64,7 +64,7 @@ export function DOBPicker({
             )}
           </Button>
         </PopoverTrigger>
-        <PopoverContent className="w-full p-0 font-mono text-black border">
+        <PopoverContent className="w-full border p-0 font-mono text-black">
           <Calendar
             classNames={{
               cell: 'text-center text-sm p-0 relative first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20',
@@ -93,7 +93,7 @@ export function DOBPicker({
             }
             required
             initialFocus
-            className="border rounded-md border-white/10"
+            className="rounded-md border border-white/10"
           />
         </PopoverContent>
       </Popover>

apps/web/app/components/Header.tsx

@@ -8,10 +8,10 @@ export const Header = () => {
 
   return (
     <div className="container mx-auto overflow-hidden">
-      <div className="relative flex items-center justify-between px-4 py-5 bg-transparent">
+      <div className="relative flex items-center justify-between bg-transparent px-4 py-5">
         <div className="w-auto">
           <div className="flex flex-wrap items-center">
-            <div className="w-auto mr-14">
+            <div className="mr-14 w-auto">
               <a href="/">
                 <Image
                   src="/images/logo.svg"
@@ -21,8 +21,8 @@ export const Header = () => {
                 />
               </a>
             </div>
-            <div className="w-auto hidden lg:block">
-              <ul className="flex items-center mr-16">
+            <div className="hidden w-auto lg:block">
+              <ul className="mr-16 flex items-center">
                 <li className="mr-9 font-medium hover:text-gray-700">
                   <a href={LandingPageRoutes.Values}>Nossos Valores</a>
                 </li>
@@ -66,15 +66,15 @@ export const Header = () => {
         </div>
       </div>
       {isMobileMenuOpen && (
-        <div className="navbar-menu fixed top-0 left-0 bottom-0 w-4/6 sm:max-w-xs z-50">
+        <div className="navbar-menu fixed bottom-0 left-0 top-0 z-50 w-4/6 sm:max-w-xs">
           <div
             className="navbar-backdrop fixed inset-0 bg-gray-800 opacity-80"
             onClick={() => setMobileMenuVisibility(false)}
           />
-          <nav className="relative px-9 pt-8 bg-white h-full overflow-y-auto">
-            <div className="flex flex-wrap justify-between h-full">
+          <nav className="relative h-full overflow-y-auto bg-white px-9 pt-8">
+            <div className="flex h-full flex-wrap justify-between">
               <div className="w-full">
-                <div className="flex items-center justify-between -m-2">
+                <div className="-m-2 flex items-center justify-between">
                   <div className="w-auto p-2">
                     <a className="inline-block" href="/">
                       <Image
@@ -110,7 +110,7 @@ export const Header = () => {
                   </div>
                 </div>
               </div>
-              <div className="flex flex-col justify-center py-16 w-full">
+              <div className="flex w-full flex-col justify-center py-16">
                 <ul>
                   <li className="mb-12">
                     <a

apps/web/app/components/PartnerCompanies.tsx

@@ -35,7 +35,7 @@ const CompanySection = ({ name, imagePath, url, description }: Company) => (
     <Image
       src={imagePath}
       alt={`Logo da empresa ${name}`}
-      className="cursor-pointer aspect-video object-contain min-w-[128px] mx-10"
+      className="mx-10 aspect-video min-w-[128px] cursor-pointer object-contain"
       title={description}
       width={128}
       height={28}
@@ -46,20 +46,20 @@ const CompanySection = ({ name, imagePath, url, description }: Company) => (
 export const PartnerCompanies = () => {
   return (
     <section>
-      <p className="text-sm text-gray-500 font-semibold">
+      <p className="text-sm font-semibold text-gray-500">
         EMPRESAS QUE APOIAM O TRABALHO REMOTO
       </p>
-      <div className="overflow-hidden w-full">
+      <div className="w-full overflow-hidden">
         <span
-          className={`flex justify-start items-center w-full group max-lg:w-1/4`}
+          className={`group flex w-full items-center justify-start max-lg:w-1/4`}
         >
-          <span className="flex gap-10 animate-scroll-left group-hover:paused">
+          <span className="animate-scroll-left group-hover:paused flex gap-10">
             {companies.map((company) => (
               <CompanySection key={company.name} {...company} />
             ))}
           </span>
           <span
-            className="flex gap-10 animate-scroll-left group-hover:paused"
+            className="animate-scroll-left group-hover:paused flex gap-10"
             style={{ transform: 'translateX(100%)' }}
           >
             {companies.map((company) => (

apps/web/app/components/ui/ButtonAnchor.tsx

@@ -2,7 +2,7 @@ const ButtonAnchor = ({ children, href }) => {
   return (
     <a
       href={href}
-      className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-black hover:bg-white hover:boder hover:border-black hover:text-black focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+      className="hover:boder group relative flex w-full justify-center rounded-md border border-transparent bg-black px-4 py-2 text-sm font-medium text-white hover:border-black hover:bg-white hover:text-black focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
     >
       {children}
     </a>

apps/web/app/components/ui/ScrollToTopButton.tsx

@@ -32,7 +32,7 @@ export default function ScrollToTopButton() {
       aria-label="Go to Top"
       role="button"
       className={clsx(
-        'fixed right-6 p-2 text-5xl focus:ring focus:ring-indigo-300 bg-indigo-600 hover:bg-indigo-700 transition-all duration-300 rounded-lg shadow text-slate-100 border-slate-100 border',
+        'fixed right-6 rounded-lg border border-slate-100 bg-indigo-600 p-2 text-5xl text-slate-100 shadow transition-all duration-300 hover:bg-indigo-700 focus:ring focus:ring-indigo-300',
         [
           { 'bottom-6 opacity-80': backToTop },
           { '-bottom-20 opacity-0': !backToTop },

apps/web/app/components/ui/avatar.tsx

@@ -39,7 +39,7 @@ const AvatarFallback = React.forwardRef<
   <AvatarPrimitive.Fallback
     ref={ref}
     className={cn(
-      'flex h-full w-full items-center justify-center rounded-full bg-muted',
+      'bg-muted flex h-full w-full items-center justify-center rounded-full',
       className
     )}
     {...props}

apps/web/app/components/ui/calendar.tsx

@@ -56,12 +56,12 @@ function Calendar({
             <select
               autoFocus
               {...props}
-              className="w-full px-1 py-2 space-x-4 text-sm text-black transition-all duration-300 rounded-md outline-none focus-outline:none"
+              className="focus-outline:none w-full space-x-4 rounded-md px-1 py-2 text-sm text-black outline-none transition-all duration-300"
             />
           </div>
         ),
-        IconLeft: ({ ...props }) => <ChevronLeft className="w-4 h-4" />,
-        IconRight: ({ ...props }) => <ChevronRight className="w-4 h-4" />,
+        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
+        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
       }}
       {...props}
     />

apps/web/app/components/ui/checkbox.tsx

@@ -12,7 +12,7 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+      'border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer h-4 w-4 shrink-0 rounded-sm border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
       className
     )}
     {...props}

apps/web/app/components/ui/command.tsx

@@ -15,7 +15,7 @@ const Command = React.forwardRef<
   <CommandPrimitive
     ref={ref}
     className={cn(
-      'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
+      'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
       className
     )}
     {...props}
@@ -30,7 +30,7 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
   return (
     <Dialog {...props}>
       <DialogContent className="overflow-hidden p-0 shadow-lg">
-        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
           {children}
         </Command>
       </DialogContent>
@@ -47,7 +47,7 @@ const CommandInput = React.forwardRef<
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
-        'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+        'placeholder:text-muted-foreground flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',
         className
       )}
       {...props}
@@ -90,7 +90,7 @@ const CommandGroup = React.forwardRef<
   <CommandPrimitive.Group
     ref={ref}
     className={cn(
-      'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
+      'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
       className
     )}
     {...props}
@@ -105,7 +105,7 @@ const CommandSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.Separator
     ref={ref}
-    className={cn('-mx-1 h-px bg-border', className)}
+    className={cn('bg-border -mx-1 h-px', className)}
     {...props}
   />
 ))
@@ -118,7 +118,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className
     )}
     {...props}
@@ -134,7 +134,7 @@ const CommandShortcut = ({
   return (
     <span
       className={cn(
-        'ml-auto text-xs tracking-widest text-muted-foreground',
+        'text-muted-foreground ml-auto text-xs tracking-widest',
         className
       )}
       {...props}

apps/web/app/components/ui/dialog.tsx

@@ -25,7 +25,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      'fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      'bg-background/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 backdrop-blur-sm',
       className
     )}
     {...props}
@@ -42,13 +42,13 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',
+        'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
         className
       )}
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+      <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
@@ -106,7 +106,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn('text-sm text-muted-foreground', className)}
+    className={cn('text-muted-foreground text-sm', className)}
     {...props}
   />
 ))

apps/web/app/components/ui/form.tsx

@@ -133,7 +133,7 @@ const FormDescription = React.forwardRef<
     <p
       ref={ref}
       id={formDescriptionId}
-      className={cn('text-sm text-muted-foreground', className)}
+      className={cn('text-muted-foreground text-sm', className)}
       {...props}
     />
   )
@@ -155,7 +155,7 @@ const FormMessage = React.forwardRef<
     <p
       ref={ref}
       id={formMessageId}
-      className={cn('text-sm font-medium text-destructive', className)}
+      className={cn('text-destructive text-sm font-medium', className)}
       {...props}
     >
       {body}

apps/web/app/components/ui/loadingOverlay.tsx

@@ -5,7 +5,7 @@ const Spinner = () => {
     <div role={'status w-fit'}>
       <svg
         aria-hidden="true"
-        className="w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-indigo-600"
+        className="h-12 w-12 animate-spin fill-indigo-600 text-gray-200 dark:text-gray-600"
         viewBox="0 0 100 101"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
@@ -28,7 +28,7 @@ export const LoadingOverlay = ({ className }) => {
   return (
     <div
       className={cn(
-        'h-screen w-screen bg-opacity-70 fixed top-0 z-50 bg-black  items-center justify-center',
+        'fixed top-0 z-50 h-screen w-screen items-center justify-center  bg-black bg-opacity-70',
         className
       )}
     >