Fix invalid Tailwind CSS class names introduced in v1.5.0

src/app/(protected)/dashboard/DashboardClient.tsx

@@ -628,14 +628,14 @@ export default function DashboardClient({ initialData }: DashboardClientProps) {
                     <>
                       <div className="bg-primary h-full transition-all duration-500 ease-in-out" style={{ width: `${Math.min(officialWidth, 100)}%` }} />
                       <div className="bg-green-500/60 h-full relative transition-all duration-500 ease-in-out border-l border-background/20" style={{ width: `${Math.min(diffWidth, 100)}%` }}>
-                          <div className="absolute inset-0 bg-[linear-gradient(45deg,rgba(255,255,255,0.3)_25%,transparent_25%,transparent_50%,rgba(255,255,255,0.3)_50%,rgba(255,255,255,0.3)_75%,transparent_75%,transparent)] bg-size-[6px_6px]" />
+                          <div className="absolute inset-0 bg-[linear-gradient(45deg,rgba(255,255,255,0.3)_25%,transparent_25%,transparent_50%,rgba(255,255,255,0.3)_50%,rgba(255,255,255,0.3)_75%,transparent_75%,transparent)] [background-size:6px_6px]" />
                       </div>
                     </>
                   ) : (
                     <>
                       <div className="bg-primary h-full transition-all duration-500 ease-in-out" style={{ width: `${Math.min(stats.rawPercentage, 100)}%` }} />
                       <div className="bg-red-500/75 h-full relative transition-all duration-500 ease-in-out border-l border-background/20" style={{ width: `${Math.min(diffWidth, 100)}%` }}>
-                          <div className="absolute inset-0 bg-[linear-gradient(45deg,rgba(255,255,255,0.2)_25%,transparent_25%,transparent_50%,rgba(255,255,255,0.2)_50%,rgba(255,255,255,0.2)_75%,transparent_75%,transparent)] bg-size-[6px_6px]" />
+                          <div className="absolute inset-0 bg-[linear-gradient(45deg,rgba(255,255,255,0.2)_25%,transparent_25%,transparent_50%,rgba(255,255,255,0.2)_50%,rgba(255,255,255,0.2)_75%,transparent_75%,transparent)] [background-size:6px_6px]" />
                       </div>
                     </>
                   )}

src/app/(protected)/profile/ProfileClient.tsx

