wip: tailwind upgrade

astro.config.mjs

@@ -1,10 +1,10 @@
 // https://astro.build/config
 import sitemap from '@astrojs/sitemap';
-import tailwind from '@astrojs/tailwind';
 import node from '@astrojs/node';
 import { defineConfig } from 'astro/config';
 import rehypeExternalLinks from 'rehype-external-links';
 import { serializeSitemap, shouldIndexPage } from './sitemap.mjs';
+import tailwindcss from '@tailwindcss/vite';
 
 import react from '@astrojs/react';
 
@@ -46,15 +46,13 @@ export default defineConfig({
   }),
   trailingSlash: 'never',
   integrations: [
-    tailwind({
-      config: {
-        applyBaseStyles: false,
-      },
-    }),
     sitemap({
       filter: shouldIndexPage,
       serialize: serializeSitemap,
     }),
     react(),
   ],
+  vite: {
+    plugins: [tailwindcss()],
+  },
 });

package.json

@@ -32,11 +32,11 @@
     "@astrojs/node": "^8.3.4",
     "@astrojs/react": "^3.6.2",
     "@astrojs/sitemap": "^3.2.0",
-    "@astrojs/tailwind": "^5.1.2",
     "@fingerprintjs/fingerprintjs": "^4.5.0",
     "@nanostores/react": "^0.8.0",
     "@napi-rs/image": "^1.9.2",
     "@resvg/resvg-js": "^2.6.2",
+    "@tailwindcss/vite": "^4.0.0",
     "@tanstack/react-query": "^5.59.16",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.1",
@@ -72,9 +72,9 @@
     "satori-html": "^0.3.2",
     "sharp": "^0.33.5",
     "slugify": "^1.6.6",
-    "tiptap-markdown": "^0.8.10",
     "tailwind-merge": "^2.5.3",
-    "tailwindcss": "^3.4.13",
+    "tailwindcss": "^4.0.0",
+    "tiptap-markdown": "^0.8.10",
     "turndown": "^7.2.0",
     "unified": "^11.0.5",
     "zustand": "^4.5.5"
@@ -97,7 +97,7 @@
     "openai": "^4.67.3",
     "prettier": "^3.3.3",
     "prettier-plugin-astro": "^0.14.1",
-    "prettier-plugin-tailwindcss": "^0.6.8",
+    "prettier-plugin-tailwindcss": "^0.6.11",
     "tsx": "^4.19.1"
   }
 }

src/components/AccountSidebar.astro

