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/TopicDetail/ContributionForm.tsx

@@ -56,7 +56,7 @@ function ContributionInput(props: ContributionInputProps) {
         ref={titleRef}
         type="text"
         required
-        className="block w-full rounded-md border p-2 text-sm focus:border-gray-400 focus:outline-none"
+        className="block w-full rounded-md border p-2 text-sm focus:border-gray-400 focus:outline-hidden"
         placeholder="e.g. Introduction to RESTful APIs"
         onFocus={() => setFocused('title')}
         onBlur={() => setFocused('')}
@@ -72,7 +72,7 @@ function ContributionInput(props: ContributionInputProps) {
       <input
         type="url"
         required
-        className="block w-full rounded-md border p-2 text-sm focus:border-gray-400 focus:outline-none"
+        className="block w-full rounded-md border p-2 text-sm focus:border-gray-400 focus:outline-hidden"
         placeholder="e.g. https://roadmap.sh/guides/some-url"
         onFocus={() => setFocused('link')}
         onBlur={() => setFocused('')}

src/components/TopicDetail/ResourceListSeparator.tsx

@@ -27,7 +27,7 @@ export function ResourceListSeparator(props: ResourceSeparatorProps) {
         {Icon && <Icon className="inline-block h-3 w-3 fill-current" />}
         {text}
       </span>
-      <hr className="absolute inset-x-0 flex-grow border-current" />
+      <hr className="absolute inset-x-0 grow border-current" />
     </p>
   );
 }

src/components/TopicDetail/TopicDetail.tsx

@@ -13,7 +13,7 @@ import {
   renderTopicProgress,
   updateResourceProgress as updateResourceProgressApi,
 } from '../../lib/resource-progress';
-import { pageProgressMessage, sponsorHidden } from '../../stores/page';
+import { pageProgressMessage } from '../../stores/page';
 import { TopicProgressButton } from './TopicProgressButton';
 import { showLoginPopup } from '../../lib/popup';
 import { useToast } from '../../hooks/use-toast';
@@ -340,7 +340,7 @@ export function TopicDetail(props: TopicDetailProps) {
   );
 
   return (
-    <div className={'relative z-[92]'}>
+    <div className={'relative z-92'}>
       <div
         ref={topicRef}
         tabIndex={0}
@@ -623,7 +623,7 @@ export function TopicDetail(props: TopicDetailProps) {
           </>
         )}
       </div>
-      <div className="fixed inset-0 z-30 bg-gray-900 bg-opacity-50 dark:bg-opacity-80"></div>
+      <div className="fixed inset-0 z-30 bg-gray-900/50"></div>
     </div>
   );
 }

src/components/TopicDetail/TopicDetailLink.tsx

@@ -40,7 +40,7 @@ export function TopicDetailLink(props: TopicDetailLinkProps) {
     >
       <span
         className={cn(
-          'mr-2 inline-block rounded px-1.5 py-0.5 text-xs capitalize no-underline',
+          'mr-2 inline-block rounded-sm px-1.5 py-0.5 text-xs capitalize no-underline',
           (isPaid ? paidLinkTypes[type] : linkTypes[type]) || 'bg-gray-200',
         )}
       >