refactor: Update Tailwind CSS important modifier syntax and focus outline styles across UI components.

Author: Rajat

apps/web/app/(with-contexts)/(with-layout)/accomplishment/[certId]/page.tsx

@@ -89,7 +89,7 @@ export default function AccomplishmentPage() {
                 {/* User completion info - responsive layout */}
                 <div className="flex flex-col sm:flex-row gap-3 sm:gap-4">
                     {certificate.userImage && (
-                        <div className="h-24 w-24 sm:h-32 sm:w-32 md:h-40 md:w-40 rounded-full overflow-hidden flex-shrink-0 mx-auto sm:mx-0">
+                        <div className="h-24 w-24 sm:h-32 sm:w-32 md:h-40 md:w-40 rounded-full overflow-hidden shrink-0 mx-auto sm:mx-0">
                             <Image
                                 src={certificate.userImage.file}
                                 alt={certificate.userName}

apps/web/app/(with-contexts)/course/[slug]/[id]/page.tsx

@@ -77,7 +77,7 @@ export default function ProductPage(props: {
         : TextEditorEmptyDoc;
 
     return (
-        <div className="flex flex-col pb-[100px] lg:max-w-[40rem] xl:max-w-[48rem] mx-auto">
+        <div className="flex flex-col pb-[100px] lg:max-w-160 xl:max-w-3xl mx-auto">
             <h1 className="text-4xl font-semibold mb-8">{product.title}</h1>
             {progress?.certificateId && (
                 <Link
@@ -115,7 +115,7 @@ export default function ProductPage(props: {
                 )}
             {product.featuredImage && (
                 <div className="flex justify-center">
-                    <div className="mt-4 mb-8 w-full md:max-w-screen-md">
+                    <div className="mt-4 mb-8 w-full md:max-w-(--breakpoint-md)">
                         <Image
                             alt={product.featuredImage.caption}
                             src={product.featuredImage.file!}

apps/web/app/(with-contexts)/dashboard/(sidebar)/community/[id]/manage/page.tsx

@@ -833,7 +833,7 @@ export default function Page(props: {
                             Cancel
                         </Button>
                         <Button
-                            className="!bg-red-500 text-white hover:!bg-red-600"
+                            className="bg-red-500! text-white hover:bg-red-600!"
                             variant="destructive"
                             onClick={confirmDeleteCategory}
                         >

apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/customers/page.tsx

@@ -446,7 +446,7 @@ export default function CustomersPage() {
                                                                       Progress
                                                                   </DialogTitle>
                                                               </DialogHeader>
-                                                              <DialogDescription>
+                                                              <DialogDescription className="max-h-[400px] overflow-y-scroll">
                                                                   {/* {product?.lessons?.map((lesson: any) => (
                                                     <div key={lesson.lessonId}>
                                                         <h3>{lesson.title}</h3>

apps/web/app/(with-contexts)/dashboard/(sidebar)/support/page.tsx

@@ -34,8 +34,8 @@ export default function Page() {
             <p className="mb-8 text-slate-600">
                 If you need a helping hand, we are out there for you.
             </p>
-            <div className="flex flex-col lg:!flex-row gap-4 mb-16">
-                <Card className="lg:!w-1/3">
+            <div className="flex flex-col lg:flex-row! gap-4 mb-16">
+                <Card className="lg:w-1/3!">
                     <CardHeader>
                         <CardTitle>Documentation</CardTitle>
                     </CardHeader>
@@ -53,7 +53,7 @@ export default function Page() {
                         </a>
                     </CardFooter>
                 </Card>
-                <Card className="lg:!w-1/3">
+                <Card className="lg:w-1/3!">
                     <CardHeader>
                         <CardTitle>Ask in Discord</CardTitle>
                     </CardHeader>
@@ -72,7 +72,7 @@ export default function Page() {
                         </a>
                     </CardFooter>
                 </Card>
-                <Card className="lg:!w-1/3">
+                <Card className="lg:w-1/3!">
                     <CardHeader>
                         <CardTitle>Found a bug?</CardTitle>
                     </CardHeader>

apps/web/components.json

@@ -4,7 +4,7 @@
     "rsc": true,
     "tsx": true,
     "tailwind": {
-        "config": "tailwind.config.js",
+        "config": "tailwind.config.ts",
         "css": "styles/globals.css",
         "baseColor": "slate",
         "cssVariables": true,
@@ -17,4 +17,4 @@
         "lib": "@/lib",
         "hooks": "@/hooks"
     }
-}
+}

apps/web/components/admin/blogs/blog-item.tsx

@@ -48,7 +48,7 @@ export default function BlogItem({
                 <Chip
                     className={
                         product.published
-                            ? "!bg-black text-white !border-black"
+                            ? "bg-black! text-white border-black!"
                             : ""
                     }
                 >

apps/web/components/admin/dashboard-skeleton/nav-user.tsx

@@ -64,7 +64,7 @@ export function NavUser() {
                         </SidebarMenuButton>
                     </DropdownMenuTrigger>
                     <DropdownMenuContent
-                        className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+                        className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
                         side={isMobile ? "bottom" : "right"}
                         align="end"
                         sideOffset={4}

apps/web/components/admin/dashboard-skeleton/team-switcher.tsx

@@ -55,7 +55,7 @@ export function TeamSwitcher({
                         </SidebarMenuButton>
                     </DropdownMenuTrigger>
                     <DropdownMenuContent
-                        className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+                        className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
                         align="start"
                         side={isMobile ? "bottom" : "right"}
                         sideOffset={4}

apps/web/components/admin/mails/editor-layout.tsx

@@ -129,7 +129,7 @@ export const EmailEditorLayout = ({
                         )}
                     </div>
                 </div>
-                <div className="w-full rounded-xl overflow-hidden border bg-background/98 backdrop-blur supports-[backdrop-filter]:bg-background/80 shadow-sm flex flex-col">
+                <div className="w-full rounded-xl overflow-hidden border bg-background/98 backdrop-blur-sm supports-backdrop-filter:bg-background/80 shadow-sm flex flex-col">
                     {title ? (
                         <div className="border-b px-6 py-4">
                             <h1 className="text-lg font-semibold text-foreground">