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/Questions/QuestionCard.tsx

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

src/components/Questions/QuestionFinished.tsx

@@ -21,7 +21,7 @@ function ProgressStatLabel(props: ProgressStatButtonProps) {
   return (
     <span className="group relative flex flex-1 items-center overflow-hidden rounded-md border border-gray-300 bg-white px-2 py-2 text-sm text-black transition-colors disabled:opacity-50 sm:rounded-xl sm:px-4 sm:py-3 sm:text-base">
       {icon}
-      <span className="flex flex-grow justify-between">
+      <span className="flex grow justify-between">
         <span>{label}</span>
         <span>{count}</span>
       </span>
@@ -41,7 +41,7 @@ export function QuestionFinished(props: QuestionFinishedProps) {
   const { knowCount, didNotKnowCount, skippedCount, onReset } = props;
 
   return (
-    <div className="relative flex flex-grow flex-col items-center justify-center px-4 sm:px-0">
+    <div className="relative flex grow flex-col items-center justify-center px-4 sm:px-0">
       <PartyPopper className="mb-4 mt-10 h-14 w-14 text-gray-300 sm:mt-0 sm:h-24 sm:w-24" />
       <h1 className="text-lg font-semibold text-gray-700 sm:text-2xl">
         Questions Finished

src/components/Questions/QuestionGuide.astro

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

src/components/Questions/QuestionLoader.tsx

@@ -2,7 +2,7 @@ import {Spinner} from "../ReactIcons/Spinner";
 
 export function QuestionLoader() {
   return (
-    <div className="flex flex-grow flex-col items-center justify-center">
+    <div className="flex grow flex-col items-center justify-center">
       <p className="text-xl font-medium text-gray-500 flex items-center gap-3.5">
         <Spinner isDualRing={false} innerFill='#6b7280' className="h-5 w-5" />
         Please wait ..