chore: update prettier-plugin-tailwindcss order (#88)

satnaing · web-flow · commit ddec3b23b88c · 2025-01-30T19:07:35.000+07:00
* chore: make prettier-plugin-tailwindcss works

Update the position of `prettier-plugin-tailwindcss`
in `.prettierrc` plugin array. Otherwise, the plugin
doesn't work as expected.

* refactor: update formatting for classNames
diff --git a/.prettierrc b/.prettierrc
@@ -9,8 +9,8 @@
   "bracketSpacing": true,
   "endOfLine": "lf",
   "plugins": [
-    "prettier-plugin-tailwindcss",
-    "@trivago/prettier-plugin-sort-imports"
+    "@trivago/prettier-plugin-sort-imports",
+    "prettier-plugin-tailwindcss"
   ],
   "importOrder": [
     "^path$",
diff --git a/src/components/layout/header.tsx b/src/components/layout/header.tsx
@@ -31,8 +31,8 @@ export const Header = ({
   return (
     <header
       className={cn(
-        'flex items-center gap-3 sm:gap-4 bg-background p-4 h-16',
-        fixed && 'header-fixed peer/header w-[inherit] fixed z-50 rounded-md',
+        'flex h-16 items-center gap-3 bg-background p-4 sm:gap-4',
+        fixed && 'header-fixed peer/header fixed z-50 w-[inherit] rounded-md',
         offset > 10 && fixed ? 'shadow' : 'shadow-none',
         className
       )}
diff --git a/src/components/layout/main.tsx b/src/components/layout/main.tsx
@@ -12,7 +12,7 @@ export const Main = ({ fixed, ...props }: MainProps) => {
       className={cn(
         'peer-[.header-fixed]/header:mt-16',
         'px-4 py-6',
-        fixed && 'fixed-main flex flex-col flex-grow overflow-hidden'
+        fixed && 'fixed-main flex flex-grow flex-col overflow-hidden'
       )}
       {...props}
     />
diff --git a/src/components/layout/nav-group.tsx b/src/components/layout/nav-group.tsx
@@ -54,7 +54,7 @@ export function NavGroup({ title, items }: NavGroup) {
 }
 
 const NavBadge = ({ children }: { children: ReactNode }) => (
-  <Badge className='text-xs rounded-full px-1 py-0'>{children}</Badge>
+  <Badge className='rounded-full px-1 py-0 text-xs'>{children}</Badge>
 )
 
 const SidebarMenuLink = ({ item, href }: { item: NavLink; href: string }) => {
diff --git a/src/components/search.tsx b/src/components/search.tsx
@@ -15,7 +15,7 @@ export function Search({ className = '', placeholder = 'Search' }: Props) {
     <Button
       variant='outline'
       className={cn(
-        'relative h-8 w-full flex-1 md:flex-none justify-start rounded-md bg-muted/25 hover:bg-muted/50 text-sm font-normal text-muted-foreground shadow-none sm:pr-12 md:w-40 lg:w-56 xl:w-64',
+        'relative h-8 w-full flex-1 justify-start rounded-md bg-muted/25 text-sm font-normal text-muted-foreground shadow-none hover:bg-muted/50 sm:pr-12 md:w-40 md:flex-none lg:w-56 xl:w-64',
         className
       )}
       onClick={() => setOpen(true)}
diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx
@@ -124,7 +124,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+      'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
       className
     )}
     {...props}
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
@@ -20,7 +20,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}
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
@@ -24,7 +24,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      'flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+      'flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
       inset && 'pl-8',
       className
     )}
diff --git a/src/components/ui/sheet.tsx b/src/components/ui/sheet.tsx
@@ -20,7 +20,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}
diff --git a/src/components/ui/sidebar.tsx b/src/components/ui/sidebar.tsx
@@ -224,7 +224,7 @@ const Sidebar = React.forwardRef<
     return (
       <div
         ref={ref}
-        className='group peer hidden md:block text-sidebar-foreground'
+        className='group peer hidden text-sidebar-foreground md:block'
         data-state={state}
         data-collapsible={state === 'collapsed' ? collapsible : ''}
         data-variant={variant}
@@ -233,7 +233,7 @@ const Sidebar = React.forwardRef<
         {/* This is what handles the sidebar gap on desktop */}
         <div
           className={cn(
-            'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',
+            'relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear',
             'group-data-[collapsible=offcanvas]:w-0',
             'group-data-[side=right]:rotate-180',
             variant === 'floating' || variant === 'inset'
@@ -243,7 +243,7 @@ const Sidebar = React.forwardRef<
         />
         <div
           className={cn(
-            'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',
+            'fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex',
             side === 'left'
               ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
               : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
@@ -448,7 +448,7 @@ const SidebarGroupLabel = React.forwardRef<
       ref={ref}
       data-sidebar='group-label'
       className={cn(
-        'duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        'flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
         'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
         className
       )}
@@ -640,7 +640,7 @@ const SidebarMenuBadge = React.forwardRef<
     ref={ref}
     data-sidebar='menu-badge'
     className={cn(
-      'absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none',
+      'pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground',
       'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
       'peer-data-[size=sm]/menu-button:top-1',
       'peer-data-[size=default]/menu-button:top-1.5',
@@ -668,7 +668,7 @@ const SidebarMenuSkeleton = React.forwardRef<
     <div
       ref={ref}
       data-sidebar='menu-skeleton'
-      className={cn('rounded-md h-8 flex gap-2 px-2 items-center', className)}
+      className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}
       {...props}
     >
       {showIcon && (
@@ -678,7 +678,7 @@ const SidebarMenuSkeleton = React.forwardRef<
         />
       )}
       <Skeleton
-        className='h-4 flex-1 max-w-[--skeleton-width]'
+        className='h-4 max-w-[--skeleton-width] flex-1'
         data-sidebar='menu-skeleton-text'
         style={
           {
diff --git a/src/features/chats/index.tsx b/src/features/chats/index.tsx
@@ -145,7 +145,7 @@ export default function Chats() {
           {/* Right Side */}
           <div
             className={cn(
-              'absolute inset-0 hidden left-full z-50 w-full flex-1 flex-col rounded-md border bg-primary-foreground shadow-sm transition-all duration-200 sm:static sm:z-auto sm:flex',
+              'absolute inset-0 left-full z-50 hidden w-full flex-1 flex-col rounded-md border bg-primary-foreground shadow-sm transition-all duration-200 sm:static sm:z-auto sm:flex',
               mobileSelectedUser && 'left-0 flex'
             )}
           >
diff --git a/src/features/settings/components/content-section.tsx b/src/features/settings/components/content-section.tsx
@@ -20,7 +20,7 @@ export default function ContentSection({
       </div>
       <Separator className='my-4 flex-none' />
       <ScrollArea className='faded-bottom -mx-4 flex-1 scroll-smooth px-4 md:pb-16'>
-        <div className='lg:max-w-xl -mx-1 px-1.5'>{children}</div>
+        <div className='-mx-1 px-1.5 lg:max-w-xl'>{children}</div>
       </ScrollArea>
     </div>
   )
diff --git a/src/features/settings/components/sidebar-nav.tsx b/src/features/settings/components/sidebar-nav.tsx
@@ -57,11 +57,11 @@ export default function SidebarNav({
       <ScrollArea
         orientation='horizontal'
         type='always'
-        className='hidden w-full bg-background px-1 py-2 md:block min-w-40'
+        className='hidden w-full min-w-40 bg-background px-1 py-2 md:block'
       >
         <nav
           className={cn(
-            'flex py-1 space-x-2 lg:flex-col lg:space-x-0 lg:space-y-1',
+            'flex space-x-2 py-1 lg:flex-col lg:space-x-0 lg:space-y-1',
             className
           )}
           {...props}
diff --git a/src/features/settings/index.tsx b/src/features/settings/index.tsx
@@ -36,11 +36,11 @@ export default function Settings() {
           </p>
         </div>
         <Separator className='my-4 lg:my-6' />
-        <div className='flex flex-1 flex-col space-y-2 md:space-y-2 overflow-hidden lg:flex-row lg:space-x-12 lg:space-y-0'>
+        <div className='flex flex-1 flex-col space-y-2 overflow-hidden md:space-y-2 lg:flex-row lg:space-x-12 lg:space-y-0'>
           <aside className='top-0 lg:sticky lg:w-1/5'>
             <SidebarNav items={sidebarNavItems} />
           </aside>
-          <div className='flex w-full p-1 pr-4 overflow-y-hidden'>
+          <div className='flex w-full overflow-y-hidden p-1 pr-4'>
             <Outlet />
           </div>
         </div>
diff --git a/src/features/settings/notifications/notifications-form.tsx b/src/features/settings/notifications/notifications-form.tsx
@@ -62,7 +62,7 @@ export function NotificationsForm() {
           control={form.control}
           name='type'
           render={({ field }) => (
-            <FormItem className='space-y-3 relative'>
+            <FormItem className='relative space-y-3'>
               <FormLabel>Notify me about...</FormLabel>
               <FormControl>
                 <RadioGroup
@@ -193,7 +193,7 @@ export function NotificationsForm() {
           control={form.control}
           name='mobile'
           render={({ field }) => (
-            <FormItem className='flex flex-row items-start space-x-3 space-y-0 relative'>
+            <FormItem className='relative flex flex-row items-start space-x-3 space-y-0'>
               <FormControl>
                 <Checkbox
                   checked={field.value}
diff --git a/src/features/tasks/components/tasks-import-dialog.tsx b/src/features/tasks/components/tasks-import-dialog.tsx
@@ -78,7 +78,7 @@ export function TasksImportDialog({ open, onOpenChange }: Props) {
         form.reset()
       }}
     >
-      <DialogContent className='sm:max-w-sm gap-2'>
+      <DialogContent className='gap-2 sm:max-w-sm'>
         <DialogHeader className='text-left'>
           <DialogTitle>Import Tasks</DialogTitle>
           <DialogDescription>
@@ -91,7 +91,7 @@ export function TasksImportDialog({ open, onOpenChange }: Props) {
               control={form.control}
               name='file'
               render={() => (
-                <FormItem className='space-y-1 mb-2'>
+                <FormItem className='mb-2 space-y-1'>
                   <FormLabel>File</FormLabel>
                   <FormControl>
                     <Input type='file' {...fileRef} className='h-8' />
diff --git a/src/features/tasks/components/tasks-mutate-drawer.tsx b/src/features/tasks/components/tasks-mutate-drawer.tsx
@@ -88,7 +88,7 @@ export function TasksMutateDrawer({ open, onOpenChange, currentRow }: Props) {
           <form
             id='tasks-form'
             onSubmit={form.handleSubmit(onSubmit)}
-            className='space-y-5 flex-1'
+            className='flex-1 space-y-5'
           >
             <FormField
               control={form.control}
@@ -129,7 +129,7 @@ export function TasksMutateDrawer({ open, onOpenChange, currentRow }: Props) {
               control={form.control}
               name='label'
               render={({ field }) => (
-                <FormItem className='space-y-3 relative'>
+                <FormItem className='relative space-y-3'>
                   <FormLabel>Label</FormLabel>
                   <FormControl>
                     <RadioGroup
@@ -167,7 +167,7 @@ export function TasksMutateDrawer({ open, onOpenChange, currentRow }: Props) {
               control={form.control}
               name='priority'
               render={({ field }) => (
-                <FormItem className='space-y-3 relative'>
+                <FormItem className='relative space-y-3'>
                   <FormLabel>Priority</FormLabel>
                   <FormControl>
                     <RadioGroup
diff --git a/src/features/tasks/index.tsx b/src/features/tasks/index.tsx
@@ -22,7 +22,7 @@ export default function Tasks() {
       </Header>
 
       <Main>
-        <div className='mb-2 flex items-center justify-between space-y-2 flex-wrap gap-x-4'>
+        <div className='mb-2 flex flex-wrap items-center justify-between gap-x-4 space-y-2'>
           <div>
             <h2 className='text-2xl font-bold tracking-tight'>Tasks</h2>
             <p className='text-muted-foreground'>
diff --git a/src/features/users/components/users-action-dialog.tsx b/src/features/users/components/users-action-dialog.tsx
@@ -149,7 +149,7 @@ export function UsersActionDialog({ currentRow, open, onOpenChange }: Props) {
             Click save when you&apos;re done.
           </DialogDescription>
         </DialogHeader>
-        <ScrollArea className='h-[26.25rem] w-full pr-4 -mr-4 py-1'>
+        <ScrollArea className='-mr-4 h-[26.25rem] w-full py-1 pr-4'>
           <Form {...form}>
             <form
               id='user-form'
diff --git a/src/features/users/components/users-columns.tsx b/src/features/users/components/users-columns.tsx
@@ -121,11 +121,11 @@ export const columns: ColumnDef<User>[] = [
       }
 
       return (
-        <div className='flex gap-x-2 items-center'>
+        <div className='flex items-center gap-x-2'>
           {userType.icon && (
             <userType.icon size={16} className='text-muted-foreground' />
           )}
-          <span className='capitalize text-sm'>{row.getValue('role')}</span>
+          <span className='text-sm capitalize'>{row.getValue('role')}</span>
         </div>
       )
     },
diff --git a/src/features/users/index.tsx b/src/features/users/index.tsx
@@ -26,7 +26,7 @@ export default function Users() {
       </Header>
 
       <Main>
-        <div className='mb-2 flex items-center justify-between space-y-2 flex-wrap'>
+        <div className='mb-2 flex flex-wrap items-center justify-between space-y-2'>
           <div>
             <h2 className='text-2xl font-bold tracking-tight'>User List</h2>
             <p className='text-muted-foreground'>
diff --git a/src/routes/_authenticated/route.tsx b/src/routes/_authenticated/route.tsx
@@ -20,11 +20,11 @@ function RouteComponent() {
         <div
           id='content'
           className={cn(
-            'max-w-full w-full ml-auto',
+            'ml-auto w-full max-w-full',
             'peer-data-[state=collapsed]:w-[calc(100%-var(--sidebar-width-icon)-1rem)]',
             'peer-data-[state=expanded]:w-[calc(100%-var(--sidebar-width))]',
-            'transition-[width] ease-linear duration-200',
-            'h-svh flex flex-col',
+            'transition-[width] duration-200 ease-linear',
+            'flex h-svh flex-col',
             'group-data-[scroll-locked=1]/body:h-full',
             'group-data-[scroll-locked=1]/body:has-[main.fixed-main]:h-svh'
           )}

Original file line number	Diff line number	Diff line change
`@@ -54,7 +54,7 @@ export function NavGroup({ title, items }: NavGroup) {`
`54`	`54`	`}`
`55`	`55`
`56`	`56`	`const NavBadge = ({ children }: { children: ReactNode }) => (`
`57`		`- <Badge className='text-xs rounded-full px-1 py-0'>{children}</Badge>`
	`57`	`+ <Badge className='rounded-full px-1 py-0 text-xs'>{children}</Badge>`
`58`	`58`	`)`
`59`	`59`
`60`	`60`	`const SidebarMenuLink = ({ item, href }: { item: NavLink; href: string }) => {`