@@ -153,7 +153,7 @@ const sidebarLinks = [
                         : 'border-r-transparent text-gray-500 hover:border-r-gray-300'
                     }`}
                   >
-                    <span class='flex flex-grow items-center'>
+                    <span class='flex grow items-center'>
                       {sidebarLink.icon.component ? (
                         <sidebarLink.icon.component
                           className={`${sidebarLink.icon.classes} mr-2`}

src/components/AccountStreak/AccountStreak.tsx

@@ -83,10 +83,10 @@ export function AccountStreak(props: AccountStreakProps) {
   const totalCircles = leftCircleCount + currentCircleCount + remainingCount;
 
   return (
-    <div className="relative z-[90] animate-fade-in">
+    <div className="relative z-90 animate-fade-in">
       <button
         className={cn(
-          'flex items-center justify-center rounded-lg p-1.5 px-2 text-purple-400 hover:bg-purple-100/10 focus:outline-none',
+          'flex items-center justify-center rounded-lg p-1.5 px-2 text-purple-400 hover:bg-purple-100/10 focus:outline-hidden',
           {
             'bg-purple-100/10': showDropdown,
           },

src/components/AccountStreak/AccountStreakHeatmap.tsx

@@ -128,20 +128,20 @@ export function AccountStreakHeatmap(props: AccountStreakHeatmapProps) {
         ]}
         classForValue={(value) => {
           if (!value) {
-            return 'fill-slate-700 rounded-md [rx:2px] focus:outline-none';
+            return 'fill-slate-700 rounded-md [rx:2px] focus:outline-hidden';
           }
 
           const { count } = value;
           if (count >= 20) {
-            return 'fill-slate-200 rounded-md [rx:2px] focus:outline-none';
+            return 'fill-slate-200 rounded-md [rx:2px] focus:outline-hidden';
           } else if (count >= 10) {
-            return 'fill-slate-300 rounded-md [rx:2px] focus:outline-none';
+            return 'fill-slate-300 rounded-md [rx:2px] focus:outline-hidden';
           } else if (count >= 5) {
-            return 'fill-slate-400 rounded-md [rx:2px] focus:outline-none';
+            return 'fill-slate-400 rounded-md [rx:2px] focus:outline-hidden';
           } else if (count >= 3) {
-            return 'fill-slate-500 rounded-md [rx:2px] focus:outline-none';
+            return 'fill-slate-500 rounded-md [rx:2px] focus:outline-hidden';
           } else {
-            return 'fill-slate-600 rounded-md [rx:2px] focus:outline-none';
+            return 'fill-slate-600 rounded-md [rx:2px] focus:outline-hidden';
           }
         }}
         tooltipDataAttrs={(value: any) => {
@@ -159,7 +159,7 @@ export function AccountStreakHeatmap(props: AccountStreakHeatmapProps) {
 
       <ReactTooltip
         id="user-activity-tip"
-        className="!rounded-lg !bg-slate-900 !p-1 !px-2 !text-xs"
+        className="rounded-lg! bg-slate-900! p-1! px-2! text-xs!"
       />
 
       <div className="mt-2 flex items-center justify-end">
@@ -173,14 +173,14 @@ export function AccountStreakHeatmap(props: AccountStreakHeatmapProps) {
               data-tooltip-content={`${legend.count} Updates`}
             >
               <div
-                className={`h-2.5 w-2.5 ${legend.color} mr-1 rounded-sm`}
+                className={`h-2.5 w-2.5 ${legend.color} mr-1 rounded-xs`}
               ></div>
             </div>
           ))}
           <span className="ml-2 text-xs text-slate-500">More</span>
           <ReactTooltip
             id="user-activity-tip"
-            className="!rounded-lg !bg-slate-900 !p-1 !px-2 !text-sm"
+            className="rounded-lg! bg-slate-900! p-1! px-2! text-sm!"
           />
         </div>
       </div>

src/components/Activity/ActivityTopicsModal.tsx

@@ -43,7 +43,7 @@ export function ActivityTopicsModal(props: ActivityTopicDetailsProps) {
         onClose();
       }}
     >
-      <div className={`popup-body relative rounded-lg bg-white p-4 shadow`}>
+      <div className={`popup-body relative rounded-lg bg-white p-4 shadow-sm`}>
         <span className="mb-2 flex items-center justify-between text-lg font-semibold capitalize">
           <span className="flex items-center gap-2">
             {actionType.replace('_', ' ')}

src/components/Activity/ProjectProgress.tsx

@@ -37,7 +37,7 @@ export function ProjectProgress(props: ProjectProgressType) {
         target="_blank"
       >
         <ProjectStatus projectStatus={projectStatus} />
-        <span className="ml-2 flex-grow truncate">{projectStatus?.title}</span>
+        <span className="ml-2 grow truncate">{projectStatus?.title}</span>
         <span className="inline-flex items-center gap-1 text-xs text-gray-400">
           {projectStatus.upvotes}
           <ThumbsUp className="size-2.5 stroke-[2.5px]" />

src/components/Activity/ResourceProgress.tsx

@@ -73,7 +73,7 @@ export function ResourceProgress(props: ResourceProgressType) {
           showActions ? 'pr-7' : '',
         )}
       >
-        <span className="flex-grow truncate">{title}</span>
+        <span className="grow truncate">{title}</span>
         <span className="text-xs text-gray-400">
           {parseInt(progressPercentage, 10)}%
         </span>

src/components/AddTeamRoadmap.tsx

@@ -69,7 +69,7 @@ export function AddTeamRoadmap(props: AddTeamRoadmapProps) {
       <div className="relative h-full w-full max-w-md p-4 md:h-auto">
         <div
           ref={popupBodyEl}
-          className="popup-body relative rounded-lg bg-white p-4 shadow"
+          className="popup-body relative rounded-lg bg-white p-4 shadow-sm"
         >
           {isLoading && (
             <>
@@ -99,7 +99,7 @@ export function AddTeamRoadmap(props: AddTeamRoadmapProps) {
                 <button
                   onClick={onClose}
                   type="button"
-                  className="flex-grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center hover:bg-gray-300"
+                  className="grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center hover:bg-gray-300"
                 >
                   Done
                 </button>
@@ -110,7 +110,7 @@ export function AddTeamRoadmap(props: AddTeamRoadmapProps) {
                     setIsLoading(false);
                   }}
                   type="button"
-                  className="flex-grow cursor-pointer rounded-lg bg-black py-2 text-center text-white"
+                  className="grow cursor-pointer rounded-lg bg-black py-2 text-center text-white"
                 >
                   + Add More
                 </button>
@@ -126,7 +126,7 @@ export function AddTeamRoadmap(props: AddTeamRoadmapProps) {
                 <button
                   onClick={onClose}
                   type="button"
-                  className="flex-grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center hover:bg-gray-300"
+                  className="grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center hover:bg-gray-300"
                 >
                   Cancel
                 </button>
@@ -152,7 +152,7 @@ export function AddTeamRoadmap(props: AddTeamRoadmapProps) {
                     setSelectedRoadmap(roadmapId);
                   });
                 }}
-                inputClassName="mt-2 mb-2 block w-full rounded-md border border-gray-300 px-3 py-2 outline-none placeholder:text-gray-400 focus:border-gray-400"
+                inputClassName="mt-2 mb-2 block w-full rounded-md border border-gray-300 px-3 py-2 outline-hidden placeholder:text-gray-400 focus:border-gray-400"
                 placeholder={'Search for roadmap'}
               />
 
@@ -160,7 +160,7 @@ export function AddTeamRoadmap(props: AddTeamRoadmapProps) {
                 <button
                   onClick={onClose}
                   type="button"
-                  className="flex-grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center hover:bg-gray-300"
+                  className="grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center hover:bg-gray-300"
                 >
                   Cancel
                 </button>

src/components/AdvertiseForm.tsx

@@ -30,7 +30,7 @@ function Input(props: InputProps) {
           value={value}
           onChange={onChange}
           rows={rows}
-          className="mt-1 block w-full rounded-md border border-gray-300 p-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+          className="mt-1 block w-full rounded-md border border-gray-300 p-2 shadow-xs focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
           autoComplete="off"
           data-1p-ignore=""
           data-form-type="other"
@@ -45,7 +45,7 @@ function Input(props: InputProps) {
           value={value}
           onChange={onChange}
           required={required}
-          className="mt-1 block w-full rounded-md border border-gray-300 p-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+          className="mt-1 block w-full rounded-md border border-gray-300 p-2 shadow-xs focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
           autoComplete="off"
           data-1p-ignore=""
           data-form-type="other"
@@ -120,7 +120,7 @@ export function AdvertiseForm() {
         Ready to learn more? Fill out the form below to get started!
       </h2>
       {error && (
-        <div className="relative mb-4 rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700">
+        <div className="relative mb-4 rounded-sm border border-red-400 bg-red-100 px-4 py-3 text-red-700">
           {error}
         </div>
       )}
@@ -199,7 +199,7 @@ export function AdvertiseForm() {
               type="checkbox"
               checked={formData.updates}
               onChange={handleInputChange}
-              className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+              className="h-4 w-4 rounded-sm border-gray-300 text-indigo-600 focus:ring-indigo-500"
             />
           </div>
           <div className="ml-3 text-sm">
@@ -213,7 +213,7 @@ export function AdvertiseForm() {
         <div>
           <button
             type="submit"
-            className="flex justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+            className="flex justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-xs hover:bg-indigo-700 focus:outline-hidden focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
           >
             Send
           </button>

src/components/AuthenticationFlow/CourseLoginPopup.tsx

@@ -115,7 +115,7 @@ export function CourseLoginPopup(props: CourseLoginPopupProps) {
       <div className="flex flex-row gap-2">
         {!isUsingEmail && (
           <button
-            className="flex-grow rounded-md border border-gray-400 px-4 py-2 text-sm text-gray-600 hover:bg-gray-100"
+            className="grow rounded-md border border-gray-400 px-4 py-2 text-sm text-gray-600 hover:bg-gray-100"
             onClick={() => setIsUsingEmail(true)}
           >
             Use your email address
@@ -124,13 +124,13 @@ export function CourseLoginPopup(props: CourseLoginPopupProps) {
         {isUsingEmail && (
           <>
             <button
-              className="flex-grow rounded-md border border-gray-400 px-4 py-2 text-sm text-gray-600 hover:bg-gray-100"
+              className="grow rounded-md border border-gray-400 px-4 py-2 text-sm text-gray-600 hover:bg-gray-100"
               onClick={() => setEmailNature('login')}
             >
               Already have an account
             </button>
             <button
-              className="flex-grow rounded-md border border-gray-400 px-4 py-2 text-sm text-gray-600 hover:bg-gray-100"
+              className="grow rounded-md border border-gray-400 px-4 py-2 text-sm text-gray-600 hover:bg-gray-100"
               onClick={() => setEmailNature('signup')}
             >
               Create an account

src/components/AuthenticationFlow/EmailLoginForm.tsx

@@ -72,7 +72,7 @@ export function EmailLoginForm(props: EmailLoginFormProps) {
         type="email"
         autoComplete="email"
         required
-        className="block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
+        className="block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-xs outline-hidden placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
         placeholder="Email Address"
         value={email}
         onInput={(e) => setEmail(String((e.target as any).value))}
@@ -86,7 +86,7 @@ export function EmailLoginForm(props: EmailLoginFormProps) {
         type="password"
         autoComplete="current-password"
         required
-        className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
+        className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-xs outline-hidden placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
         placeholder="Password"
         value={password}
         onInput={(e) => setPassword(String((e.target as any).value))}
@@ -108,7 +108,7 @@ export function EmailLoginForm(props: EmailLoginFormProps) {
       <button
         type="submit"
         disabled={isLoading || isDisabled}
-        className="inline-flex w-full items-center justify-center rounded-lg bg-black p-2 py-3 text-sm font-medium text-white outline-none focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:bg-gray-400"
+        className="inline-flex w-full items-center justify-center rounded-lg bg-black p-2 py-3 text-sm font-medium text-white outline-hidden focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:bg-gray-400"
       >
         {isLoading ? 'Please wait...' : 'Continue'}
       </button>

src/components/AuthenticationFlow/EmailSignupForm.tsx

@@ -74,7 +74,7 @@ export function EmailSignupForm(props: EmailSignupFormProps) {
         min={3}
         max={50}
         required
-        className="block w-full rounded-lg border border-gray-300 px-3 py-2 outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
+        className="block w-full rounded-lg border border-gray-300 px-3 py-2 outline-hidden placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
         placeholder="Full Name"
         value={name}
         onInput={(e) => setName(String((e.target as any).value))}
@@ -87,7 +87,7 @@ export function EmailSignupForm(props: EmailSignupFormProps) {
         type="email"
         autoComplete="email"
         required
-        className="block w-full rounded-lg border border-gray-300 px-3 py-2 outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
+        className="block w-full rounded-lg border border-gray-300 px-3 py-2 outline-hidden placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
         placeholder="Email Address"
         value={email}
         onInput={(e) => setEmail(String((e.target as any).value))}
@@ -102,7 +102,7 @@ export function EmailSignupForm(props: EmailSignupFormProps) {
         min={6}
         max={50}
         required
-        className="block w-full rounded-lg border border-gray-300 px-3 py-2 outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
+        className="block w-full rounded-lg border border-gray-300 px-3 py-2 outline-hidden placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
         placeholder="Password"
         value={password}
         onInput={(e) => setPassword(String((e.target as any).value))}
@@ -115,7 +115,7 @@ export function EmailSignupForm(props: EmailSignupFormProps) {
       <button
         type="submit"
         disabled={isLoading || isDisabled}
-        className="inline-flex w-full items-center justify-center rounded-lg bg-black p-2 py-3 text-sm font-medium text-white outline-none focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:bg-gray-400"
+        className="inline-flex w-full items-center justify-center rounded-lg bg-black p-2 py-3 text-sm font-medium text-white outline-hidden focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:bg-gray-400"
       >
         {isLoading ? 'Please wait...' : 'Continue to Verify Email'}
       </button>

src/components/AuthenticationFlow/ForgotPasswordForm.tsx

@@ -33,7 +33,7 @@ export function ForgotPasswordForm() {
       <input
         type="email"
         name="email"
-        className="mt-2 block w-full appearance-none rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none transition duration-150 ease-in-out placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
+        className="mt-2 block w-full appearance-none rounded-lg border border-gray-300 px-3 py-2 shadow-xs outline-hidden transition duration-150 ease-in-out placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
         required
         placeholder="Email Address"
         value={email}
@@ -55,7 +55,7 @@ export function ForgotPasswordForm() {
       <button
         type="submit"
         disabled={isLoading}
-        className="mt-3 inline-flex w-full items-center justify-center rounded-lg bg-black p-2 py-3 text-sm font-medium text-white outline-none focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:bg-gray-400"
+        className="mt-3 inline-flex w-full items-center justify-center rounded-lg bg-black p-2 py-3 text-sm font-medium text-white outline-hidden focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:bg-gray-400"
       >
         {isLoading ? 'Please wait...' : 'Continue'}
       </button>

src/components/AuthenticationFlow/GitHubButton.tsx

@@ -143,7 +143,7 @@ export function GitHubButton(props: GitHubButtonProps) {
     <>
       <button
         className={cn(
-          'inline-flex h-10 w-full items-center justify-center gap-2 rounded border border-slate-300 bg-white p-2 text-sm font-medium text-black outline-none hover:border-gray-400 hover:bg-gray-50 focus:ring-2 focus:ring-[#333] focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-60',
+          'inline-flex h-10 w-full items-center justify-center gap-2 rounded-sm border border-slate-300 bg-white p-2 text-sm font-medium text-black outline-hidden hover:border-gray-400 hover:bg-gray-50 focus:ring-2 focus:ring-[#333] focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-60',
           className,
         )}
         disabled={isLoading || isDisabled}

src/components/AuthenticationFlow/GoogleButton.tsx

@@ -153,7 +153,7 @@ export function GoogleButton(props: GoogleButtonProps) {
     <>
       <button
         className={cn(
-          'inline-flex h-10 w-full items-center justify-center gap-2 rounded border border-slate-300 bg-white p-2 text-sm font-medium text-black outline-none hover:border-gray-400 hover:bg-gray-50 focus:ring-2 focus:ring-[#333] focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-60',
+          'inline-flex h-10 w-full items-center justify-center gap-2 rounded-sm border border-slate-300 bg-white p-2 text-sm font-medium text-black outline-hidden hover:border-gray-400 hover:bg-gray-50 focus:ring-2 focus:ring-[#333] focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-60',
           className,
         )}
         disabled={isLoading || isDisabled}

src/components/AuthenticationFlow/LinkedInButton.tsx

@@ -152,7 +152,7 @@ export function LinkedInButton(props: LinkedInButtonProps) {
     <>
       <button
         className={cn(
-          'inline-flex h-10 w-full items-center justify-center gap-2 rounded border border-slate-300 bg-white p-2 text-sm font-medium text-black outline-none hover:border-gray-400 focus:ring-2 focus:ring-[#333] focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-60',
+          'inline-flex h-10 w-full items-center justify-center gap-2 rounded-sm border border-slate-300 bg-white p-2 text-sm font-medium text-black outline-hidden hover:border-gray-400 focus:ring-2 focus:ring-[#333] focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-60',
           className,
         )}
         disabled={isLoading || isDisabled}

src/components/AuthenticationFlow/ResetPasswordForm.tsx

@@ -61,7 +61,7 @@ export function ResetPasswordForm() {
     <form className="mx-auto w-full" onSubmit={handleSubmit}>
       <input
         type="password"
-        className="mb-2 mt-2 block w-full appearance-none rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none transition duration-150 ease-in-out placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
+        className="mb-2 mt-2 block w-full appearance-none rounded-lg border border-gray-300 px-3 py-2 shadow-xs outline-hidden transition duration-150 ease-in-out placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
         required
         minLength={6}
         placeholder="New Password"
@@ -71,7 +71,7 @@ export function ResetPasswordForm() {
 
       <input
         type="password"
-        className="mt-2 block w-full appearance-none rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none transition duration-150 ease-in-out placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
+        className="mt-2 block w-full appearance-none rounded-lg border border-gray-300 px-3 py-2 shadow-xs outline-hidden transition duration-150 ease-in-out placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
         required
         minLength={6}
         placeholder="Confirm New Password"
@@ -88,7 +88,7 @@ export function ResetPasswordForm() {
       <button
         type="submit"
         disabled={isLoading}
-        className="mt-2 inline-flex w-full items-center justify-center rounded-lg bg-black p-2 py-3 text-sm font-medium text-white outline-none focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:bg-gray-400"
+        className="mt-2 inline-flex w-full items-center justify-center rounded-lg bg-black p-2 py-3 text-sm font-medium text-white outline-hidden focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:bg-gray-400"
       >
         {isLoading ? 'Please wait...' : 'Reset Password'}
       </button>

src/components/Befriend.tsx

@@ -125,7 +125,7 @@ export function Befriend() {
         <div>
           <a
             href="/"
-            className="flex-grow cursor-pointer rounded-lg bg-gray-200 px-3 py-2 text-center"
+            className="grow cursor-pointer rounded-lg bg-gray-200 px-3 py-2 text-center"
           >
             Back to home
           </a>
@@ -141,7 +141,7 @@ export function Befriend() {
   const isMe = currentUser?.id === user.id;
 
   return (
-    <div className="container !max-w-[400px] text-center">
+    <div className="container max-w-[400px]! text-center">
       <img
         alt={'join team'}
         src={userAvatar}
@@ -169,7 +169,7 @@ export function Befriend() {
                 });
               }}
               type="button"
-              className="w-full flex-grow cursor-pointer rounded-lg bg-black px-3 py-2 text-center text-white disabled:cursor-not-allowed disabled:opacity-40"
+              className="w-full grow cursor-pointer rounded-lg bg-black px-3 py-2 text-center text-white disabled:cursor-not-allowed disabled:opacity-40"
             >
               {isMe ? "You can't add yourself" : 'Add Friend'}
             </button>
@@ -177,7 +177,7 @@ export function Befriend() {
 
           {user.status === 'sent' && (
             <>
-              <span className="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border  border-gray-300 px-3 py-2 text-center text-black">
+              <span className="flex w-full grow cursor-default items-center justify-center rounded-lg border  border-gray-300 px-3 py-2 text-center text-black">
                 <CheckIcon additionalClasses="mr-2 h-4 w-4" />
                 Request Sent
               </span>
@@ -188,7 +188,7 @@ export function Befriend() {
                     setIsConfirming(true);
                   }}
                   type="button"
-                  className="flex w-full flex-grow cursor-pointer items-center justify-center rounded-lg border border-red-600 bg-red-600 px-3 py-2 text-center text-white hover:bg-red-700"
+                  className="flex w-full grow cursor-pointer items-center justify-center rounded-lg border border-red-600 bg-red-600 px-3 py-2 text-center text-white hover:bg-red-700"
                 >
                   <DeleteUserIcon additionalClasses="mr-2 h-[19px] w-[19px]" />
                   Withdraw Request
@@ -196,7 +196,7 @@ export function Befriend() {
               )}
 
               {isConfirming && (
-                <span className="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border border-red-600 px-3 py-2.5 text-center text-sm text-red-600">
+                <span className="flex w-full grow cursor-default items-center justify-center rounded-lg border border-red-600 px-3 py-2.5 text-center text-sm text-red-600">
                   Are you sure?{' '}
                   <button
                     className="ml-2 text-red-700 underline"
@@ -225,7 +225,7 @@ export function Befriend() {
 
           {user.status === 'accepted' && (
             <>
-              <span className="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border  border-gray-300 px-3 py-2 text-center text-black">
+              <span className="flex w-full grow cursor-default items-center justify-center rounded-lg border  border-gray-300 px-3 py-2 text-center text-black">
                 <AddedUserIcon additionalClasses="mr-2 h-5 w-5" />
                 You are friends
               </span>
@@ -236,7 +236,7 @@ export function Befriend() {
                     setIsConfirming(true);
                   }}
                   type="button"
-                  className="flex w-full flex-grow cursor-pointer items-center justify-center rounded-lg border border-red-600 bg-red-600 px-3 py-2 text-center text-white hover:bg-red-700"
+                  className="flex w-full grow cursor-pointer items-center justify-center rounded-lg border border-red-600 bg-red-600 px-3 py-2 text-center text-white hover:bg-red-700"
                 >
                   <DeleteUserIcon additionalClasses="mr-2 h-[19px] w-[19px]" />
                   Remove Friend
@@ -244,7 +244,7 @@ export function Befriend() {
               )}
 
               {isConfirming && (
-                <span className="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border border-red-600 px-3 py-2.5 text-center text-sm text-red-600">
+                <span className="flex w-full grow cursor-default items-center justify-center rounded-lg border border-red-600 px-3 py-2.5 text-center text-sm text-red-600">
                   Are you sure?{' '}
                   <button
                     className="ml-2 text-red-700 underline"
@@ -271,12 +271,12 @@ export function Befriend() {
 
           {user.status === 'rejected' && (
             <>
-              <span className="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border border-gray-300 px-3 py-2 text-center text-black">
+              <span className="flex w-full grow cursor-default items-center justify-center rounded-lg border border-gray-300 px-3 py-2 text-center text-black">
                 <DeleteUserIcon additionalClasses="mr-2 h-4 w-4" />
                 Request Rejected
               </span>
 
-              <span className="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border border-red-600 px-3 py-2.5 text-center text-sm text-red-600">
+              <span className="flex w-full grow cursor-default items-center justify-center rounded-lg border border-red-600 px-3 py-2.5 text-center text-sm text-red-600">
                 Changed your mind?{' '}
                 <button
                   className="ml-2 text-red-700 underline"
@@ -296,7 +296,7 @@ export function Befriend() {
 
           {user.status === 'got_rejected' && (
             <>
-              <span className="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border border-red-500 px-3 py-2 text-center text-red-500">
+              <span className="flex w-full grow cursor-default items-center justify-center rounded-lg border border-red-500 px-3 py-2 text-center text-red-500">
                 <StopIcon additionalClasses="mr-2 h-4 w-4" />
                 Request Rejected
               </span>
@@ -311,7 +311,7 @@ export function Befriend() {
                     pageProgressMessage.set('');
                   });
                 }}
-                className="flex w-full flex-grow cursor-pointer items-center justify-center rounded-lg border  border-gray-800 bg-gray-800 px-3 py-2 text-center text-white hover:bg-black"
+                className="flex w-full grow cursor-pointer items-center justify-center rounded-lg border  border-gray-800 bg-gray-800 px-3 py-2 text-center text-white hover:bg-black"
               >
                 <CheckIcon additionalClasses="mr-2 h-4 w-4" />
                 Accept Request
@@ -323,7 +323,7 @@ export function Befriend() {
                     setIsConfirming(true);
                   }}
                   type="button"
-                  className="flex w-full flex-grow cursor-pointer items-center justify-center rounded-lg border border-red-600 bg-white px-3 py-2 text-center text-red-600 hover:bg-red-100"
+                  className="flex w-full grow cursor-pointer items-center justify-center rounded-lg border border-red-600 bg-white px-3 py-2 text-center text-red-600 hover:bg-red-100"
                 >
                   <DeleteUserIcon additionalClasses="mr-2 h-[19px] w-[19px]" />
                   Reject Request
@@ -331,7 +331,7 @@ export function Befriend() {
               )}
 
               {isConfirming && (
-                <span className="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border border-red-600 px-3 py-2.5 text-center text-sm text-red-600">
+                <span className="flex w-full grow cursor-default items-center justify-center rounded-lg border border-red-600 px-3 py-2.5 text-center text-sm text-red-600">
                   Are you sure?{' '}
                   <button
                     className="ml-2 text-red-700 underline"

src/components/BestPracticeHeader.astro

@@ -27,7 +27,7 @@ const isBestPracticeReady = !isUpcoming;
         <MarkFavorite
           resourceId={bestPracticeId}
           resourceType="best-practice"
-          className="text-gray-500 !opacity-100 hover:text-gray-600 [&>svg]:stroke-[0.4] [&>svg]:stroke-gray-400 hover:[&>svg]:stroke-gray-600 [&>svg]:h-4 [&>svg]:w-4 sm:[&>svg]:h-5 sm:[&>svg]:w-5 ml-1.5 relative focus:outline-0"
+          className="text-gray-500 opacity-100! hover:text-gray-600 [&>svg]:stroke-[0.4] [&>svg]:stroke-gray-400 [&>svg]:hover:stroke-gray-600 [&>svg]:h-4 [&>svg]:w-4 sm:[&>svg]:h-5 sm:[&>svg]:w-5 ml-1.5 relative focus:outline-0"
           client:load
         />
       </h1>

src/components/Changelog/ChangelogItem.astro

@@ -17,11 +17,11 @@ const formattedDate = DateTime.fromISO(frontmatter.date).toFormat(
 
 <div class='relative mb-6' id={changelog.id}>
   <span
-    class='absolute -left-6 top-2 h-2 w-2 flex-shrink-0 rounded-full bg-gray-300'
+    class='absolute -left-6 top-2 h-2 w-2 shrink-0 rounded-full bg-gray-300'
   ></span>
 
   <div class='mb-3 flex flex-col sm:flex-row items-start sm:items-center gap-0.5 sm:gap-2'>
-    <span class='flex-shrink-0 text-xs tracking-wide text-gray-400'>
+    <span class='shrink-0 text-xs tracking-wide text-gray-400'>
       {formattedDate}
     </span>
     <span class='truncate text-base font-medium text-balance'>

src/components/Changelog/ChangelogLaunch.astro

@@ -6,13 +6,13 @@ const formattedDate = DateTime.fromISO('2024-09-13').toFormat('dd LLL, yyyy');
 
 <div class='relative mb-6'>
   <span
-    class='absolute -left-6 top-2 h-2 w-2 flex-shrink-0 rounded-full bg-gray-300'
+    class='absolute -left-6 top-2 h-2 w-2 shrink-0 rounded-full bg-gray-300'
   ></span>
 
   <div
     class='mb-3 flex flex-col items-start gap-0.5 sm:flex-row sm:items-center sm:gap-2'
   >
-    <span class='flex-shrink-0 text-xs tracking-wide text-gray-400'>
+    <span class='shrink-0 text-xs tracking-wide text-gray-400'>
       {formattedDate}
     </span>
     <span class='truncate text-balance text-base font-medium'>

src/components/ChangelogBanner.astro

@@ -7,7 +7,7 @@ const top10Changelogs = allChangelogs.slice(0, 10);
 ---
 
 <div class='border-t bg-white py-6 text-left sm:py-16 sm:text-center'>
-  <div class='container !max-w-[650px]'>
+  <div class='container max-w-[650px]!'>
     <p class='text-2xl font-bold sm:text-5xl'>
       <img
         src='/images/gifs/rocket.gif'
@@ -40,10 +40,10 @@ const top10Changelogs = allChangelogs.slice(0, 10);
                   href={`/changelog#${changelog.id}`}
                   class='flex flex-col items-start sm:flex-row sm:items-center'
                 >
