chore: fix tailwind suggestCanonicalClasses warnings (#266)

src/components/data-table/bulk-actions.tsx

@@ -152,7 +152,7 @@ export function DataTableBulkActions<TData>({
           className={cn(
             'p-2 shadow-xl',
             'rounded-xl border',
-            'bg-background/95 backdrop-blur-lg supports-[backdrop-filter]:bg-background/60',
+            'bg-background/95 backdrop-blur-lg supports-backdrop-filter:bg-background/60',
             'flex items-center gap-x-2'
           )}
         >

src/features/chats/index.tsx

@@ -235,7 +235,7 @@ export function Chats() {
                               <div
                                 key={`${msg.sender}-${msg.timestamp}-${index}`}
                                 className={cn(
-                                  'chat-box max-w-72 px-3 py-2 break-words shadow-lg',
+                                  'chat-box max-w-72 px-3 py-2 wrap-break-word shadow-lg',
                                   msg.sender === 'You'
                                     ? 'self-end rounded-[16px_16px_0_16px] bg-primary/90 text-primary-foreground/75'
                                     : 'self-start rounded-[16px_16px_16px_0] bg-muted'

src/features/tasks/components/tasks-columns.tsx

@@ -52,7 +52,7 @@ export const tasksColumns: ColumnDef<Task>[] = [
       return (
         <div className='flex space-x-2'>
           {label && <Badge variant='outline'>{label.label}</Badge>}
-          <span className='max-w-32 truncate font-medium sm:max-w-72 md:max-w-[31rem]'>
+          <span className='max-w-32 truncate font-medium sm:max-w-72 md:max-w-124'>
             {row.getValue('title')}
           </span>
         </div>

src/features/users/components/users-action-dialog.tsx

@@ -151,7 +151,7 @@ export function UsersActionDialog({
             Click save when you're done.
           </DialogDescription>
         </DialogHeader>
-        <div className='h-[26.25rem] w-[calc(100%+0.75rem)] overflow-y-auto py-1 pe-3'>
+        <div className='h-105 w-[calc(100%+0.75rem)] overflow-y-auto py-1 pe-3'>
           <Form {...form}>
             <form
               id='user-form'

src/styles/index.css

@@ -54,7 +54,7 @@
 }
 
 @utility faded-bottom {
-  @apply after:pointer-events-none after:absolute after:start-0 after:bottom-0 after:hidden after:h-32 after:w-full after:rounded-b-2xl after:bg-[linear-gradient(180deg,_transparent_10%,_var(--background)_70%)] md:after:block;
+  @apply after:pointer-events-none after:absolute after:start-0 after:bottom-0 after:hidden after:h-32 after:w-full after:rounded-b-2xl after:bg-[linear-gradient(180deg,transparent_10%,var(--background)_70%)] md:after:block;
 }
 
 /* styles.css */