@@ -178,7 +178,7 @@ export default function ProfileClient() {
 
                 {/* Banner Background */}
                 <div className="h-[120px] md:h-[140px] w-full absolute top-0 left-0 right-0 z-0 overflow-hidden pointer-events-none">
-                    <div className="absolute inset-0 bg-linear-to-r from-violet-900/40 via-purple-900/40 to-slate-900/40" />
+                    <div className="absolute inset-0 bg-gradient-to-r from-violet-900/40 via-purple-900/40 to-slate-900/40" />
                     <div className="absolute -bottom-10 left-8 w-32 h-32 bg-primary/20 blur-[50px] rounded-full" />
                 </div>
 

src/app/accept-terms/page.tsx

@@ -11,7 +11,7 @@ export default function AcceptTermsPage() {
   return (
     <>
       <Toaster />
-      <div className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-linear-to-br from-slate-900 via-purple-900 to-slate-900 p-4">
+      <div className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 p-4">
         {/* Animated gradient mesh background */}
         <div className="absolute inset-0 -z-10 overflow-hidden pointer-events-none">
           {/* Animated gradient orbs */}
@@ -22,7 +22,7 @@ export default function AcceptTermsPage() {
 
           {/* Dot grid pattern */}
           <div 
-            className="absolute inset-0 opacity-20 bg-[radial-gradient(circle,rgba(255,255,255,0.8)_1px,transparent_1px)] bg-size-[50px_50px]"
+            className="absolute inset-0 opacity-20 bg-[radial-gradient(circle,rgba(255,255,255,0.8)_1px,transparent_1px)] [background-size:50px_50px]"
           ></div>
         </div>
 

src/components/attendance/course-card.tsx

@@ -310,7 +310,7 @@ export function CourseCard({ course }: CourseCardProps) {
                       className="absolute top-0 left-0 h-full bg-primary/40 transition-all duration-500 ease-in-out"
                       style={{ width: `${Math.min(stats.displayPercentage, 100)}%` }}
                     >
-                      <div className="h-full w-full opacity-30 bg-[linear-gradient(45deg,rgba(255,255,255,0.2)_25%,transparent_25%,transparent_50%,rgba(255,255,255,0.2)_50%,rgba(255,255,255,0.2)_75%,transparent_75%,transparent)] bg-size-[8px_8px]" />
+                      <div className="h-full w-full opacity-30 bg-[linear-gradient(45deg,rgba(255,255,255,0.2)_25%,transparent_25%,transparent_50%,rgba(255,255,255,0.2)_50%,rgba(255,255,255,0.2)_75%,transparent_75%,transparent)] [background-size:8px_8px]" />
                     </div>
                     <div
                       className="absolute top-0 left-0 h-full bg-primary transition-all duration-500 ease-in-out"
@@ -324,7 +324,7 @@ export function CourseCard({ course }: CourseCardProps) {
                       className="absolute top-0 left-0 h-full bg-red-500/80 transition-all duration-500 ease-in-out"
                       style={{ width: `${Math.min(stats.officialPercentage, 100)}%` }}
                     >
-                        <div className="h-full w-full opacity-30 bg-[linear-gradient(45deg,rgba(255,255,255,0.2)_25%,transparent_25%,transparent_50%,rgba(255,255,255,0.2)_50%,rgba(255,255,255,0.2)_75%,transparent_75%,transparent)] bg-size-[8px_8px]" />
+                        <div className="h-full w-full opacity-30 bg-[linear-gradient(45deg,rgba(255,255,255,0.2)_25%,transparent_25%,transparent_50%,rgba(255,255,255,0.2)_50%,rgba(255,255,255,0.2)_75%,transparent_75%,transparent)] [background-size:8px_8px]" />
                     </div>
                     <div
                       className="absolute top-0 left-0 h-full bg-primary transition-all duration-500 ease-in-out"

src/components/layout/footer.tsx

@@ -55,7 +55,7 @@ export const Footer = ({ className }: { className?: string }) => {
               href={authorUrl || "#"}
               target="_blank"
               rel="noopener noreferrer"
-              className="font-medium text-foreground hover:text-transparent hover:bg-clip-text hover:bg-linear-to-r hover:from-red-500 hover:to-orange-500 transition-all duration-300"
+              className="font-medium text-foreground hover:text-transparent hover:bg-clip-text hover:bg-gradient-to-r hover:from-red-500 hover:to-orange-500 transition-all duration-300"
               aria-label={`Visit ${authorName}'s profile`}
             >
               {authorName}

src/components/legal/AcceptTermsForm.tsx

@@ -64,7 +64,7 @@ export function AcceptTermsForm() {
       <div className="px-6 py-2">
         <div className="w-full rounded-lg border border-zinc-800 bg-zinc-900/50 p-5">
           <div className="prose prose-sm prose-invert max-w-none text-zinc-300">
-            <ReactMarkdown 
+            <ReactMarkdown
               components={{
                 h1: ({node: _node, ...props}) => <h1 className="text-sm font-bold text-white uppercase tracking-wider mb-2 mt-4" {...props} />,
                 p: ({node: _node, ...props}) => <p className="text-xs leading-relaxed text-zinc-400 mb-1.5" {...props} />,
@@ -82,34 +82,34 @@ export function AcceptTermsForm() {
       {/* Footer Actions */}
       <div className="p-6 pt-2 flex flex-col gap-4">
         <label className="flex items-center space-x-3 rounded-lg border border-zinc-800 bg-zinc-900/50 p-3 hover:bg-zinc-900/80 transition-colors cursor-pointer">
-          <Checkbox 
-            id="terms" 
-            checked={checked} 
+          <Checkbox
+            id="terms"
+            checked={checked}
             onCheckedChange={(c) => setChecked(!!c)}
             aria-labelledby="terms-label"
             className="border-zinc-600 data-[state=checked]:bg-purple-600 data-[state=checked]:border-purple-600"
           />
 
           <span id="terms-label" className="text-xs text-zinc-400 font-normal select-none">
             I have read and accept the{" "}
-            <Link 
-              href="/legal" 
-              target="_blank" 
+            <Link
+              href="/legal"
+              target="_blank"
               className="text-white hover:underline hover:text-purple-400 transition-colors"
-              onClick={(e) => e.stopPropagation()} 
+              onClick={(e) => e.stopPropagation()}
             >
               above Disclaimer and all Policies listed here
             </Link>.
           </span>
         </label>
 
-        <Button 
-          onClick={handleAgree} 
+        <Button
+          onClick={handleAgree}
           disabled={loading || !checked}
           className={cn(
             "w-full h-11 font-semibold transition-all duration-300",
-            checked 
-              ? "bg-linear-to-r from-purple-600 to-pink-600 text-white hover:from-purple-500 hover:to-pink-500 shadow-[0_0_30px_-5px_rgba(168,85,247,0.5)]" 
+            checked
+              ? "bg-gradient-to-r from-purple-600 to-pink-600 text-white hover:from-purple-500 hover:to-pink-500 shadow-[0_0_30px_-5px_rgba(168,85,247,0.5)]"
               : "bg-zinc-800 text-zinc-500 hover:bg-zinc-800"
           )}
           aria-live="polite"