Migrate to Tailwind 4 + Editor Upgrade (#8465)

* 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>

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