-                  <span class='flex-shrink-0 pr-0 text-right text-sm tracking-wide text-gray-400 sm:w-[120px] sm:pr-4'>
+                  <span class='shrink-0 pr-0 text-right text-sm tracking-wide text-gray-400 sm:w-[120px] sm:pr-4'>
                     {formattedDate}
                   </span>
-                  <span class='hidden h-3 w-3 flex-shrink-0 rounded-full bg-gray-300 sm:block' />
+                  <span class='hidden h-3 w-3 shrink-0 rounded-full bg-gray-300 sm:block' />
                   <span class='text-balance text-base font-medium text-gray-900 sm:pl-8'>
                     {changelog.frontmatter.title}
                   </span>

src/components/CommandMenu/CommandMenu.tsx

@@ -194,13 +194,13 @@ export function CommandMenu() {
   return (
     <div className="fixed left-0 right-0 top-0 z-50 flex h-full justify-center overflow-y-auto overflow-x-hidden bg-black/50">
       <div className="relative top-0 h-full w-full max-w-lg p-2 sm:mt-20 md:h-auto">
-        <div className="relative rounded-lg bg-white shadow" ref={modalRef}>
+        <div className="relative rounded-lg bg-white shadow-sm" ref={modalRef}>
           <input
             ref={inputRef}
             autoFocus={true}
             type="text"
             value={searchedText}
-            className="w-full rounded-t-md border-b p-4 text-sm focus:bg-gray-50 focus:outline-none"
+            className="w-full rounded-t-md border-b p-4 text-sm focus:bg-gray-50 focus:outline-hidden"
             placeholder="Search roadmaps, guides or pages .."
             autoComplete="off"
             onInput={(e) => {
@@ -249,7 +249,7 @@ export function CommandMenu() {
                     )}
                     <a
                       className={cn(
-                        'flex w-full items-center rounded p-2 text-sm',
+                        'flex w-full items-center rounded-sm p-2 text-sm',
                         counter === activeCounter ? 'bg-gray-100' : '',
                       )}
                       onMouseOver={() => setActiveCounter(counter)}

src/components/CreateTeam/SelectRoadmapModal.tsx

@@ -68,11 +68,11 @@ export function SelectRoadmapModal(props: SelectRoadmapModalProps) {
   );
 
   return (
-    <div className="fixed left-0 right-0 top-0 z-[100] h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50">
+    <div className="fixed left-0 right-0 top-0 z-100 h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50">
       <div className="relative mx-auto h-full w-full max-w-2xl p-4 md:h-auto">
         <div
           ref={popupBodyEl}
-          className="popup-body relative mt-4 overflow-hidden rounded-lg bg-white shadow"
+          className="popup-body relative mt-4 overflow-hidden rounded-lg bg-white shadow-sm"
         >
           <button
             type="button"
@@ -86,7 +86,7 @@ export function SelectRoadmapModal(props: SelectRoadmapModalProps) {
             ref={searchInputEl}
             type="text"
             placeholder="Search roadmaps"
-            className="block w-full border-b px-5 pb-3.5 pt-4 outline-none placeholder:text-gray-400"
+            className="block w-full border-b px-5 pb-3.5 pt-4 outline-hidden placeholder:text-gray-400"
             value={searchText}
             onInput={(e) => setSearchText((e.target as HTMLInputElement).value)}
           />

src/components/CreateTeam/Step0.tsx

@@ -76,7 +76,7 @@ export function Step0(props: Step0Props) {
         {validTeamTypes.map((validTeamType) => (
           <button
             key={validTeamType.value}
-            className={`flex flex-grow flex-col items-center rounded-lg border px-5 pb-10 pt-12 ${
+            className={`flex grow flex-col items-center rounded-lg border px-5 pb-10 pt-12 ${
               validTeamType.value == selectedTeamType
                 ? 'border-gray-400 bg-gray-100'
                 : 'border-gray-300 hover:border-gray-400 hover:bg-gray-50'

src/components/CreateTeam/Step2.tsx

@@ -50,7 +50,7 @@ export function Step2(props: Step2Props) {
             onClick={onNext}
             disabled={teamResourceConfig.length !== 0}
             className={
-              'flex-grow rounded-md border border-gray-300 bg-white px-4 py-2 text-gray-500 hover:border-gray-400 hover:text-black md:flex-auto disabled:opacity-50 disabled:pointer-events-none'
+              'grow rounded-md border border-gray-300 bg-white px-4 py-2 text-gray-500 hover:border-gray-400 hover:text-black md:flex-auto disabled:opacity-50 disabled:pointer-events-none'
             }
           >
             Skip for Now

src/components/CreateTeam/Step3.tsx

@@ -109,7 +109,7 @@ export function Step3(props: Step3Props) {
 
                   setUsers(newUsers);
                 }}
-                className="flex-grow rounded-md border border-gray-200 bg-white px-4 py-2 text-gray-900"
+                className="grow rounded-md border border-gray-200 bg-white px-4 py-2 text-gray-900"
               />
               <RoleDropdown
                 selectedRole={user.role}
@@ -180,7 +180,7 @@ export function Step3(props: Step3Props) {
             onClick={onNext}
             disabled={users.filter((u) => u.email).length !== 0}
             className={
-              'rounded-md flex-grow md:flex-auto border border-gray-300 bg-white px-4 py-2 text-gray-500 hover:border-gray-400 hover:text-black disabled:opacity-50 disabled:pointer-events-none'
+              'rounded-md grow md:flex-auto border border-gray-300 bg-white px-4 py-2 text-gray-500 hover:border-gray-400 hover:text-black disabled:opacity-50 disabled:pointer-events-none'
             }
           >
             Skip for Now

src/components/CreateTeam/UpdateTeamResourceModal.tsx

@@ -148,12 +148,12 @@ export function UpdateTeamResourceModal(props: ProgressMapProps) {
   }, []);
 
   return (
-    <div className="fixed left-0 right-0 top-0 z-[100] h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50">
+    <div className="fixed left-0 right-0 top-0 z-100 h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50">
       <div className="relative mx-auto h-full w-full max-w-4xl p-4 md:h-auto">
         <div
           id={'customized-roadmap'}
           ref={popupBodyEl}
-          className="popup-body relative rounded-lg bg-white shadow"
+          className="popup-body relative rounded-lg bg-white shadow-sm"
         >
           <div
             className={

src/components/CustomRoadmap/EmbedRoadmapModal.tsx

@@ -53,7 +53,7 @@ export function EmbedRoadmapModal(props: ShareRoadmapModalProps) {
       <div className="flex items-center justify-between px-4 pb-4 pt-2">
         <button
           className={cn(
-            'flex h-9 w-full items-center justify-center rounded-md border border-transparent px-4 py-2 text-sm font-medium text-white outline-none',
+            'flex h-9 w-full items-center justify-center rounded-md border border-transparent px-4 py-2 text-sm font-medium text-white outline-hidden',
             {
               'bg-green-500 hover:bg-green-600 focus:bg-green-600': isCopied,
               'bg-gray-900 hover:bg-gray-800 focus:bg-gray-800': !isCopied,

src/components/CustomRoadmap/PersonalRoadmapActionDropdown.tsx

@@ -34,7 +34,7 @@ export function PersonalRoadmapActionDropdown(
       <button
         disabled={false}
         onClick={() => setIsOpen(!isOpen)}
-        className="flex items-center gap-1 rounded-md border border-gray-300 bg-white px-2 py-1.5 text-xs hover:bg-gray-50 focus:outline-none sm:hidden"
+        className="flex items-center gap-1 rounded-md border border-gray-300 bg-white px-2 py-1.5 text-xs hover:bg-gray-50 focus:outline-hidden sm:hidden"
       >
         <MoreVertical size={14} />
         Options
@@ -53,7 +53,7 @@ export function PersonalRoadmapActionDropdown(
                     setIsOpen(false);
                     onUpdateSharing();
                   }}
-                  className="flex w-full cursor-pointer items-center rounded p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
+                  className="flex w-full cursor-pointer items-center rounded-sm p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
                 >
                   <Lock size={14} className="mr-2" />
                   Sharing
@@ -67,7 +67,7 @@ export function PersonalRoadmapActionDropdown(
                     setIsOpen(false);
                     onCustomize();
                   }}
-                  className="flex w-full cursor-pointer items-center rounded p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
+                  className="flex w-full cursor-pointer items-center rounded-sm p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
                 >
                   <Shapes size={14} className="mr-2" />
                   Customize
@@ -81,7 +81,7 @@ export function PersonalRoadmapActionDropdown(
                     setIsOpen(false);
                     onDelete();
                   }}
-                  className="flex w-full cursor-pointer items-center rounded p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
+                  className="flex w-full cursor-pointer items-center rounded-sm p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
                 >
                   <Trash2 size={14} className="mr-2" />
                   Delete

src/components/CustomRoadmap/PersonalRoadmapList.tsx

@@ -176,7 +176,7 @@ function CustomRoadmapItem(props: CustomRoadmapItemProps) {
         <a
           href={editorLink}
           className={
-            'ml-2 flex items-center gap-2 rounded-md border border-gray-300 bg-white px-2.5 py-1.5 text-xs text-black hover:bg-gray-50 focus:outline-none'
+            'ml-2 flex items-center gap-2 rounded-md border border-gray-300 bg-white px-2.5 py-1.5 text-xs text-black hover:bg-gray-50 focus:outline-hidden'
           }
           target={'_blank'}
         >
@@ -186,7 +186,7 @@ function CustomRoadmapItem(props: CustomRoadmapItemProps) {
         <a
           href={`/r/${roadmap?.slug}`}
           className={
-            'ml-2 flex items-center gap-2 rounded-md border border-blue-400 bg-white px-2 py-1.5 text-xs text-blue-600 hover:bg-blue-50 focus:outline-none'
+            'ml-2 flex items-center gap-2 rounded-md border border-blue-400 bg-white px-2 py-1.5 text-xs text-blue-600 hover:bg-blue-50 focus:outline-hidden'
           }
           target={'_blank'}
         >

src/components/CustomRoadmap/RoadmapActionButton.tsx

@@ -32,7 +32,7 @@ export function RoadmapActionButton(props: RoadmapActionButtonProps) {
       {isOpen && (
         <div
           ref={menuRef}
-          className="align-right absolute right-0 top-full z-[9999] mt-1 w-[140px] rounded-md bg-slate-800 px-2 py-2 text-white shadow-md"
+          className="align-right absolute right-0 top-full z-9999 mt-1 w-[140px] rounded-md bg-slate-800 px-2 py-2 text-white shadow-md"
         >
           <ul>
             {onCustomize && (
@@ -42,7 +42,7 @@ export function RoadmapActionButton(props: RoadmapActionButtonProps) {
                     setIsOpen(false);
                     onCustomize();
                   }}
-                  className="flex w-full cursor-pointer items-center rounded p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
+                  className="flex w-full cursor-pointer items-center rounded-sm p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
                 >
                   <PenSquare size={14} className="mr-2" />
                   Edit
@@ -56,7 +56,7 @@ export function RoadmapActionButton(props: RoadmapActionButtonProps) {
                     setIsOpen(false);
                     onUpdateSharing();
                   }}
-                  className="flex w-full cursor-pointer items-center rounded p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
+                  className="flex w-full cursor-pointer items-center rounded-sm p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
                 >
                   <Lock size={14} className="mr-2" />
                   Sharing
@@ -70,7 +70,7 @@ export function RoadmapActionButton(props: RoadmapActionButtonProps) {
                     setIsOpen(false);
                     onDelete();
                   }}
-                  className="flex w-full cursor-pointer items-center rounded p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
+                  className="flex w-full cursor-pointer items-center rounded-sm p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
                 >
                   <Trash2 size={14} className="mr-2" />
                   Delete

src/components/CustomRoadmap/ShareRoadmapModal.tsx

@@ -128,7 +128,7 @@ export function ShareRoadmapModal(props: ShareRoadmapModalProps) {
       <div className="flex items-center justify-between p-4">
         <button
           disabled={isLoading}
-          className="flex h-9 items-center rounded-md border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-black outline-none hover:border-gray-300 hover:bg-gray-50 focus:border-gray-300 focus:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-70"
+          className="flex h-9 items-center rounded-md border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-black outline-hidden hover:border-gray-300 hover:bg-gray-50 focus:border-gray-300 focus:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-70"
           onClick={onClose}
         >
           {isLoading ? (
@@ -141,7 +141,7 @@ export function ShareRoadmapModal(props: ShareRoadmapModalProps) {
           )}
         </button>
         <button
-          className="flex h-9 items-center justify-center rounded-md border border-transparent bg-gray-900 px-4 py-2 text-sm font-medium text-white outline-none hover:bg-gray-800 focus:bg-gray-800"
+          className="flex h-9 items-center justify-center rounded-md border border-transparent bg-gray-900 px-4 py-2 text-sm font-medium text-white outline-hidden hover:bg-gray-800 focus:bg-gray-800"
           onClick={handleCopy}
         >
           {isCopied ? (

src/components/CustomRoadmap/SharedRoadmapList.tsx

@@ -92,7 +92,7 @@ export function SharedRoadmapList(props: SharedRoadmapListProps) {
                       >
                         <a
                           href={`/r/=${roadmap?.slug}`}
-                          className="group inline-grid w-full grid-cols-[auto,16px] items-center justify-between gap-2 px-3 py-2 text-sm text-gray-600 transition-colors hover:bg-gray-100 hover:text-black"
+                          className="group inline-grid w-full grid-cols-[auto_16px] items-center justify-between gap-2 px-3 py-2 text-sm text-gray-600 transition-colors hover:bg-gray-100 hover:text-black"
                           target={'_blank'}
                         >
                           <span className="w-full truncate">

src/components/CustomRoadmap/Showcase/SubmitShowcaseWarning.tsx

@@ -79,7 +79,7 @@ export function SubmitShowcaseWarning(props: SubmitShowcaseWarningProps) {
 
         <div className="mt-4 grid grid-cols-2 gap-2">
           <button
-            className="flex-grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center text-sm hover:bg-gray-300"
+            className="grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center text-sm hover:bg-gray-300"
             onClick={onClose}
             disabled={submit.isPending}
           >

src/components/Dashboard/DashboardAiRoadmaps.tsx

@@ -62,7 +62,7 @@ export function DashboardAiRoadmaps(props: DashboardAiRoadmapsProps) {
               <a
                 key={roadmap.id}
                 href={`/ai/${roadmap.slug}`}
-                className="relative truncate rounded-md border bg-white p-2.5 text-left text-sm shadow-sm hover:border-gray-400 hover:bg-gray-50"
+                className="relative truncate rounded-md border bg-white p-2.5 text-left text-sm shadow-xs hover:border-gray-400 hover:bg-gray-50"
               >
                 {roadmap.title}
               </a>

src/components/Dashboard/DashboardCardLink.tsx

@@ -15,7 +15,7 @@ export function DashboardCardLink(props: DashboardCardLinkProps) {
   return (
     <a
       className={cn(
-        'relative mt-4 flex min-h-[220px] flex-col justify-end rounded-lg border border-gray-300 bg-gradient-to-br from-white to-gray-50 py-5 px-6 hover:border-gray-400 hover:from-white hover:to-gray-100',
+        'relative mt-4 flex min-h-[220px] flex-col justify-end rounded-lg border border-gray-300 bg-linear-to-br from-white to-gray-50 py-5 px-6 hover:border-gray-400 hover:from-white hover:to-gray-100',
         className,
       )}
       href={href}

src/components/Dashboard/DashboardCustomProgressCard.tsx

@@ -36,7 +36,7 @@ export function DashboardCustomProgressCard(props: DashboardCustomProgressCardPr
   return (
     <a
       href={url}
-      className="group relative flex min-h-[80px] w-full flex-col justify-between overflow-hidden rounded-md border bg-white p-3 text-left text-sm shadow-sm transition-all hover:border-gray-400 hover:bg-gray-50"
+      className="group relative flex min-h-[80px] w-full flex-col justify-between overflow-hidden rounded-md border bg-white p-3 text-left text-sm shadow-xs transition-all hover:border-gray-400 hover:bg-gray-50"
     >
       <h4 className="truncate font-medium text-gray-900">{resourceTitle}</h4>
 

src/components/Dashboard/DashboardProgressCard.tsx

@@ -38,7 +38,7 @@ export function DashboardProgressCard(props: DashboardProgressCardProps) {
       key={resourceId}
       className="group relative flex w-full items-center justify-between overflow-hidden rounded-md border border-gray-300 bg-white px-3 py-2 text-left text-sm transition-all hover:border-gray-400"
     >
-      <span className="flex-grow truncate">{resourceTitle}</span>
+      <span className="grow truncate">{resourceTitle}</span>
       <span className="text-xs text-gray-400">
         {parseInt(progressPercentage, 10)}%
       </span>

src/components/Dashboard/DashboardProjectCard.tsx

@@ -25,7 +25,7 @@ export function DashboardProjectCard(props: DashboardProjectCardProps) {
     >
       <span
         className={cn(
-          'flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full',
+          'flex h-5 w-5 shrink-0 items-center justify-center rounded-full',
           {
             'border border-green-500 bg-green-500 group-hover:border-green-600 group-hover:bg-green-600':
               status === 'submitted',
@@ -41,8 +41,8 @@ export function DashboardProjectCard(props: DashboardProjectCardProps) {
           />
         )}
       </span>
-      <span className="flex-grow truncate group-hover:underline">{title.replace(/(System)|(Service)/, '')}</span>
+      <span className="grow truncate group-hover:underline">{title.replace(/(System)|(Service)/, '')}</span>
-      <span className="flex-shrink-0 bg-transparent text-xs text-gray-400 no-underline">
+      <span className="shrink-0 bg-transparent text-xs text-gray-400 no-underline">
         {!!startedAt &&
           status === 'started' &&
           getRelativeTimeString(startedAt)}

src/components/Dashboard/DashboardTeamRoadmaps.tsx

@@ -206,7 +206,7 @@ export function DashboardTeamRoadmaps(props: DashboardTeamRoadmapsProps) {
   const roadmapHeading = (
     <div className="mb-3 flex h-[20px] items-center justify-between gap-2 text-xs">
       <h2 className="uppercase text-gray-400">Roadmaps</h2>
-      <span className="mx-3 h-[1px] flex-grow bg-gray-200" />
+      <span className="mx-3 h-[1px] grow bg-gray-200" />
       {canManageCurrentTeam && (
         <a
           href={`/team/roadmaps?t=${teamId}`}

src/components/Dashboard/EmptyStackMessage.tsx

@@ -17,7 +17,7 @@ export function EmptyStackMessage(props: EmptyStackMessageProps) {
     <div className="absolute inset-0 flex items-center justify-center rounded-md bg-black/50">
       <div
         className={cn(
-          'flex max-w-[200px] flex-col items-center justify-center rounded-md bg-white p-4 shadow-sm',
+          'flex max-w-[200px] flex-col items-center justify-center rounded-md bg-white p-4 shadow-xs',
           bodyClassName,
         )}
       >

src/components/Dashboard/TeamDashboard.tsx

@@ -111,7 +111,7 @@ export function TeamDashboard(props: TeamDashboardProps) {
 
       <h2 className="mb-3 mt-6 flex h-[20px] items-center justify-between text-xs uppercase text-gray-400">
         Team Members
-        <span className="flex-grow h-[1px] bg-gray-200 mx-3" />
+        <span className="grow h-[1px] bg-gray-200 mx-3" />
         {canManageCurrentTeam && (
           <a
             href={`/team/members?t=${teamId}`}

src/components/DeleteAccount/DeleteAccount.astro

@@ -10,7 +10,7 @@ import DeleteAccountPopup from "./DeleteAccountPopup.astro";
 
 <button
   data-popup='delete-account-popup'
-  class="mt-4 w-full rounded-lg bg-red-600 py-2 text-base font-regular text-white outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-1"
+  class="mt-4 w-full rounded-lg bg-red-600 py-2 text-base font-regular text-white outline-hidden focus:ring-2 focus:ring-red-500 focus:ring-offset-1"
 >
   Delete Account
 </button>

src/components/DeleteAccount/DeleteAccountForm.tsx

@@ -53,7 +53,7 @@ export function DeleteAccountForm() {
           type="text"
           name="delete-account"
           id="delete-account"
-          className="mt-2 block w-full rounded-md border border-gray-300 px-3 py-2 outline-none placeholder:text-gray-400 focus:border-gray-400"
+          className="mt-2 block w-full rounded-md border border-gray-300 px-3 py-2 outline-hidden placeholder:text-gray-400 focus:border-gray-400"
           placeholder={'Type "delete" to confirm'}
           required
           autoFocus
@@ -72,14 +72,14 @@ export function DeleteAccountForm() {
           type="button"
           disabled={isLoading}
           onClick={handleClosePopup}
-          className="flex-grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center"
+          className="grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center"
         >
           Cancel
         </button>
         <button
           type="submit"
           disabled={isLoading || confirmationText.toUpperCase() !== 'DELETE'}
-          className="flex-grow cursor-pointer rounded-lg bg-red-500 py-2 text-white disabled:opacity-40"
+          className="grow cursor-pointer rounded-lg bg-red-500 py-2 text-white disabled:opacity-40"
         >
           {isLoading ? 'Please wait ..' : 'Confirm'}
         </button>

src/components/DeleteTeamPopup.tsx

@@ -73,7 +73,7 @@ export function DeleteTeamPopup(props: DeleteTeamPopupProps) {
         <div className="relative h-full w-full max-w-md p-4 md:h-auto">
           <div
             ref={popupBodyEl}
-            className="popup-body relative rounded-lg bg-white p-4 shadow"
+            className="popup-body relative rounded-lg bg-white p-4 shadow-sm"
           >
             <h2 className="text-2xl font-semibold text-black">Delete Team</h2>
             <p className="text-gray-500">
@@ -90,7 +90,7 @@ export function DeleteTeamPopup(props: DeleteTeamPopupProps) {
                   type="text"
                   name="delete-account"
                   id="delete-account"
-                  className="mt-2 block w-full rounded-md border border-gray-300 px-3 py-2 outline-none placeholder:text-gray-400 focus:border-gray-400"
+                  className="mt-2 block w-full rounded-md border border-gray-300 px-3 py-2 outline-hidden placeholder:text-gray-400 focus:border-gray-400"
                   placeholder={'Type "delete" to confirm'}
                   required
                   autoFocus
@@ -111,7 +111,7 @@ export function DeleteTeamPopup(props: DeleteTeamPopupProps) {
                   type="button"
                   disabled={isLoading}
                   onClick={handleClosePopup}
-                  className="flex-grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center"
+                  className="grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center"
                 >
                   Cancel
                 </button>
@@ -120,7 +120,7 @@ export function DeleteTeamPopup(props: DeleteTeamPopupProps) {
                   disabled={
                     isLoading || confirmationText.toUpperCase() !== 'DELETE'
                   }
-                  className="flex-grow cursor-pointer rounded-lg bg-red-500 py-2 text-white disabled:opacity-40"
+                  className="grow cursor-pointer rounded-lg bg-red-500 py-2 text-white disabled:opacity-40"
                 >
                   {isLoading ? 'Please wait ..' : 'Confirm'}
                 </button>

src/components/DiscoverRoadmaps/DiscoverRoadmapSorting.tsx

@@ -41,7 +41,7 @@ export function DiscoverRoadmapSorting(props: DiscoverRoadmapSortingProps) {
 
   return (
     <div
-      className="min-auto relative flex flex-shrink-0 sm:min-w-[140px]"
+      className="min-auto relative flex shrink-0 sm:min-w-[140px]"
       ref={dropdownRef}
     >
       <button

src/components/DiscoverRoadmaps/SearchRoadmap.tsx

@@ -53,7 +53,7 @@ export function SearchRoadmap(props: SearchRoadmapProps) {
           type="text"
           minLength={3}
           placeholder="Type 3 or more characters to search..."
-          className="w-full rounded-md border border-gray-200 px-3 py-2 pl-9 text-sm transition-colors focus:border-black focus:outline-none"
+          className="w-full rounded-md border border-gray-200 px-3 py-2 pl-9 text-sm transition-colors focus:border-black focus:outline-hidden"
           value={term}
           onChange={(e) => setTerm(e.target.value)}
         />
@@ -64,7 +64,7 @@ export function SearchRoadmap(props: SearchRoadmapProps) {
         )}
       </form>
       {total > 0 && (
-        <p className="hidden flex-shrink-0 text-sm text-gray-500 sm:block">
+        <p className="hidden shrink-0 text-sm text-gray-500 sm:block">
           {Intl.NumberFormat('en-US', {
             notation: 'compact',
           }).format(total)}{' '}

src/components/ExploreAIRoadmap/AIRoadmapsList.tsx

@@ -35,7 +35,7 @@ export function AIRoadmapsList(props: AIRoadmapsListProps) {
             className="flex min-h-[95px] flex-col rounded-md border transition-colors hover:bg-gray-100"
             target={'_blank'}
           >
-            <h2 className="flex-grow px-2.5 py-2.5 text-base font-medium leading-tight">
+            <h2 className="grow px-2.5 py-2.5 text-base font-medium leading-tight">
               {roadmap.title}
             </h2>
             <div className="flex items-center justify-between gap-2 px-2.5 py-2">

src/components/ExploreAIRoadmap/ExploreAISearch.tsx

@@ -46,7 +46,7 @@ export function ExploreAISearch(props: ExploreAISearchProps) {
           name="search"
           type="text"
           placeholder="Type 3 or more characters to search..."
-          className="w-full rounded-md border border-gray-200 px-3 py-2 pl-9 text-sm transition-colors focus:border-black focus:outline-none"
+          className="w-full rounded-md border border-gray-200 px-3 py-2 pl-9 text-sm transition-colors focus:border-black focus:outline-hidden"
           value={term}
           onChange={(e) => setTerm(e.target.value)}
         />
@@ -57,7 +57,7 @@ export function ExploreAISearch(props: ExploreAISearchProps) {
         )}
       </div>
       {total > 0 && (
-        <p className="flex-shrink-0 text-sm text-gray-500 hidden sm:block">
+        <p className="shrink-0 text-sm text-gray-500 hidden sm:block">
           {Intl.NumberFormat('en-US', {
             notation: 'compact',
           }).format(total)}{' '}

src/components/ExploreAIRoadmap/ExploreAISorting.tsx

@@ -37,7 +37,7 @@ export function ExploreAISorting(props: ExploreAISortingProps) {
 
   return (
     <div
-      className="min-auto relative flex flex-shrink-0 sm:min-w-[140px]"
+      className="min-auto relative flex shrink-0 sm:min-w-[140px]"
       ref={dropdownRef}
     >
       <button

src/components/FeaturedGuides.astro

@@ -31,7 +31,7 @@ const sortedGuides: (QuestionGroupType | GuideFileType)[] = [
 
   <a
     href='/guides'
-    class='hidden rounded-full bg-gradient-to-r from-slate-600 to-black px-3 py-2 text-xs font-medium text-white transition-colors hover:from-blue-600 hover:to-blue-800 sm:inline'
+    class='hidden rounded-full bg-linear-to-r from-slate-600 to-black px-3 py-2 text-xs font-medium text-white transition-colors hover:from-blue-600 hover:to-blue-800 sm:inline'
   >
     View All Guides &rarr;
   </a>

src/components/FeaturedVideos.astro

@@ -19,7 +19,7 @@ const { heading, videos } = Astro.props;
 
   <a
     href='/videos'
-    class='hidden sm:inline transition-colors py-2 px-3 text-xs font-medium rounded-full bg-gradient-to-r from-slate-600 to-black hover:from-blue-600 hover:to-blue-800 text-white'
+    class='hidden sm:inline transition-colors py-2 px-3 text-xs font-medium rounded-full bg-linear-to-r from-slate-600 to-black hover:from-blue-600 hover:to-blue-800 text-white'
   >
     View All Videos &rarr;
   </a>

src/components/Feedback/SubmitFeedbackPopup.tsx

@@ -68,7 +68,7 @@ export function SubmitFeedbackPopup(props: SubmitFeedbackPopupProps) {
       <div className="relative h-full w-full max-w-md p-4 md:h-auto">
         <div
           ref={popupBodyEl}
-          className="popup-body relative rounded-lg bg-white p-4 shadow"
+          className="popup-body relative rounded-lg bg-white p-4 shadow-sm"
         >
           {!isSuccess && (
             <>
@@ -84,7 +84,7 @@ export function SubmitFeedbackPopup(props: SubmitFeedbackPopupProps) {
                     ref={inputEl}
                     name="submit-feedback"
                     id="submit-feedback"
-                    className="mt-2 block min-h-[150px] w-full resize-none rounded-md border border-gray-300 px-3 py-2 outline-none placeholder:text-gray-400"
+                    className="mt-2 block min-h-[150px] w-full resize-none rounded-md border border-gray-300 px-3 py-2 outline-hidden placeholder:text-gray-400"
                     placeholder="Enter your feedback"
                     required
                     autoFocus
@@ -105,14 +105,14 @@ export function SubmitFeedbackPopup(props: SubmitFeedbackPopupProps) {
                     type="button"
                     disabled={isLoading}
                     onClick={handleClosePopup}
-                    className="flex-grow cursor-pointer rounded-md bg-gray-200 py-2 text-center"
+                    className="grow cursor-pointer rounded-md bg-gray-200 py-2 text-center"
                   >
                     Cancel
                   </button>
                   <button
                     disabled={isLoading}
                     type="submit"
-                    className="flex-grow cursor-pointer rounded-md bg-black py-2 text-white disabled:opacity-40"
+                    className="grow cursor-pointer rounded-md bg-black py-2 text-white disabled:opacity-40"
                   >
                     {isLoading ? 'Please wait ..' : 'Send'}
                   </button>
@@ -133,7 +133,7 @@ export function SubmitFeedbackPopup(props: SubmitFeedbackPopupProps) {
               <button
                 type="button"
                 onClick={handleClosePopup}
-                className="mt-4 w-full flex-grow cursor-pointer rounded-lg bg-black py-2 text-center text-white disabled:opacity-40"
+                className="mt-4 w-full grow cursor-pointer rounded-lg bg-black py-2 text-center text-white disabled:opacity-40"
               >
                 Close
               </button>

src/components/FrameRenderer/ProgressNudge.tsx

@@ -88,7 +88,7 @@ export function ProgressNudge(props: ProgressNudgeProps) {
             }}
             className="group relative flex items-center gap-2 rounded-full bg-stone-900 px-3 text-sm text-yellow-400"
           >
-            <Calendar className="h-4 w-4 flex-shrink-0" strokeWidth={2.5} />
+            <Calendar className="h-4 w-4 shrink-0" strokeWidth={2.5} />
           </button>
         )}
         <button
@@ -97,7 +97,7 @@ export function ProgressNudge(props: ProgressNudgeProps) {
           }}
           className="group relative flex items-center gap-2 rounded-full bg-stone-900 px-3 text-sm text-yellow-400"
         >
-          <X className="h-4 w-4 flex-shrink-0" strokeWidth={2.5} />
+          <X className="h-4 w-4 shrink-0" strokeWidth={2.5} />
         </button>
       </div>
     </>

src/components/Friends/EmptyFriends.tsx

@@ -28,7 +28,7 @@ export function EmptyFriends(props: EmptyFriendsProps) {
             }}
             type="text"
             value={befriendUrl}
-            className="w-full border-none bg-transparent px-1.5 outline-none"
+            className="w-full border-none bg-transparent px-1.5 outline-hidden"
             readOnly
           />
           <button

src/components/Friends/FriendProgressItem.tsx

@@ -98,7 +98,7 @@ export function FriendProgressItem(props: FriendProgressItemProps) {
                         progress?.renderer,
                       )
                     }
-                    className="group relative overflow-hidden rounded-md border p-2 hover:border-gray-300 hover:text-black focus:outline-none"
+                    className="group relative overflow-hidden rounded-md border p-2 hover:border-gray-300 hover:text-black focus:outline-hidden"
                     key={progress.resourceId}
                   >
                     <span className="relative z-10 flex items-center justify-between text-sm">
@@ -186,7 +186,7 @@ export function FriendProgressItem(props: FriendProgressItemProps) {
         {friend.status === 'rejected' && (
           <>
             <div
-              className={'flex w-full flex-grow items-center justify-center'}
+              className={'flex w-full grow items-center justify-center'}
             >
               <span className=" flex flex-col items-center text-red-500">
                 <DeleteUserIcon additionalClasses="mr-2 h-8 w-8 mb-1" />
@@ -214,7 +214,7 @@ export function FriendProgressItem(props: FriendProgressItemProps) {
         {friend.status === 'got_rejected' && (
           <>
             <div
-              className={'flex w-full flex-grow items-center justify-center'}
+              className={'flex w-full grow items-center justify-center'}
             >
               <span className=" flex flex-col items-center text-sm text-red-500">
                 <DeleteUserIcon additionalClasses="mr-2 h-8 w-8 mb-1" />
@@ -242,7 +242,7 @@ export function FriendProgressItem(props: FriendProgressItemProps) {
         {friend.status === 'sent' && (
           <>
             <div
-              className={'flex w-full flex-grow items-center justify-center'}
+              className={'flex w-full grow items-center justify-center'}
             >
               <span className=" flex flex-col items-center text-green-500">
                 <AddedUserIcon additionalClasses="mr-2 h-8 w-8 mb-1" />
@@ -296,7 +296,7 @@ export function FriendProgressItem(props: FriendProgressItemProps) {
           <>
             <div
               className={
-                'flex w-full flex-grow flex-col items-center justify-center px-4'
+                'flex w-full grow flex-col items-center justify-center px-4'
               }
             >
               <AddUserIcon additionalClasses="mr-2 h-8 w-8 mb-1 text-green-500" />

src/components/Friends/InviteFriendPopup.tsx

@@ -27,7 +27,7 @@ export function InviteFriendPopup(props: InviteFriendPopupProps) {
       <div className="relative h-full w-full max-w-md p-4 md:h-auto">
         <div
           ref={popupBodyRef}
-          className="popup-body relative rounded-lg bg-white p-4 shadow"
+          className="popup-body relative rounded-lg bg-white p-4 shadow-sm"
         >
           <h3 className="mb-1.5 text-xl font-medium sm:text-2xl">Invite URL</h3>
           <p className="mb-3 hidden text-sm leading-none text-gray-400 sm:block">
@@ -37,7 +37,7 @@ export function InviteFriendPopup(props: InviteFriendPopupProps) {
           <div className="mt-4 flex flex-col gap-2 sm:mt-4">
             <input
               readOnly={true}
-              className="mt-2 block w-full rounded-md border border-gray-300 px-3 py-2 outline-none placeholder:text-gray-400 focus:border-gray-400"
+              className="mt-2 block w-full rounded-md border border-gray-300 px-3 py-2 outline-hidden placeholder:text-gray-400 focus:border-gray-400"
               value={befriendUrl}
               onClick={(e: MouseEvent<HTMLInputElement>) => {
                 (e?.target as HTMLInputElement)?.select();

src/components/GenerateRoadmap/AITermSuggestionInput.tsx

@@ -176,7 +176,7 @@ export function AITermSuggestionInput(props: AITermSuggestionInputProps) {
         type="text"
         value={defaultValue}
         className={cn(
-          'w-full rounded-md border border-gray-400 px-3 py-2.5 pr-8 transition-colors focus:border-black focus:outline-none',
+          'w-full rounded-md border border-gray-400 px-3 py-2.5 pr-8 transition-colors focus:border-black focus:outline-hidden',
           inputClassName,
         )}
         placeholder={placeholder}
@@ -240,7 +240,7 @@ export function AITermSuggestionInput(props: AITermSuggestionInputProps) {
         searchResults.length > 0 &&
         searchedText.length > 0 && (
           <div
-            className="absolute top-full z-50 mt-1 w-full rounded-md border bg-white p-1 shadow"
+            className="absolute top-full z-50 mt-1 w-full rounded-md border bg-white p-1 shadow-sm"
             ref={dropdownRef}
           >
             <div className="flex flex-col">
@@ -250,7 +250,7 @@ export function AITermSuggestionInput(props: AITermSuggestionInputProps) {
                     key={result?._id}
                     type="button"
                     className={cn(
-                      'flex w-full items-start rounded p-2 text-left text-sm',
+                      'flex w-full items-start rounded-sm p-2 text-left text-sm',
                       counter === activeCounter ? 'bg-gray-100' : '',
                     )}
                     onMouseOver={() => setActiveCounter(counter)}

src/components/GenerateRoadmap/GenerateRoadmap.tsx

@@ -507,7 +507,7 @@ export function GenerateRoadmap(props: GenerateRoadmapProps) {
         />
       )}
 
-      <section className="flex flex-grow flex-col bg-gray-100">
+      <section className="flex grow flex-col bg-gray-100">
         <div className="flex items-center justify-center border-b bg-white py-3 sm:py-6">
           {isLoading && (
             <span className="flex items-center gap-2 rounded-full bg-black px-3 py-1 text-white">
@@ -516,7 +516,7 @@ export function GenerateRoadmap(props: GenerateRoadmapProps) {
             </span>
           )}
           {!isLoading && (
-            <div className="container flex flex-grow flex-col items-start">
+            <div className="container flex grow flex-col items-start">
               <AIRoadmapAlert />
               {isKeyOnly && isAuthenticatedUser && (
                 <div className="flex flex-row gap-4">
@@ -606,7 +606,7 @@ export function GenerateRoadmap(props: GenerateRoadmapProps) {
                 <button
                   type={'submit'}
                   className={cn(
-                    'flex min-w-[127px] flex-shrink-0 items-center justify-center gap-2 rounded-md bg-black px-4 py-2 text-white',
+                    'flex min-w-[127px] shrink-0 items-center justify-center gap-2 rounded-md bg-black px-4 py-2 text-white',
                     'disabled:cursor-not-allowed disabled:opacity-50',
                   )}
                   onClick={(e) => {
@@ -732,7 +732,7 @@ export function GenerateRoadmap(props: GenerateRoadmapProps) {
           />
           {!isAuthenticatedUser && (
             <div className="absolute bottom-0 left-0 right-0">
-              <div className="h-80 w-full bg-gradient-to-t from-gray-100 to-transparent" />
+              <div className="h-80 w-full bg-linear-to-t from-gray-100 to-transparent" />
               <div className="bg-gray-100">
                 <div className="mx-auto max-w-[600px] flex-col items-center justify-center bg-gray-100 px-5 pt-px">
                   <div className="mt-8 text-center">

src/components/GenerateRoadmap/OpenAISettings.tsx

@@ -32,7 +32,7 @@ export function OpenAISettings(props: OpenAISettingsProps) {
     <div className="p-4">
       <button
         onClick={onBack}
-        className="mb-5 flex items-center gap-1.5 text-sm leading-none opacity-40 transition-opacity hover:opacity-100 focus:outline-none"
+        className="mb-5 flex items-center gap-1.5 text-sm leading-none opacity-40 transition-opacity hover:opacity-100 focus:outline-hidden"
       >
         <ChevronLeft size={16} />
         Back to options
@@ -97,7 +97,7 @@ export function OpenAISettings(props: OpenAISettingsProps) {
             name="openai-api-key"
             id="openai-api-key"
             className={cn(
-              'block w-full rounded-md border border-gray-300 px-3 py-2 text-gray-800 transition-colors focus:border-black focus:outline-none',
+              'block w-full rounded-md border border-gray-300 px-3 py-2 text-gray-800 transition-colors focus:border-black focus:outline-hidden',
               {
                 'border-red-500 bg-red-100 focus:border-red-500': error,
               },

src/components/GenerateRoadmap/PayToBypass.tsx

@@ -22,7 +22,7 @@ export function PayToBypass(props: PayToBypassProps) {
     <div className="p-4">
       <button
         onClick={onBack}
-        className="mb-5 flex items-center gap-1.5 text-sm leading-none opacity-40 transition-opacity hover:opacity-100 focus:outline-none"
+        className="mb-5 flex items-center gap-1.5 text-sm leading-none opacity-40 transition-opacity hover:opacity-100 focus:outline-hidden"
       >
         <ChevronLeft size={16} />
         Back to options
@@ -46,7 +46,7 @@ export function PayToBypass(props: PayToBypassProps) {
             id={userId}
             name={userId}
             type="text"
-            className="block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
+            className="block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-xs outline-hidden placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
             value={user?.id}
             readOnly
           />
@@ -59,7 +59,7 @@ export function PayToBypass(props: PayToBypassProps) {
             id={nameId}
             name={nameId}
             type="text"
-            className="block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
+            className="block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-xs outline-hidden placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
             value={user?.name}
             readOnly
           />
@@ -72,7 +72,7 @@ export function PayToBypass(props: PayToBypassProps) {
             id={emailId}
             name={emailId}
             type="email"
-            className="block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
+            className="block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-xs outline-hidden placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
             value={user?.email}
             readOnly
           />
@@ -90,7 +90,7 @@ export function PayToBypass(props: PayToBypassProps) {
             name={amountId}
             type="text"
             required
-            className="block w-full rounded-lg border p-3 py-2 shadow-sm outline-none placeholder:text-sm placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
+            className="block w-full rounded-lg border p-3 py-2 shadow-xs outline-hidden placeholder:text-sm placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
             placeholder="How much are you willing to pay for this?"
           />
         </div>
@@ -105,7 +105,7 @@ export function PayToBypass(props: PayToBypassProps) {
             id={roadmapCountId}
             name={roadmapCountId}
             required
-            className="placeholder-text-gray-400 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-sm focus:ring-2 focus:ring-black focus:ring-offset-1"
+            className="placeholder-text-gray-400 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-xs outline-hidden placeholder:text-sm focus:ring-2 focus:ring-black focus:ring-offset-1"
             placeholder="How many roadmaps you will be generating (daily, or monthly)?"
           />
         </div>
@@ -117,7 +117,7 @@ export function PayToBypass(props: PayToBypassProps) {
             id={usageId}
             name={usageId}
             required
-            className="placeholder-text-gray-400 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-sm focus:ring-2 focus:ring-black focus:ring-offset-1"
+            className="placeholder-text-gray-400 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-xs outline-hidden placeholder:text-sm focus:ring-2 focus:ring-black focus:ring-offset-1"
             placeholder="How will you be using this"
           />
         </div>
@@ -131,7 +131,7 @@ export function PayToBypass(props: PayToBypassProps) {
           <textarea
             id={feedbackId}
             name={feedbackId}
-            className="placeholder-text-gray-400 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-sm focus:ring-2 focus:ring-black focus:ring-offset-1"
+            className="placeholder-text-gray-400 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-xs outline-hidden placeholder:text-sm focus:ring-2 focus:ring-black focus:ring-offset-1"
             placeholder="Do you have any feedback?"
           />
         </div>

src/components/GenerateRoadmap/ReferYourFriend.tsx

@@ -32,7 +32,7 @@ export function ReferYourFriend(props: ReferYourFriendProps) {
     <div className="p-4">
       <button
         onClick={onBack}
-        className="mb-5 flex items-center gap-1.5 text-sm leading-none opacity-40 transition-opacity hover:opacity-100 focus:outline-none"
+        className="mb-5 flex items-center gap-1.5 text-sm leading-none opacity-40 transition-opacity hover:opacity-100 focus:outline-hidden"
       >
         <ChevronLeft size={16} />
         Back to options
@@ -49,7 +49,7 @@ export function ReferYourFriend(props: ReferYourFriendProps) {
       <label className="mt-4 flex flex-col gap-2">
         <input
           ref={inputRef}
-          className="w-full rounded-md border bg-gray-100 p-2 px-2.5 text-gray-700 focus:outline-none"
+          className="w-full rounded-md border bg-gray-100 p-2 px-2.5 text-gray-700 focus:outline-hidden"
           value={referralLink}
           readOnly={true}
           onClick={handleCopy}

src/components/GenerateRoadmap/RoadmapTopicDetail.tsx

@@ -124,7 +124,7 @@ export function RoadmapTopicDetail(props: RoadmapTopicDetailProps) {
   const openAIKey = getOpenAIKey();
 
   return (
-    <div className={'relative z-[92]'}>
+    <div className={'relative z-92'}>
       <div
         ref={topicRef}
         tabIndex={0}

src/components/GetStarted/RoadmapCard.tsx

@@ -20,7 +20,7 @@ export function RoadmapCard(props: RoadmapCardProps) {
 
   if (isUpcoming) {
     return (
-      <div className="group relative block rounded-xl border border-gray-300 bg-gradient-to-br from-gray-100 to-gray-50 p-5 overflow-hidden">
+      <div className="group relative block rounded-xl border border-gray-300 bg-linear-to-br from-gray-100 to-gray-50 p-5 overflow-hidden">
         <div className="mb-2 sm:mb-5 flex flex-row items-center">
           <div className="flex h-7 w-7 sm:h-9 sm:w-9 items-center justify-center rounded-full bg-gray-900 text-white">
             <Icon className="h-3 sm:h-5" />
@@ -52,8 +52,8 @@ export function RoadmapCard(props: RoadmapCardProps) {
     <a
       href={link}
       target={'_blank'}
-      className="group relative block rounded-xl border border-gray-300 bg-gradient-to-br from-gray-100 to-gray-50
+      className="group relative block rounded-xl border border-gray-300 bg-linear-to-br from-gray-100 to-gray-50
-       p-3.5 sm:p-5 transition-colors duration-200 ease-in-out hover:cursor-pointer hover:border-black/30 hover:bg-gray-50/70 hover:shadow-sm"
+       p-3.5 sm:p-5 transition-colors duration-200 ease-in-out hover:cursor-pointer hover:border-black/30 hover:bg-gray-50/70 hover:shadow-xs"
     >
       <div className="mb-2 sm:mb-5 flex flex-row items-center">
         <div className="flex h-7 w-7 sm:h-9 sm:w-9 items-center justify-center rounded-full bg-gray-900 text-white">

src/components/GetStarted/RoadmapMultiCard.tsx

@@ -16,7 +16,7 @@ export function RoadmapMultiCard(props: RoadmapMultiCardProps) {
   const { roadmaps, description, secondaryRoadmaps, secondaryDescription } = props;
   return (
     <div
-      className="relative flex flex-col overflow-hidden rounded-xl border border-gray-300 bg-gradient-to-br from-gray-100
+      className="relative flex flex-col overflow-hidden rounded-xl border border-gray-300 bg-linear-to-br from-gray-100
        to-gray-50 ease-in-out"
     >
       <div className="flex flex-col divide-y">
@@ -25,7 +25,7 @@ export function RoadmapMultiCard(props: RoadmapMultiCardProps) {
             target={'_blank'}
             key={index}
             href={roadmap.link}
-            className="group text-sm sm:text-base flex w-full items-center justify-between gap-2 bg-gradient-to-br from-gray-100 to-gray-50 px-4 sm:px-5 py-2 transition-colors duration-200"
+            className="group text-sm sm:text-base flex w-full items-center justify-between gap-2 bg-linear-to-br from-gray-100 to-gray-50 px-4 sm:px-5 py-2 transition-colors duration-200"
           >
             {roadmap.title}
             <ExternalLink className="lucide lucide-external-link h-4 text-gray-300 transition group-hover:text-gray-700" />
@@ -33,7 +33,7 @@ export function RoadmapMultiCard(props: RoadmapMultiCardProps) {
         ))}
       </div>
 
-      <p className="flex-grow bg-gray-200/70 p-4 sm:p-5 text-sm text-gray-500">
+      <p className="grow bg-gray-200/70 p-4 sm:p-5 text-sm text-gray-500">
         {description}
       </p>
 
@@ -44,7 +44,7 @@ export function RoadmapMultiCard(props: RoadmapMultiCardProps) {
               target={'_blank'}
               key={index}
               href={roadmap.link}
-              className="group text-sm sm:text-base flex w-full items-center justify-between gap-2 bg-gradient-to-br from-gray-100 to-gray-50 px-5 py-2 transition-colors duration-200"
+              className="group text-sm sm:text-base flex w-full items-center justify-between gap-2 bg-linear-to-br from-gray-100 to-gray-50 px-5 py-2 transition-colors duration-200"
             >
               {roadmap.title}
               <ExternalLink className="lucide lucide-external-link h-4 text-gray-300 transition group-hover:text-gray-700" />
@@ -54,7 +54,7 @@ export function RoadmapMultiCard(props: RoadmapMultiCardProps) {
       )}
 
       {secondaryDescription && (
-        <p className="flex-grow bg-gray-200/70 p-4 sm:p-5 text-sm text-gray-500">
+        <p className="grow bg-gray-200/70 p-4 sm:p-5 text-sm text-gray-500">
           {secondaryDescription}
         </p>
       )}

src/components/GetStarted/RoleRoadmaps.tsx

@@ -12,7 +12,7 @@ export function RoleRoadmaps(props: RoleRoadmapsProps) {
   const { badge, title, description, children } = props;
 
   return (
-    <div className="bg-gradient-to-b from-gray-100 to-white py-5 sm:py-8 md:py-12">
+    <div className="bg-linear-to-b from-gray-100 to-white py-5 sm:py-8 md:py-12">
       <div className="container">
         <div className="text-left">
           <SectionBadge title={badge} />

src/components/GridItem.astro

@@ -27,7 +27,7 @@ const { url, title, description, isNew } = Astro.props;
 
   {
     isNew && (
-      <span class='flex items-center gap-1.5 absolute bottom-1.5 right-1 rounded-sm text-xs font-semibold uppercase text-purple-500 sm:px-1.5'>
+      <span class='flex items-center gap-1.5 absolute bottom-1.5 right-1 rounded-xs text-xs font-semibold uppercase text-purple-500 sm:px-1.5'>
         <span class='relative flex h-2 w-2'>
           <span class='absolute inline-flex h-full w-full animate-ping rounded-full bg-purple-400 opacity-75' />
           <span class='relative inline-flex h-2 w-2 rounded-full bg-purple-500' />

src/components/Guide/GuideContent.astro

@@ -22,7 +22,7 @@ const { frontmatter: guideFrontmatter, author } = guide;
 <article class='lg:grid lg:max-w-full lg:grid-cols-[1fr_minmax(0,700px)_1fr]'>
   {
     (showTableOfContent || showRelatedGuides) && (
-      <div class='sticky top-0 lg:relative bg-gradient-to-r from-gray-50 py-0 lg:col-start-3 lg:col-end-4 lg:row-start-1'>
+      <div class='sticky top-0 lg:relative bg-linear-to-r from-gray-50 py-0 lg:col-start-3 lg:col-end-4 lg:row-start-1'>
         <RelatedGuides
           relatedTitle={guideFrontmatter?.relatedTitle}
           relatedGuides={guide?.relatedGuides || {}}

src/components/Guide/RelatedGuides.tsx

@@ -42,7 +42,7 @@ export function RelatedGuides(props: RelatedGuidesProps) {
 
       <ol
         className={cn(
-          'mt-0.5 space-y-0 max-lg:absolute max-lg:top-full max-lg:z-10 max-lg:mt-0 max-lg:w-full max-lg:bg-white max-lg:shadow',
+          'mt-0.5 space-y-0 max-lg:absolute max-lg:top-full max-lg:z-10 max-lg:mt-0 max-lg:w-full max-lg:bg-white max-lg:shadow-sm',
           !isOpen && 'hidden lg:block',
           isOpen && 'block',
         )}

src/components/GuideListItem.astro

@@ -41,7 +41,7 @@ if (isQuestionGroupType(guide)) {
 
     {
       frontmatter.isNew && (
-        <span class='ml-1.5 rounded-sm bg-green-300 px-1.5 py-0.5 text-xs font-medium uppercase text-green-900'>
+        <span class='ml-1.5 rounded-xs bg-green-300 px-1.5 py-0.5 text-xs font-medium uppercase text-green-900'>
           New
           <span class='hidden sm:inline'>
             &middot;

src/components/HeroSection/FavoriteRoadmaps.tsx

@@ -143,7 +143,7 @@ export function FavoriteRoadmaps() {
       className={`transition-opacity duration-500  opacity-${containerOpacity}`}
     >
       <div
-        className={`flex min-h-[192px] bg-gradient-to-b sm:min-h-[280px] ${
+        className={`flex min-h-[192px] bg-linear-to-b sm:min-h-[280px] ${
           hasProgress && `border-t border-t-[#1e293c]`
         }`}
       >

src/components/HeroSection/HeroSection.astro

@@ -14,7 +14,7 @@ import { FeatureAnnouncement } from "../FeatureAnnouncement";
     </p>
 
     <h1
-      class='mb-2 bg-gradient-to-b from-amber-50 to-purple-500 bg-clip-text text-2xl font-bold text-transparent sm:mb-4 sm:text-5xl sm:leading-tight'
+      class='mb-2 bg-linear-to-b from-amber-50 to-purple-500 bg-clip-text text-2xl font-bold text-transparent sm:mb-4 sm:text-5xl sm:leading-tight'
     >
       Developer Roadmaps
     </h1>

src/components/Leaderboard/LeaderboardPage.tsx

@@ -112,7 +112,7 @@ function LeaderboardLane(props: LeaderboardLaneProps) {
   const { users: usersToShow, emptyIcon, emptyText } = activeTab;
 
   return (
-    <div className="flex min-h-[450px] flex-col overflow-hidden rounded-xl border bg-white shadow-sm">
+    <div className="flex min-h-[450px] flex-col overflow-hidden rounded-xl border bg-white shadow-xs">
       <div className="mb-3 flex items-center justify-between gap-2 px-3 py-3">
         <h3 className="text-sm font-medium">
           {title}{' '}
@@ -149,7 +149,7 @@ function LeaderboardLane(props: LeaderboardLaneProps) {
       </div>
 
       {usersToShow.length === 0 && emptyText && (
-        <div className="flex flex-grow flex-col items-center justify-center p-8">
+        <div className="flex grow flex-col items-center justify-center p-8">
           {emptyIcon}
           <p className="mt-4 text-sm text-gray-500">{emptyText}</p>
         </div>

src/components/MarkdownFile.astro

@@ -8,7 +8,7 @@ const { class: className } = Astro.props;
 
 <div
   class:list={[
-    'container prose prose-xl prose-h2:mb-3 prose-h2:mt-10 prose-h2:scroll-mt-5 prose-h2:text-balance prose-h2:text-3xl prose-h3:mt-2 prose-h3:scroll-mt-5 prose-h3:text-balance prose-h4:text-balance prose-h5:text-balance prose-h5:font-medium prose-blockquote:font-normal prose-code:bg-transparent prose-img:mt-1 prose-h2:sm:scroll-mt-10 prose-h3:sm:scroll-mt-10',
+    'container prose prose-xl prose-h2:mb-3 prose-h2:mt-10 prose-h2:scroll-mt-5 prose-h2:text-balance prose-h2:text-3xl prose-h3:mt-2 prose-h3:scroll-mt-5 prose-h3:text-balance prose-h4:text-balance prose-h5:text-balance prose-h5:font-medium prose-blockquote:font-normal prose-code:bg-transparent prose-img:mt-1 sm:prose-h2:scroll-mt-10 sm:prose-h3:scroll-mt-10',
     className,
   ]}
 >

src/components/Modal.tsx

@@ -33,7 +33,7 @@ export function Modal(props: ModalProps) {
   return (
     <div
       className={cn(
-        'fixed left-0 right-0 top-0 z-[99] flex h-full items-center justify-center overflow-y-auto overflow-x-hidden bg-black/50',
+        'fixed left-0 right-0 top-0 z-99 flex h-full items-center justify-center overflow-y-auto overflow-x-hidden bg-black/50',
         overlayClassName,
       )}
     >
@@ -46,7 +46,7 @@ export function Modal(props: ModalProps) {
         <div
           ref={popupBodyEl}
           className={cn(
-            'relative h-full rounded-lg bg-white shadow',
+            'relative h-full rounded-lg bg-white shadow-sm',
             bodyClassName,
           )}
         >

src/components/Navigation/AccountDropdown.astro

@@ -4,7 +4,7 @@ import Icon from '../AstroIcon.astro';
 
 <div class='relative hidden' data-auth-required>
   <button
-    class='flex h-8 w-38 items-center justify-center rounded-full bg-gradient-to-r from-purple-500 to-purple-700 px-4 py-2 text-sm font-medium text-white hover:from-purple-500 hover:to-purple-600'
+    class='flex h-8 w-38 items-center justify-center rounded-full bg-linear-to-r from-purple-500 to-purple-700 px-4 py-2 text-sm font-medium text-white hover:from-purple-500 hover:to-purple-600'
     type='button'
     data-account-button
   >
@@ -25,7 +25,7 @@ import Icon from '../AstroIcon.astro';
       <li class='px-1'>
         <a
           href='/account'
-          class='block rounded px-4 py-2 text-sm font-medium text-slate-100 hover:bg-slate-700'
+          class='block rounded-sm px-4 py-2 text-sm font-medium text-slate-100 hover:bg-slate-700'
         >
           Profile
         </a>
@@ -33,7 +33,7 @@ import Icon from '../AstroIcon.astro';
       <li class='px-1'>
         <a
           href='/account/friends'
-          class='block rounded px-4 py-2 text-sm font-medium text-slate-100 hover:bg-slate-700'
+          class='block rounded-sm px-4 py-2 text-sm font-medium text-slate-100 hover:bg-slate-700'
         >
           Friends
         </a>
@@ -41,14 +41,14 @@ import Icon from '../AstroIcon.astro';
       <li class='px-1'>
         <a
           href='/team'
-          class='block rounded px-4 py-2 text-sm font-medium text-slate-100 hover:bg-slate-700'
+          class='block rounded-sm px-4 py-2 text-sm font-medium text-slate-100 hover:bg-slate-700'
         >
           Teams
         </a>
       </li>
       <li class='px-1'>
         <button
-          class='block w-full rounded px-4 py-2 text-left text-sm font-medium text-slate-100 hover:bg-slate-700'
+          class='block w-full rounded-sm px-4 py-2 text-left text-sm font-medium text-slate-100 hover:bg-slate-700'
           type='button'
           data-logout-button
         >

src/components/Navigation/AccountDropdown.tsx

@@ -105,7 +105,7 @@ export function AccountDropdown() {
         />
       )}
 
-      <div className="relative z-[90] animate-fade-in">
+      <div className="relative z-90 animate-fade-in">
         {isOnboardingModalOpen && onboardingConfig && (
           <OnboardingModal
             onboardingConfig={onboardingConfig}
@@ -126,7 +126,7 @@ export function AccountDropdown() {
         )}
 
         <button
-          className="relative flex h-8 w-40 items-center justify-center gap-1.5 rounded-full bg-gradient-to-r from-purple-500 to-purple-700 px-4 py-2 text-sm font-medium text-white hover:from-purple-500 hover:to-purple-600"
+          className="relative flex h-8 w-40 items-center justify-center gap-1.5 rounded-full bg-linear-to-r from-purple-500 to-purple-700 px-4 py-2 text-sm font-medium text-white hover:from-purple-500 hover:to-purple-600"
           onClick={() => {
             setIsTeamsOpen(false);
             setShowDropdown(!showDropdown);

src/components/Navigation/AccountDropdownList.tsx

@@ -43,7 +43,7 @@ export function AccountDropdownList(props: AccountDropdownListProps) {
         <li className="mb-1 px-1">
           <button
             className={cn(
-              'flex h-9 w-full items-center rounded py-1 pl-3 pr-2 text-sm font-medium text-slate-100 hover:opacity-80',
+              'flex h-9 w-full items-center rounded-sm py-1 pl-3 pr-2 text-sm font-medium text-slate-100 hover:opacity-80',
               isConfigLoading
                 ? 'striped-loader-darker flex border-slate-800 opacity-70'
                 : 'border-slate-600 bg-slate-700',
@@ -70,7 +70,7 @@ export function AccountDropdownList(props: AccountDropdownListProps) {
       <li className="px-1">
         <a
           href="/account"
-          className="group flex items-center gap-2 rounded py-2 pl-3 pr-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
+          className="group flex items-center gap-2 rounded-sm py-2 pl-3 pr-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
         >
           <User2 className="h-4 w-4 stroke-[2.5px] text-slate-400 group-hover:text-white" />
           Account
@@ -79,13 +79,13 @@ export function AccountDropdownList(props: AccountDropdownListProps) {
       <li className="px-1">
         <a
           href="/account/update-profile"
-          className="group flex items-center justify-between gap-2 rounded py-2 pl-3 pr-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
+          className="group flex items-center justify-between gap-2 rounded-sm py-2 pl-3 pr-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
         >
           <span className="flex items-center gap-2">
             <SquareUserRound className="h-4 w-4 stroke-[2.5px] text-slate-400 group-hover:text-white" />
             My Profile
           </span>
-          <span className="rounded-sm bg-yellow-300 px-1 text-xs uppercase tracking-wide text-black">
+          <span className="rounded-xs bg-yellow-300 px-1 text-xs uppercase tracking-wide text-black">
             New
           </span>
         </a>
@@ -93,7 +93,7 @@ export function AccountDropdownList(props: AccountDropdownListProps) {
       <li className="px-1">
         <a
           href="/account/friends"
-          className="group flex items-center gap-2 rounded py-2 pl-3 pr-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
+          className="group flex items-center gap-2 rounded-sm py-2 pl-3 pr-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
         >
           <Users2 className="h-4 w-4 stroke-[2px] text-slate-400 group-hover:text-white" />
           Friends
@@ -104,7 +104,7 @@ export function AccountDropdownList(props: AccountDropdownListProps) {
           onClick={() => {
             onCreateRoadmap();
           }}
-          className="group flex w-full items-center gap-2 rounded py-2 pl-3 pr-2 text-left text-sm font-medium text-slate-100 hover:bg-slate-700"
+          className="group flex w-full items-center gap-2 rounded-sm py-2 pl-3 pr-2 text-left text-sm font-medium text-slate-100 hover:bg-slate-700"
         >
           <Plus className="h-4 w-4 stroke-[2px] text-slate-400 group-hover:text-white" />
           New Roadmap
@@ -113,7 +113,7 @@ export function AccountDropdownList(props: AccountDropdownListProps) {
       <li className="border-b border-b-gray-700/60 px-1 pb-1">
         <a
           href="/account/roadmaps"
-          className="group flex items-center gap-2 rounded py-2 pl-3 pr-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
+          className="group flex items-center gap-2 rounded-sm py-2 pl-3 pr-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
         >
           <Map className="h-4 w-4 stroke-[2px] text-slate-400 group-hover:text-white" />
           Roadmaps
@@ -121,7 +121,7 @@ export function AccountDropdownList(props: AccountDropdownListProps) {
       </li>
       <li className="px-1 pt-1">
         <button
-          className="group flex w-full items-center justify-between rounded py-2 pl-3 pr-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
+          className="group flex w-full items-center justify-between rounded-sm py-2 pl-3 pr-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
           onClick={() => setIsTeamsOpen(true)}
         >
           <span className="flex items-center gap-2.5">
@@ -133,7 +133,7 @@ export function AccountDropdownList(props: AccountDropdownListProps) {
       </li>
       <li className="px-1">
         <button
-          className="group flex w-full items-center gap-2 rounded py-2 pl-3 pr-2 text-left text-sm font-medium text-slate-100 hover:bg-slate-700"
+          className="group flex w-full items-center gap-2 rounded-sm py-2 pl-3 pr-2 text-left text-sm font-medium text-slate-100 hover:bg-slate-700"
           type="button"
           onClick={logout}
         >

src/components/Navigation/DropdownTeamList.tsx

@@ -52,13 +52,13 @@ export function DropdownTeamList(props: DropdownTeamListProps) {
     <>
       <div className="flex items-center justify-between px-2">
         <button
-          className="mt-1 flex h-5 w-5 items-center justify-center rounded text-slate-400 hover:bg-slate-50/10 hover:text-slate-50"
+          className="mt-1 flex h-5 w-5 items-center justify-center rounded-sm text-slate-400 hover:bg-slate-50/10 hover:text-slate-50"
           onClick={() => setIsTeamsOpen(false)}
         >
           <ChevronLeft className="h-4 w-4 stroke-[2.5px]" />
         </button>
         <a
-          className="mt-1 flex h-5 w-5 items-center justify-center rounded text-slate-400 hover:bg-slate-50/10 hover:text-slate-50"
+          className="mt-1 flex h-5 w-5 items-center justify-center rounded-sm text-slate-400 hover:bg-slate-50/10 hover:text-slate-50"
           href="/team/new"
         >
           <Plus className="h-4 w-4 stroke-[2.5px]" />
@@ -80,7 +80,7 @@ export function DropdownTeamList(props: DropdownTeamListProps) {
               <li key={team._id} className="px-1">
                 <a
                   href={pageLink}
-                  className="block truncate rounded px-4 py-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
+                  className="block truncate rounded-sm px-4 py-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
                 >
                   {team.name}
                 </a>
@@ -90,7 +90,7 @@ export function DropdownTeamList(props: DropdownTeamListProps) {
 
           {teamList.length === 0 && !isLoading && (
             <li className="mt-2 px-1 text-center">
-              <p className="block rounded px-4 py-2 text-sm font-medium text-slate-500">
+              <p className="block rounded-sm px-4 py-2 text-sm font-medium text-slate-500">
                 <Users className="mx-auto mb-2 h-7 w-7 text-slate-600" />
                 No teams found.{' '}
                 <a

src/components/Navigation/Navigation.astro

@@ -73,7 +73,7 @@ import { AccountDropdown } from './AccountDropdown';
 
         <a
           data-guest-required
-          class='flex hidden h-8 w-28 cursor-pointer items-center justify-center rounded-full bg-gradient-to-r from-blue-500 to-blue-700 px-4 py-2 text-sm font-medium text-white hover:from-blue-500 hover:to-blue-600'
+          class='flex hidden h-8 w-28 cursor-pointer items-center justify-center rounded-full bg-linear-to-r from-blue-500 to-blue-700 px-4 py-2 text-sm font-medium text-white hover:from-blue-500 hover:to-blue-600'
           href='/signup'
         >
           <span>Sign Up</span>

src/components/Navigation/OnboardingModal.tsx

@@ -232,7 +232,7 @@ export function OnboardingModal(props: OnboardingModalProps) {
 
       <div className="mt-2 px-11 pb-5">
         <button
-          className="w-full rounded-md bg-gradient-to-r from-purple-500 to-purple-700 px-4 py-2 text-sm font-medium text-white hover:from-purple-500 hover:to-purple-600"
+          className="w-full rounded-md bg-linear-to-r from-purple-500 to-purple-700 px-4 py-2 text-sm font-medium text-white hover:from-purple-500 hover:to-purple-600"
           onClick={onClose}
         >
           Do it later

src/components/NavigationDropdown.tsx

@@ -109,7 +109,7 @@ export function NavigationDropdown() {
       </button>
       <div
         className={cn(
-          'pointer-events-none invisible absolute left-0 top-full z-[999] mt-2 w-48 min-w-[320px] -translate-y-1 rounded-lg bg-slate-800 py-2 opacity-0 shadow-xl transition-all duration-100',
+          'pointer-events-none invisible absolute left-0 top-full z-999 mt-2 w-48 min-w-[320px] -translate-y-1 rounded-lg bg-slate-800 py-2 opacity-0 shadow-xl transition-all duration-100',
           {
             'pointer-events-auto visible translate-y-2.5 opacity-100':
               $navigationDropdownOpen,

src/components/Notification/NotificationPage.tsx

@@ -103,7 +103,7 @@ export function NotificationPage() {
               <button
                 type="button"
                 disabled={isLoading}
-                className="inline-flex rounded border p-1 hover:bg-gray-50 disabled:opacity-75"
+                className="inline-flex rounded-sm border p-1 hover:bg-gray-50 disabled:opacity-75"
                 onClick={() => respondInvitation('accept', notification?._id!)}
               >
                 <AcceptIcon className="h-4 w-4" />
@@ -111,7 +111,7 @@ export function NotificationPage() {
               <button
                 type="button"
                 disabled={isLoading}
-                className="inline-flex rounded border p-1 hover:bg-gray-50 disabled:opacity-75"
+                className="inline-flex rounded-sm border p-1 hover:bg-gray-50 disabled:opacity-75"
                 onClick={() => respondInvitation('reject', notification?._id!)}
               >
                 <XIcon className="h-4 w-4" />

src/components/OnboardingNudge.tsx

@@ -40,7 +40,7 @@ export function OnboardingNudge(props: OnboardingNudgeProps) {
   return (
     <div
       className={cn(
-        'fixed left-0 right-0 top-0 z-[91] flex w-full items-center justify-center border-b border-b-yellow-500/30 bg-yellow-300 pb-2 pt-1.5',
+        'fixed left-0 right-0 top-0 z-91 flex w-full items-center justify-center border-b border-b-yellow-500/30 bg-yellow-300 pb-2 pt-1.5',
         {
           'striped-loader': isLoading,
         },

src/components/OpenSourceBanner.astro

@@ -12,7 +12,7 @@ const discordInfo = await getDiscordInfo();
 ---
 
 <div class='border-b border-t bg-white py-6 text-left sm:py-16 sm:text-center'>
-  <div class='container !max-w-[650px]'>
+  <div class='container max-w-[650px]!'>
     <p class='text-2xl font-bold sm:text-5xl'>Join the Community</p>
     <p class='my-2.5 text-sm leading-relaxed text-gray-600 sm:my-5 sm:text-lg'>
       roadmap.sh is the <a

src/components/PageProgress.tsx

@@ -28,7 +28,7 @@ export function PageProgress(props: Props) {
   return (
     <div>
       {/* Tailwind based spinner for full page */}
-      <div className="fixed left-0 top-0 z-[100] flex h-full w-full items-center justify-center bg-white bg-opacity-75">
+      <div className="fixed left-0 top-0 z-100 flex h-full w-full items-center justify-center bg-white bg-opacity-75">
         <div className="flex  items-center justify-center rounded-md border bg-white px-4 py-2 ">
           <Spinner
             className="h-4 w-4 sm:h-4 sm:w-4"

src/components/PageSponsors/StickyTopSponsor.tsx

@@ -55,7 +55,7 @@ export function StickyTopSponsor(props: StickyTopSponsorProps) {
       href={sponsor.url}
       onClick={onSponsorClick}
       className={cn(
-        'fixed left-0 right-0 top-0 z-[91] flex min-h-[45px] w-full flex-row items-center justify-center px-14 pb-2 pt-1.5 text-base font-medium text-yellow-950',
+        'fixed left-0 right-0 top-0 z-91 flex min-h-[45px] w-full flex-row items-center justify-center px-14 pb-2 pt-1.5 text-base font-medium text-yellow-950',
       )}
       style={{
         backgroundImage: `linear-gradient(to bottom, ${sponsor.style?.fromColor}, ${sponsor.style?.toColor})`,

src/components/Popup/Popup.astro

@@ -15,10 +15,10 @@ const { id, title, subtitle } = Astro.props;
 <div
   id={id}
   tabindex='-1'
-  class='hidden bg-black/50 overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-[999] h-full items-center justify-center popup'
+  class='hidden bg-black/50 overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-999 h-full items-center justify-center popup'
 >
   <div class='relative p-4 w-full max-w-md h-full md:h-auto'>
-    <div class='relative bg-white rounded-lg shadow popup-body'>
+    <div class='relative bg-white rounded-lg shadow-sm popup-body'>
       <button
         type='button'
         class='absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center popup-close'

src/components/Projects/ListProjectSolutions.tsx

@@ -271,7 +271,7 @@ export function ListProjectSolutions(props: ListProjectSolutionsProps) {
                           counter % submittedAlternatives.length
                         ] || 'submitted their solution'}
                       </span>{' '}
-                      <span className="flex-grow text-right text-gray-400 sm:flex-grow-0 sm:text-left sm:font-medium sm:text-black">
+                      <span className="grow text-right text-gray-400 sm:grow-0 sm:text-left sm:font-medium sm:text-black">
                         {getRelativeTimeString(solution?.submittedAt!)}
                       </span>
                     </div>

src/components/Projects/ProjectCard.tsx

@@ -46,8 +46,8 @@ export function ProjectCard(props: ProjectCardProps) {
       <span className="flex min-h-[22px] items-center justify-between gap-2 text-xs text-gray-400">
         {isLoadingStatus ? (
           <>
-            <span className="h-5 w-24 animate-pulse rounded bg-gray-200" />{' '}
+            <span className="h-5 w-24 animate-pulse rounded-sm bg-gray-200" />{' '}
-            <span className="h-5 w-20 animate-pulse rounded bg-gray-200" />{' '}
+            <span className="h-5 w-20 animate-pulse rounded-sm bg-gray-200" />{' '}
           </>
         ) : (
           <>

src/components/Projects/ProjectsPage.tsx

@@ -114,7 +114,7 @@ export function ProjectsPage(props: ProjectsPageProps) {
       <div className="container relative flex flex-col gap-4 sm:flex-row">
         <div
           className={cn(
-            'hidden w-full flex-col from-gray-100 sm:w-[160px] sm:shrink-0 sm:border-r sm:bg-gradient-to-l sm:pt-6',
+            'hidden w-full flex-col from-gray-100 sm:w-[160px] sm:shrink-0 sm:border-r sm:bg-linear-to-l sm:pt-6',
             {
               'hidden sm:flex': !isFilterOpen,
               'z-50 flex': isFilterOpen,
@@ -171,7 +171,7 @@ export function ProjectsPage(props: ProjectsPageProps) {
             </div>
           </div>
         </div>
-        <div className="flex flex-grow flex-col pb-20 pt-2 sm:pt-6">
+        <div className="flex grow flex-col pb-20 pt-2 sm:pt-6">
           <div className="mb-4 flex items-center justify-between text-sm text-gray-500">
             <h3 className={'flex items-center'}>
               <Box size={15} className="mr-1" strokeWidth={2} />

src/components/Projects/StartProjectModal.tsx

@@ -15,7 +15,7 @@ function StepLabel(props: StepLabelProps) {
   const { label } = props;
 
   return (
-    <span className="flex-shrink-0 rounded-full bg-gray-200 px-2 py-1 text-xs text-gray-600">
+    <span className="shrink-0 rounded-full bg-gray-200 px-2 py-1 text-xs text-gray-600">
       {label}
     </span>
   );

src/components/Projects/StatusStepper/StepperStepSeparator.tsx

@@ -9,7 +9,7 @@ export function StepperStepSeparator(props: StepperStepSeparatorProps) {
 
   return (
     <hr
-      className={cn('flex-grow hidden sm:flex border border-gray-300', {
+      className={cn('grow hidden sm:flex border border-gray-300', {
         'border-green-500': isActive,
       })}
     />

src/components/Projects/SubmissionRequirement.tsx

@@ -23,11 +23,11 @@ export function SubmissionRequirement(props: SubmissionRequirementProps) {
       {!isLoading && (
         <>
           {status === 'pending' ? (
-            <CircleDashed className="h-4 w-4 flex-shrink-0 text-gray-400" />
+            <CircleDashed className="h-4 w-4 shrink-0 text-gray-400" />
           ) : status === 'success' ? (
-            <CheckIcon className="h-4 w-4 flex-shrink-0 text-green-800" />
+            <CheckIcon className="h-4 w-4 shrink-0 text-green-800" />
           ) : (
-            <X className="h-4 w-4 flex-shrink-0 text-yellow-800" />
+            <X className="h-4 w-4 shrink-0 text-yellow-800" />
           )}
         </>
       )}

src/components/Projects/SubmitSuccessModal.tsx

@@ -33,7 +33,7 @@ export function SubmitSuccessModal(props: SubmitSuccessModalProps) {
             type="text"
             readOnly={true}
             value={projectSolutionUrl}
-            className="w-full rounded-md border bg-gray-50 px-2.5 py-2 text-sm text-gray-700 focus:outline-none"
+            className="w-full rounded-md border bg-gray-50 px-2.5 py-2 text-sm text-gray-700 focus:outline-hidden"
             onClick={(e) => {
               e.currentTarget.select();
             }}

src/components/Projects/VoteButton.tsx

@@ -13,7 +13,7 @@ export function VoteButton(props: VoteButtonProps) {
   return (
     <button
       className={cn(
-        'flex gap-1 px-2 py-1 text-sm text-gray-500 hover:bg-gray-100 hover:text-black focus:outline-none',
+        'flex gap-1 px-2 py-1 text-sm text-gray-500 hover:bg-gray-100 hover:text-black focus:outline-hidden',
         {
           'bg-gray-100 text-orange-600 hover:text-orange-700': isActive,
           'bg-transparent text-gray-500 hover:text-black': !isActive,

src/components/Questions/QuestionCard.tsx

@@ -51,7 +51,7 @@ export function QuestionCard(props: QuestionCardProps) {
     <>
       <div
         ref={questionRef}
-        className={`flex flex-grow flex-col items-center justify-center py-5 sm:py-8`}
+        className={`flex grow flex-col items-center justify-center py-5 sm:py-8`}
       >
         <div className="hidden text-gray-400 sm:block">
           {question.topics?.map((topic, counter) => {
@@ -69,7 +69,7 @@ export function QuestionCard(props: QuestionCardProps) {
         </div>
 
         <div className="mx-auto flex max-w-[550px] flex-1 items-center justify-center py-3 sm:py-8">
-          <p className="px-4 text-xl font-semibold !leading-snug text-black sm:text-3xl">
+          <p className="px-4 text-xl font-semibold leading-snug! text-black sm:text-3xl">
             {question.question}
           </p>
         </div>
@@ -94,7 +94,7 @@ export function QuestionCard(props: QuestionCardProps) {
       >
         {!question.isLongAnswer && (
           <div
-            className={`mx-auto flex max-w-[600px] flex-grow flex-col items-center justify-center py-0 px-5 text-center text-base [&>p]:leading-relaxed sm:text-xl`}
+            className={`mx-auto flex max-w-[600px] grow flex-col items-center justify-center py-0 px-5 text-center text-base [&>p]:leading-relaxed sm:text-xl`}
             dangerouslySetInnerHTML={{
               __html: markdownToHtml(question.answer, false),
             }}
@@ -103,7 +103,7 @@ export function QuestionCard(props: QuestionCardProps) {
 
         {question.isLongAnswer && (
           <div
-            className={`qa-answer prose prose-sm prose-quoteless mx-auto flex w-full max-w-[600px] flex-grow flex-col items-start justify-center py-0 px-4 text-left text-sm prose-h1:mb-2.5 prose-h1:mt-7 prose-h2:mb-3 prose-h2:mt-0 prose-h3:mb-[5px] prose-h3:mt-[10px] prose-p:mb-2 prose-p:mt-0 prose-blockquote:font-normal prose-blockquote:not-italic prose-blockquote:text-gray-700 prose-pre:!mb-6 prose-pre:w-full prose-ul:my-2 prose-li:m-0 prose-li:mb-0.5 sm:px-5 sm:text-lg sm:prose-p:mb-4`}
+            className={`qa-answer prose prose-sm prose-quoteless mx-auto flex w-full max-w-[600px] grow flex-col items-start justify-center py-0 px-4 text-left text-sm prose-h1:mb-2.5 prose-h1:mt-7 prose-h2:mb-3 prose-h2:mt-0 prose-h3:mb-[5px] prose-h3:mt-[10px] prose-p:mb-2 prose-p:mt-0 prose-blockquote:font-normal prose-blockquote:not-italic prose-blockquote:text-gray-700 prose-pre:mb-6! prose-pre:w-full prose-ul:my-2 prose-li:m-0 prose-li:mb-0.5 sm:px-5 sm:text-lg sm:prose-p:mb-4`}
             dangerouslySetInnerHTML={{
               __html: markdownToHtml(question.answer, false),
             }}