Migrate to Tailwind 4 + Editor Upgrade (#8465 An error occurred )

* wip

* fix: roadmap editor

* fix: padding

* wip

* fix: remove editor package

* wip

* fix: update pnpm lock

* Add contribution docs

* UI changes for TW4

* Update deployment workflow

---------

Co-authored-by: Arik Chakma <arikchangma@gmail.com>

.github/workflows/cloudfront-api-cache.yml

@@ -2,7 +2,7 @@ name: Clears API Cloudfront Cache
 on:
   workflow_dispatch:
 jobs:
-  aws_costs:
+  cloudfront_api_cache:
     runs-on: ubuntu-latest
     steps:
       - name: Clear Cloudfront Caching

.github/workflows/cloudfront-fe-cache.yml

@@ -2,7 +2,7 @@ name: Clears Frontend Cloudfront Cache
 on:
   workflow_dispatch:
 jobs:
-  aws_costs:
+  cloudfront_fe_cache:
     runs-on: ubuntu-latest
     steps:
       - name: Clear Cloudfront Caching

.github/workflows/deployment.yml

@@ -38,7 +38,8 @@ jobs:
       - name: Generate Production Build
         run: |
           git clone https://${{ secrets.GH_PAT }}@github.com/roadmapsh/web-draw.git .temp/web-draw --depth 1
-          # npm run compress:images
+          npm run generate-renderer
+          npm run compress:images
           npm run build
 
       # --------------------

.github/workflows/greetings.yml

@@ -1,23 +0,0 @@
-name: ❤️ Greetings
-
-on:
-  issues:
-    types: [opened]
-  pull_request_target:
-    branches: [master]
-    types: [opened]
-
-jobs:
-  greet:
-    name: Greet New Contributors
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/first-interaction@v1
-        with:
-          repo-token: ${{ secrets.GITHUB_TOKEN }}
-          pr-message: |
-            Thank you for your first ever contribution to [roadmap.sh](https://roadmap.sh)! 🎉
-            
-            Please make sure to follow the [contribution guidelines](https://github.com/kamranahmedse/developer-roadmap/blob/master/contributing.md) when contributing to this project. Any PRs that don't follow the guidelines will be closed.
-
-            Thanks for choosing to contribute, and for helping make this project better! 🌟

.gitignore

@@ -30,4 +30,4 @@ pnpm-debug.log*
 tests-examples
 *.csveditor/
 
-editor/
+packages/editor

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';
 
@@ -61,11 +61,6 @@ export default defineConfig({
   }),
   trailingSlash: 'never',
   integrations: [
-    tailwind({
-      config: {
-        applyBaseStyles: false,
-      },
-    }),
     sitemap({
       filter: shouldIndexPage,
       serialize: serializeSitemap,
@@ -73,6 +68,7 @@ export default defineConfig({
     react(),
   ],
   vite: {
+    plugins: [tailwindcss()],
     ssr: {
       noExternal: [/^@roadmapsh\/editor.*$/],
     },

contributing.md

@@ -125,6 +125,22 @@ It's important to add a valid type, this will help us categorize the content and
 - PR's that don't follow our style guide, have no description, and a default title.
 - Links to your own blog articles.
 
+## Local Development
+
+For local development, you can use the following commands:
+
+```bash
+git clone git@github.com:kamranahmedse/developer-roadmap.git --depth 1
+cd developer-roadmap
+pnpm add @roadmapsh/editor@npm:@roadmapsh/dummy-editor -w
+pnpm install
+```
+Run the development server with:
+
+```bash
+pnpm dev
+```
+
 ***
 
 Have a look at the [License](./license) file.

editor/.gitignore

@@ -1,38 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-node_modules
-.pnp
-.pnp.js
-
-# testing
-coverage
-
-# next.js
-.next/
-out/
-dist
-build
-.vercel
-
-# misc
-.DS_Store
-*.pem
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# local env files
-.env
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-# turbo
-.turbo
-
-# vercel
-.vercel

editor/package.json

@@ -1,81 +0,0 @@
-{
-  "name": "@roadmapsh/dummy-editor",
-  "version": "0.0.5",
-  "description": "Dummy editor for the Roadmap Editor",
-  "private": false,
-  "type": "module",
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
-  "files": [
-    "dist/**"
-  ],
-  "exports": {
-    "./package.json": "./package.json",
-    ".": {
-      "node": {
-        "import": {
-          "types": "./dist/index.d.ts",
-          "default": "./dist/index.mjs"
-        },
-        "require": {
-          "types": "./dist/index.d.cts",
-          "default": "./dist/index.js"
-        }
-      },
-      "browser": {
-        "import": {
-          "types": "./dist/index.d.ts",
-          "default": "./dist/index.mjs"
-        },
-        "require": {
-          "types": "./dist/index.d.cts",
-          "default": "./dist/index.js"
-        }
-      },
-      "default": {
-        "import": {
-          "types": "./dist/index.d.ts",
-          "default": "./dist/index.mjs"
-        },
-        "require": {
-          "types": "./dist/index.d.cts",
-          "default": "./dist/index.js"
-        }
-      }
-    },
-    "./style.css": "./dist/index.css"
-  },
-  "typesVersions": {
-    "*": {
-      "*": [
-        "dist/index.d.ts"
-      ]
-    }
-  },
-  "scripts": {
-    "dev": "tsup --watch",
-    "clean": "rm -rf dist && rm -rf node_modules",
-    "build": "tsup"
-  },
-  "keywords": [],
-  "author": "Arik Chakma <arikchangma@gmail.com>",
-  "license": "ISC",
-  "dependencies": {
-    "clsx": "^2.1.1",
-    "react": "^19.0.0",
-    "tailwind-merge": "^3.0.1"
-  },
-  "devDependencies": {
-    "@tailwindcss/postcss": "^4.0.3",
-    "@types/react": "^19.0.8",
-    "postcss": "^8.5.1",
-    "postcss-replace": "^2.0.1",
-    "tailwindcss": "^4.0.3",
-    "tsup": "^8.3.6",
-    "typescript": "^5.7.3"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
-}

editor/postcss.config.mjs

@@ -1,12 +0,0 @@
-export default {
-  plugins: {
-    '@tailwindcss/postcss': {},
-    'postcss-replace': {
-      pattern: /(--tw|\*, ::before, ::after)/g,
-      data: {
-        '--tw': '--rdm-tw',
-        '*, ::before, ::after': ':root',
-      },
-    },
-  },
-};

editor/src/components/readonly-editor.tsx

@@ -1,22 +0,0 @@
-import { forwardRef, memo } from 'react';
-
-export const ReadonlyEditor = memo(
-  forwardRef<HTMLDivElement, any>((props, ref) => {
-    return (
-      <div className="rdm:fixed rdm:bottom-0 rdm:left-0 rdm:right-0 rdm:top-0 rdm:z-[9999] rdm:border rdm:border-gray-200 rdm:bg-white rdm:p-5 rdm:text-black">
-        <h2 className="rdm:mb-2 rdm:text-xl rdm:font-semibold">
-          Private Component
-        </h2>
-        <p className="rdm:mb-4">
-          Renderer is a private component. If you are a collaborator and have
-          access to it. Run the following command:
-        </p>
-        <code className="rdm:mt-5 rdm:rounded-md rdm:bg-gray-800 rdm:p-2 rdm:text-white">
-          npm run generate-renderer
-        </code>
-      </div>
-    );
-  })
-);
-
-ReadonlyEditor.displayName = 'ReadonlyEditor';

editor/src/components/render-flow-json.ts

@@ -1,6 +0,0 @@
-export function renderFlowJSON(data: any, options?: any): Promise<any> {
-  console.warn('renderFlowJSON is not implemented');
-  console.warn('run the following command to generate the renderer:');
-  console.warn('> npm run generate-renderer');
-  return Promise.resolve(null);
-}

editor/src/components/renderer.tsx

@@ -1,20 +0,0 @@
-import { forwardRef } from 'react';
-
-export const Renderer = forwardRef<HTMLDivElement, any>((props, ref) => {
-  return (
-    <div className="rdm:fixed rdm:bottom-0 rdm:left-0 rdm:right-0 rdm:top-0 rdm:z-[9999] rdm:border rdm:border-gray-200 rdm:bg-white rdm:p-5 rdm:text-black">
-      <h2 className="rdm:mb-2 rdm:text-xl rdm:font-semibold">
-        Private Component
-      </h2>
-      <p className="rdm:mb-4">
-        Renderer is a private component. If you are a collaborator and have
-        access to it. Run the following command:
-      </p>
-      <code className="rdm:mt-5 rdm:rounded-md rdm:bg-gray-800 rdm:p-2 rdm:text-white">
-        npm run generate-renderer
-      </code>
-    </div>
-  );
-});
-
-Renderer.displayName = 'Renderer';

editor/src/components/roadmap-generator.ts

@@ -1,27 +0,0 @@
-import type { Edge, Node } from './types';
-
-export function generateRoadmapFromText(markdown: string | any[]): {
-  nodes: Node[];
-  edges: Edge[];
-} {
-  console.warn('generateRoadmapFromText is not implemented');
-  console.warn('run the following command to generate the renderer:');
-  console.warn('> npm run generate-renderer');
-  return {
-    nodes: [],
-    edges: [],
-  };
-}
-
-export function generateAIRoadmapFromText(markdown: string | any[]): {
-  nodes: Node[];
-  edges: Edge[];
-} {
-  console.warn('generateAIRoadmapFromText is not implemented');
-  console.warn('run the following command to generate the renderer:');
-  console.warn('> npm run generate-renderer');
-  return {
-    nodes: [],
-    edges: [],
-  };
-}

editor/src/components/types.ts

@@ -1,3 +0,0 @@
-export type Edge = any;
-export type Node = any;
-export type XYPosition = any;

editor/src/global.css

@@ -1 +0,0 @@
-@import 'tailwindcss' prefix(rdm);

editor/src/index.tsx

@@ -1,7 +0,0 @@
-import './global.css';
-
-export * from './components/readonly-editor';
-export * from './components/renderer';
-export * from './components/render-flow-json';
-export * from './components/roadmap-generator';
-export * from './components/types';

editor/tsup.config.ts

@@ -1,22 +0,0 @@
-import { defineConfig, Options } from 'tsup';
-
-const packageOptions: Options = {
-  clean: true,
-  dts: true,
-  format: ['cjs', 'esm'],
-  platform: 'neutral',
-  sourcemap: true,
-};
-
-export default defineConfig([
-  {
-    ...packageOptions,
-    entry: {
-      index: 'src/index.tsx',
-    },
-    external: ['react'],
-    outExtension(ctx) {
-      return ctx.format === 'esm' ? { js: '.mjs' } : { js: '.js' };
-    },
-  },
-]);

package.json

@@ -34,13 +34,13 @@
     "@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",
     "@microsoft/clarity": "^1.0.0",
     "@nanostores/react": "^0.8.0",
     "@napi-rs/image": "^1.9.2",
     "@resvg/resvg-js": "^2.6.2",
-    "@roadmapsh/editor": "ssh://git@github.com/roadmapsh/web-draw#v0.0.8&path:packages/editor",
+    "@roadmapsh/editor": "workspace:*",
+    "@tailwindcss/vite": "^4.1.3",
     "@tanstack/react-query": "^5.59.16",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.1",
@@ -80,7 +80,7 @@
     "shiki": "^3.1.0",
     "slugify": "^1.6.6",
     "tailwind-merge": "^2.5.3",
-    "tailwindcss": "^3.4.13",
+    "tailwindcss": "^4.1.3",
     "tiptap-markdown": "^0.8.10",
     "turndown": "^7.2.0",
     "unified": "^11.0.5",
@@ -106,7 +106,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"
   }
 }

pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+packages:
+  - packages/*

scripts/generate-renderer-dummy.sh

@@ -1,23 +0,0 @@
-#!/usr/bin/env bash
-
-set -e
-
-rm -rf .temp
-rm -rf editor
-
-git clone ssh://git@github.com/roadmapsh/web-draw.git .temp/web-draw --depth 1
-
-cd .temp/web-draw
-pnpm install
-npm run build -- --filter=@roadmapsh/dummy-editor
-
-
-# Copy new editor
-cp -rf packages/dummy-editor ../../editor
-
-# Remove temp directory
-rm -rf .temp
-
-# Reinstall so that the editor which was setup gets used
-rm -rf node_modules
-pnpm install

scripts/generate-renderer.sh

@@ -9,24 +9,13 @@ if [ ! -d ".temp/web-draw" ]; then
   git clone ssh://git@github.com/roadmapsh/web-draw.git .temp/web-draw --depth 1
 fi
 
-cd .temp/web-draw
-pnpm install
-npm run build -- --filter=@roadmapsh/editor
-
-cd ../../
-
-# Copy new editor
-cp -rf .temp/web-draw/packages/editor editor
+# Make dir
+mkdir -p packages/editor
+mkdir -p packages/editor/dist
 
-editor_changed_files=$(git ls-files -m editor)
-
-echo $editor_changed_files
-
-# for each of the changed files, assume they are unchanged
-for file in $editor_changed_files; do
-  echo "Assuming $file is unchanged"
-  git update-index --assume-unchanged $file
-done
+# Copy the editor dist, package.json
+cp -rf .temp/web-draw/packages/editor/dist packages/editor
+cp -rf .temp/web-draw/packages/editor/package.json packages/editor
 
 # Remove temp directory
 rm -rf .temp
@@ -34,5 +23,3 @@ rm -rf .temp
 # Reinstall so that the editor which was setup gets used
 rm -rf node_modules
 pnpm install
-
-git checkout -- pnpm-lock.yaml

src/components/AccountSidebar.astro

@@ -163,7 +163,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

@@ -36,7 +36,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

@@ -70,7 +70,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))}
@@ -84,7 +84,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))}
@@ -106,7 +106,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

@@ -80,7 +80,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))}
@@ -93,7 +93,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))}
@@ -108,7 +108,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))}
@@ -121,7 +121,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

@@ -148,7 +148,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

@@ -147,7 +147,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/Billing/BillingPage.tsx

@@ -190,7 +190,7 @@ export function BillingPage() {
               <div className="mt-8 flex gap-3 max-sm:flex-col">
                 {!isCanceled && (
                   <button
-                    className="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm transition-colors hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2 max-sm:flex-grow"
+                    className="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-xs transition-colors hover:bg-gray-50 focus:outline-hidden focus:ring-2 focus:ring-black focus:ring-offset-2 max-sm:grow"
                     onClick={() => {
                       setShowUpgradeModal(true);
                     }}
@@ -201,7 +201,7 @@ export function BillingPage() {
                 )}
 
                 <button
-                  className="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm transition-colors hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                  className="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-xs transition-colors hover:bg-gray-50 focus:outline-hidden focus:ring-2 focus:ring-black focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                   onClick={() => {
                     createCustomerPortal({});
                   }}

src/components/Billing/EmptyBillingScreen.tsx

@@ -59,7 +59,7 @@ export function EmptyBillingScreen(props: EmptyBillingScreenProps) {
 
       <button
         onClick={onUpgrade}
-        className="inline-flex items-center justify-center rounded-lg bg-black px-6 py-2.5 text-sm font-medium text-white transition-colors hover:opacity-80 focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2"
+        className="inline-flex items-center justify-center rounded-lg bg-black px-6 py-2.5 text-sm font-medium text-white transition-colors hover:opacity-80 focus:outline-hidden focus:ring-2 focus:ring-black focus:ring-offset-2"
       >
         Upgrade Account
       </button>

src/components/Billing/UpgradeAccountModal.tsx

@@ -236,12 +236,12 @@ export function UpgradeAccountModal(props: UpgradeAccountModalProps) {
                       </p>
                     </div>
 
-                    <div className="flex-grow"></div>
+                    <div className="grow"></div>
 
                     <div>
                       <button
                         className={cn(
-                          'flex min-h-9 w-full items-center justify-center rounded-md py-2 text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-yellow-400 disabled:cursor-not-allowed disabled:opacity-60 sm:min-h-11 sm:py-2.5 sm:text-base',
+                          'flex min-h-9 w-full items-center justify-center rounded-md py-2 text-sm font-medium transition-colors focus:outline-hidden focus-visible:ring-2 focus-visible:ring-yellow-400 disabled:cursor-not-allowed disabled:opacity-60 sm:min-h-11 sm:py-2.5 sm:text-base',
                           'bg-yellow-400 text-black hover:bg-yellow-500',
                         )}
                         disabled={

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/ChangelogImages.tsx

@@ -1,4 +1,4 @@
-import { ChevronLeft, ChevronRight, MoveRight } from 'lucide-react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
 import React, { useState, useEffect, useCallback } from 'react';
 
 interface ChangelogImagesProps {
@@ -63,17 +63,17 @@ const ChangelogImages: React.FC<ChangelogImagesProps> = ({ images }) => {
               alt={title}
               className="h-[120px] w-full object-cover object-left-top"
             />
-            <span className="absolute group-hover:opacity-0 inset-0 bg-gradient-to-b from-transparent to-black/40" />
+            <span className="absolute group-hover:opacity-0 inset-0 bg-linear-to-b from-transparent to-black/40" />
 
             <div className="absolute font-medium inset-x-0 top-full group-hover:inset-y-0 flex items-center justify-center px-2 text-center text-xs bg-black/50 text-white py-0.5 opacity-0 group-hover:opacity-100 cursor-pointer">
-              <span className='bg-black py-0.5 rounded px-1'>{title}</span>
+              <span className='bg-black py-0.5 rounded-sm px-1'>{title}</span>
             </div>
           </div>
         ))}
       </div>
       {enlargedImage && (
         <div
-          className="fixed inset-0 z-[999] flex items-center justify-center bg-black bg-opacity-75"
+          className="fixed inset-0 z-999 flex items-center justify-center bg-black/75"
           onClick={handleCloseEnlarged}
         >
           <img
@@ -82,7 +82,7 @@ const ChangelogImages: React.FC<ChangelogImagesProps> = ({ images }) => {
             className="max-h-[90%] max-w-[90%] rounded-xl object-contain"
           />
           <button
-            className="absolute left-4 top-1/2 -translate-y-1/2 transform rounded-full bg-white hover:bg-opacity-100 bg-opacity-50 p-2"
+            className="absolute left-4 top-1/2 -translate-y-1/2 transform rounded-full bg-white/50 hover:bg-white/100 p-2"
             onClick={(e) => {
               e.stopPropagation();
               handleNavigation('prev');
@@ -91,7 +91,7 @@ const ChangelogImages: React.FC<ChangelogImagesProps> = ({ images }) => {
             <ChevronLeft size={24} />
           </button>
           <button
-            className="absolute right-4 top-1/2 -translate-y-1/2 transform rounded-full bg-white hover:bg-opacity-100 bg-opacity-50 p-2"
+            className="absolute right-4 top-1/2 -translate-y-1/2 transform rounded-full bg-white/50 hover:bg-white/100 p-2"
             onClick={(e) => {
               e.stopPropagation();
               handleNavigation('next');

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/RoadmapSelector.tsx

@@ -286,7 +286,7 @@ export function RoadmapSelector(props: RoadmapSelectorProps) {
                   className="relative flex flex-col items-start overflow-hidden rounded-md border border-gray-300"
                   key={resourceId}
                 >
-                  <div className={'w-full flex-grow px-3 pb-2 pt-4'}>
+                  <div className={'w-full grow px-3 pb-2 pt-4'}>
                     <span className="mb-0.5 block text-base font-medium leading-snug text-black">
                       {roadmapTitle}
                     </span>
@@ -341,7 +341,7 @@ export function RoadmapSelector(props: RoadmapSelectorProps) {
                       <button
                         type="button"
                         className={
-                          'text-xs text-gray-500 underline hover:text-black focus:outline-none'
+                          'text-xs text-gray-500 underline hover:text-black focus:outline-hidden'
                         }
                         onClick={() => {
                           if (isCustomResource) {

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/Step1.tsx

@@ -135,7 +135,7 @@ export function Step1(props: Step1Props) {
           ref={nameRef as any}
           autoFocus={true}
           id="name"
-          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="Roadmap Inc."
           disabled={isLoading}
           required
@@ -157,7 +157,7 @@ export function Step1(props: Step1Props) {
             name="website"
             required
             id="website"
-            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="https://roadmap.sh"
             disabled={isLoading}
             value={website}
@@ -178,7 +178,7 @@ export function Step1(props: Step1Props) {
             type="url"
             name="website"
             id="website"
-            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="https://www.linkedin.com/company/roadmapsh"
             disabled={isLoading}
             value={linkedInUrl}
@@ -200,7 +200,7 @@ export function Step1(props: Step1Props) {
           type="url"
           name="website"
           id="website"
-          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="https://github.com/roadmapsh"
           disabled={isLoading}
           value={gitHubUrl}
@@ -219,7 +219,7 @@ export function Step1(props: Step1Props) {
           <select
             name="team-size"
             id="team-size"
-            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"
             required={selectedTeamType === 'company'}
             disabled={isLoading}
             value={teamSize}

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/CreateRoadmap/CreateRoadmapModal.tsx

@@ -179,7 +179,7 @@ export function CreateRoadmapModal(props: CreateRoadmapModalProps) {
               name="title"
               id="title"
               required
-              className="block w-full rounded-md border border-gray-300 px-2.5 py-2 text-black outline-none focus:border-black sm:text-sm"
+              className="block w-full rounded-md border border-gray-300 px-2.5 py-2 text-black outline-hidden focus:border-black sm:text-sm"
               placeholder="Enter Title"
               value={title}
               onChange={(e) => setTitle(e.target.value)}
@@ -199,7 +199,7 @@ export function CreateRoadmapModal(props: CreateRoadmapModalProps) {
               name="description"
               required
               className={cn(
-                'block h-24 w-full resize-none rounded-md border border-gray-300 px-2.5 py-2 text-black outline-none focus:border-black sm:text-sm',
+                'block h-24 w-full resize-none rounded-md border border-gray-300 px-2.5 py-2 text-black outline-hidden focus:border-black sm:text-sm',
                 isInvalidDescription && 'border-red-300 bg-red-100',
               )}
               placeholder="Enter Description"
@@ -219,7 +219,7 @@ export function CreateRoadmapModal(props: CreateRoadmapModalProps) {
             onClick={onClose}
             type="button"
             className={cn(
-              'block h-9 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',
+              'block h-9 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',
               !teamId && 'w-full',
             )}
           >
@@ -232,7 +232,7 @@ export function CreateRoadmapModal(props: CreateRoadmapModalProps) {
                 disabled={isLoading}
                 type="button"
                 onClick={(e) => handleSubmit(e, false)}
-                className="flex h-9 items-center justify-center rounded-md border border-black bg-white px-4 py-2 text-sm font-medium text-black outline-none hover:bg-black hover:text-white focus:bg-black focus:text-white"
+                className="flex h-9 items-center justify-center rounded-md border border-black bg-white px-4 py-2 text-sm font-medium text-black outline-hidden hover:bg-black hover:text-white focus:bg-black focus:text-white"
               >
                 {isLoading ? (
                   <Loader2 size={16} className="animate-spin" />
@@ -246,7 +246,7 @@ export function CreateRoadmapModal(props: CreateRoadmapModalProps) {
               disabled={isLoading}
               type="submit"
               className={cn(
-                'flex h-9 items-center justify-center rounded-md border border-transparent bg-black px-4 py-2 text-sm font-medium text-white outline-none hover:bg-gray-800 focus:bg-gray-800',
+                'flex h-9 items-center justify-center rounded-md border border-transparent bg-black px-4 py-2 text-sm font-medium text-white outline-hidden hover:bg-gray-800 focus:bg-gray-800',
                 teamId ? 'hidden sm:flex' : 'w-full',
               )}
             >

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/RateRoadmapForm.tsx

@@ -231,7 +231,7 @@ export function RateRoadmapForm(props: RateRoadmapFormProps) {
               </label>
               <textarea
                 id="rating-feedback"
-                className="min-h-24 rounded-md border p-2 text-sm outline-none focus:border-gray-500"
+                className="min-h-24 rounded-md border p-2 text-sm outline-hidden focus:border-gray-500"
                 placeholder="Share your thoughts with the roadmap creator"
                 value={userFeedback}
                 onChange={(e) => {

src/components/CustomRoadmap/ResourceProgressStats.tsx

@@ -55,7 +55,7 @@ export function ResourceProgressStats(props: ResourceProgressStatsProps) {
           className="flex text-sm opacity-0 transition-opacity duration-300"
           data-progress-nums=""
         >
-          <span className="mr-2.5 rounded-sm bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900">
+          <span className="mr-2.5 rounded-xs bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900">
             <span data-progress-percentage="">0</span>% Done
           </span>
 

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

@@ -53,7 +53,7 @@ export function DashboardAiRoadmaps(props: DashboardAiRoadmapsProps) {
               <a
                 key={roadmap.id}
                 href={`/ai-roadmaps/${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

@@ -37,7 +37,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="flex-shrink-0 bg-transparent text-xs text-gray-400 no-underline">
+      <span className="grow truncate group-hover:underline">{title.replace(/(System)|(Service)/, '')}</span>
+      <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/PersonalDashboard.tsx

@@ -392,7 +392,7 @@ export function PersonalDashboard(props: PersonalDashboardProps) {
         isLoading={isLoading}
       />
 
-      <div className="bg-gradient-to-b from-slate-900 to-black pb-12">
+      <div className="bg-linear-to-b from-slate-900 to-black pb-12">
         <div className="relative mt-6 border-t border-t-[#1e293c] pt-12">
           <div className="container">
             <h2

src/components/Dashboard/ProgressStack.tsx

@@ -67,7 +67,7 @@ function ProgressLane(props: ProgressLaneProps) {
   return (
     <div
       className={cn(
-        'flex h-full flex-col rounded-md border bg-white px-4 py-3 shadow-sm',
+        'flex h-full flex-col rounded-md border bg-white px-4 py-3 shadow-xs',
         className,
       )}
     >
@@ -92,7 +92,7 @@ function ProgressLane(props: ProgressLaneProps) {
         </div>
       )}
 
-      <div className="mt-4 flex flex-grow flex-col gap-1.5">
+      <div className="mt-4 flex grow flex-col gap-1.5">
         {isLoading && (
           <div
             className={cn('grid grid-cols-2 gap-2', loadingWrapperClassName)}
@@ -105,7 +105,7 @@ function ProgressLane(props: ProgressLaneProps) {
         {!isLoading && children}
 
         {!isLoading && isEmpty && (
-          <div className="flex flex-grow flex-col items-center justify-center text-gray-500">
+          <div className="flex grow flex-col items-center justify-center text-gray-500">
             <EmptyIcon
               size={37}
               strokeWidth={1.5}
@@ -201,7 +201,7 @@ export function ProgressStack(props: ProgressStackProps) {
             emptyLinkHref={'/roadmaps'}
             emptyLinkText={'Explore Roadmaps'}
           >
-            <div className="grid flex-grow auto-rows-min grid-cols-2 items-start gap-2">
+            <div className="grid grow auto-rows-min grid-cols-2 items-start gap-2">
               {userProgressesToShow.length > 0 && (
                 <>
                   {userProgressesToShow.map((progress) => {
@@ -351,7 +351,7 @@ function StatsCard(props: StatsCardProps) {
   const { title, value, isLoading = false } = props;
 
   return (
-    <div className="flex flex-col gap-1 rounded-md border bg-white p-4 shadow-sm">
+    <div className="flex flex-col gap-1 rounded-md border bg-white p-4 shadow-xs">
       <h3 className="mb-1 text-xs uppercase text-gray-500">{title}</h3>
       {isLoading ? (
         <CardSkeleton className="h-8" />

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

@@ -1,4 +1,4 @@
-import { ArrowDownWideNarrow, Check, ChevronDown } from 'lucide-react';
+import { Check, ChevronDown } from 'lucide-react';
 import { useRef, useState } from 'react';
 import { useOutsideClick } from '../../hooks/use-outside-click';
 import type { SortByValues } from './DiscoverRoadmaps';
@@ -41,11 +41,11 @@ 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
-        className="py-15 flex w-full items-center justify-between gap-2 rounded-md border px-2 text-sm bg-white"
+        className="flex w-full items-center justify-between gap-2 rounded-md border bg-white px-2 text-sm"
         onClick={() => setIsOpen(!isOpen)}
       >
         <span>{selectedValue?.label}</span>
@@ -56,7 +56,7 @@ export function DiscoverRoadmapSorting(props: DiscoverRoadmapSortingProps) {
       </button>
 
       {isOpen && (
-        <div className="absolute right-0 top-10 z-10 min-w-40 overflow-hidden rounded-md border border-gray-200 bg-white shadow-lg">
+        <div className="absolute top-10 right-0 z-10 min-w-40 overflow-hidden rounded-md border border-gray-200 bg-white shadow-lg">
           {sortingLabels.map((item) => (
             <button
               key={item.value}

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/FeaturedGuideList.tsx

@@ -33,7 +33,7 @@ export function FeaturedGuideList(props: FeaturedGuidesProps) {
 
       <a
         href="/guides"
-        className="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"
+        className="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/FeaturedGuides/GuideListItem.tsx

@@ -36,7 +36,7 @@ export function GuideListItem(props: GuideListItemProps) {
         {frontmatter.title}
 
         {frontmatter.isNew && (
-          <span className="ml-2.5 rounded-sm bg-green-300 px-1.5 py-0.5 text-xs font-medium uppercase text-green-900">
+          <span className="ml-2.5 rounded-xs bg-green-300 px-1.5 py-0.5 text-xs font-medium uppercase text-green-900">
             New
             <span className="hidden sm:inline">
               &nbsp;&middot;&nbsp;

src/components/FeaturedVideos/FeaturedVideoList.tsx

@@ -21,7 +21,7 @@ export function FeaturedVideoList(props: FeaturedVideoListProps) {
 
       <a
         href="/videos"
-        className="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"
+        className="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 Videos &rarr;
       </a>

src/components/FeaturedVideos/VideoListItem.tsx

@@ -17,7 +17,7 @@ export function VideoListItem(props: VideoListItemProps) {
         {frontmatter.title}
 
         {frontmatter.isNew && (
-          <span className="bg-green-300 text-green-900 text-xs font-medium px-1.5 py-0.5 rounded-sm uppercase ml-1.5">
+          <span className="bg-green-300 text-green-900 text-xs font-medium px-1.5 py-0.5 rounded-xs uppercase ml-1.5">
             New
             <span className="hidden sm:inline">
               &middot;

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/GenerateCourse/AICourse.tsx

@@ -72,7 +72,7 @@ export function AICourse(props: AICourseProps) {
   }
 
   return (
-    <section className="flex flex-grow flex-col bg-gray-100">
+    <section className="flex grow flex-col bg-gray-100">
       <div className="container mx-auto flex max-w-3xl flex-col py-24 max-sm:py-4">
         <h1 className="mb-2.5 text-center text-4xl font-bold max-sm:mb-2 max-sm:text-left max-sm:text-xl">
           Learn anything with AI
@@ -107,7 +107,7 @@ export function AICourse(props: AICourseProps) {
                   onChange={(e) => setKeyword(e.target.value)}
                   onKeyDown={handleKeyDown}
                   placeholder="e.g., Algebra, JavaScript, Photography"
-                  className="w-full rounded-md border border-gray-300 bg-white p-3 pl-10 text-gray-900 focus:outline-none focus:ring-1 focus:ring-gray-500 max-sm:placeholder:text-base"
+                  className="w-full rounded-md border border-gray-300 bg-white p-3 pl-10 text-gray-900 focus:outline-hidden focus:ring-1 focus:ring-gray-500 max-sm:placeholder:text-base"
                   maxLength={50}
                 />
               </div>

src/components/GenerateCourse/AICourseContent.tsx

@@ -216,7 +216,7 @@ export function AICourseContent(props: AICourseContentProps) {
   const isViewingLesson = viewMode === 'module';
 
   return (
-    <section className="flex h-screen flex-grow flex-col overflow-hidden bg-gray-50">
+    <section className="flex h-screen grow flex-col overflow-hidden bg-gray-50">
       {modals}
 
       <div className="border-b border-gray-200 bg-gray-100">
@@ -246,7 +246,7 @@ export function AICourseContent(props: AICourseContentProps) {
             {viewMode === 'module' && (
               <button
                 onClick={() => setIsAIChatsOpen(!isAIChatsOpen)}
-                className="flex items-center justify-center text-gray-400 shadow-sm transition-colors hover:bg-gray-50 hover:text-gray-900 lg:hidden"
+                className="flex items-center justify-center text-gray-400 shadow-xs transition-colors hover:bg-gray-50 hover:text-gray-900 lg:hidden"
               >
                 {isAIChatsOpen ? (
                   <MessageCircleOffIcon size={17} strokeWidth={3} />
@@ -258,7 +258,7 @@ export function AICourseContent(props: AICourseContentProps) {
 
             <button
               onClick={() => setSidebarOpen(!sidebarOpen)}
-              className="flex items-center justify-center text-gray-400 shadow-sm transition-colors hover:bg-gray-50 hover:text-gray-900 lg:hidden"
+              className="flex items-center justify-center text-gray-400 shadow-xs transition-colors hover:bg-gray-50 hover:text-gray-900 lg:hidden"
             >
               {sidebarOpen ? (
                 <X size={17} strokeWidth={3} />
@@ -272,7 +272,7 @@ export function AICourseContent(props: AICourseContentProps) {
       <header className="flex items-center justify-between border-b border-gray-200 bg-white px-6 max-lg:py-4 lg:h-[80px]">
         <div className="flex items-center">
           <div className="flex flex-col">
-            <h1 className="text-balance text-xl font-bold !leading-tight text-gray-900 max-lg:mb-0.5 max-lg:text-lg">
+            <h1 className="text-balance text-xl font-bold leading-tight! text-gray-900 max-lg:mb-0.5 max-lg:text-lg">
               {course.title || 'Loading Course...'}
             </h1>
             <div className="mt-1 flex flex-row items-center gap-2 text-sm text-gray-600 max-lg:text-xs">
@@ -354,7 +354,7 @@ export function AICourseContent(props: AICourseContentProps) {
                       setViewMode('outline');
                     }}
                     className={cn(
-                      'flex items-center gap-1 rounded px-2 py-1 text-xs transition-colors',
+                      'flex items-center gap-1 rounded-sm px-2 py-1 text-xs transition-colors',
                       viewMode === 'outline'
                         ? 'bg-gray-200 text-gray-900'
                         : 'text-gray-600 hover:bg-gray-50',
@@ -369,7 +369,7 @@ export function AICourseContent(props: AICourseContentProps) {
                       setViewMode('roadmap');
                     }}
                     className={cn(
-                      'flex items-center gap-1 rounded px-2 py-1 text-xs transition-colors',
+                      'flex items-center gap-1 rounded-sm px-2 py-1 text-xs transition-colors',
                       viewMode === 'roadmap'
                         ? 'bg-gray-200 text-gray-900'
                         : 'text-gray-600 hover:bg-gray-50',
@@ -475,7 +475,7 @@ export function AICourseContent(props: AICourseContentProps) {
 
       {sidebarOpen && (
         <div
-          className="fixed inset-0 z-10 bg-gray-900 bg-opacity-50 lg:hidden"
+          className="fixed inset-0 z-10 bg-gray-900/50 lg:hidden"
           onClick={() => setSidebarOpen(false)}
         ></div>
       )}

src/components/GenerateCourse/AICourseLesson.tsx

@@ -278,7 +278,7 @@ export function AICourseLesson(props: AICourseLessonProps) {
           defaultSize={isAIChatsOpen ? 70 : 100}
           minSize={40}
           id="course-text-content"
-          className="h-full !overflow-y-scroll bg-white"
+          className="h-full overflow-y-scroll! bg-white"
           order={1}
         >
           <div className="relative mx-auto max-w-5xl">
@@ -402,7 +402,7 @@ export function AICourseLesson(props: AICourseLessonProps) {
 
               {!isLoggedIn() && (
                 <div className="mt-8 flex min-h-[152px] flex-col items-center justify-center gap-3 rounded-lg border border-gray-200 p-8">
-                  <LockIcon className="size-7 stroke-[2] text-gray-400/90" />
+                  <LockIcon className="size-7 stroke-2 text-gray-400/90" />
                   <p className="text-sm text-gray-500">
                     Please login to generate course content
                   </p>

src/components/GenerateCourse/AICourseLessonChat.tsx

@@ -345,7 +345,7 @@ export function AICourseLessonChat(props: AICourseLessonChatProps) {
           )}
           <TextareaAutosize
             className={cn(
-              'h-full min-h-[41px] grow resize-none bg-transparent px-4 py-2 focus:outline-none',
+              'h-full min-h-[41px] grow resize-none bg-transparent px-4 py-2 focus:outline-hidden',
               isDisabled ? 'cursor-not-allowed opacity-50' : 'cursor-auto',
             )}
             placeholder="Ask AI anything about the lesson..."

src/components/GenerateCourse/AICourseOutlineView.tsx

@@ -35,7 +35,7 @@ export function AICourseOutlineView(props: AICourseOutlineViewProps) {
   const aiCourseProgress = course.done || [];
 
   return (
-    <div className="mx-auto rounded-xl border border-gray-200 bg-white shadow-sm lg:max-w-5xl">
+    <div className="mx-auto rounded-xl border border-gray-200 bg-white shadow-xs lg:max-w-5xl">
       <AICourseOutlineHeader
         course={course}
         isLoading={isLoading}
@@ -82,7 +82,7 @@ export function AICourseOutlineView(props: AICourseOutlineViewProps) {
                         {!isCompleted && (
                           <span
                             className={cn(
-                              'flex size-6 flex-shrink-0 items-center justify-center rounded-full bg-gray-200 text-sm font-medium text-gray-800 max-lg:size-5 max-lg:text-xs',
+                              'flex size-6 shrink-0 items-center justify-center rounded-full bg-gray-200 text-sm font-medium text-gray-800 max-lg:size-5 max-lg:text-xs',
                             )}
                           >
                             {lessonIdx + 1}
@@ -90,7 +90,7 @@ export function AICourseOutlineView(props: AICourseOutlineViewProps) {
                         )}
 
                         {isCompleted && (
-                          <CheckIcon additionalClasses="size-6 flex-shrink-0 text-green-500" />
+                          <CheckIcon additionalClasses="size-6 shrink-0 text-green-500" />
                         )}
 
                         <p className="flex-1 truncate text-base text-gray-800 max-lg:text-sm">

src/components/GenerateCourse/AICourseRoadmapView.tsx

@@ -206,7 +206,7 @@ export function AICourseRoadmapView(props: AICourseRoadmapViewProps) {
   );
 
   return (
-    <div className="relative mx-auto min-h-[500px] rounded-xl border border-gray-200 bg-white shadow-sm lg:max-w-5xl">
+    <div className="relative mx-auto min-h-[500px] rounded-xl border border-gray-200 bg-white shadow-xs lg:max-w-5xl">
       <AICourseOutlineHeader
         course={course}
         isLoading={isLoading}