refactor: Upgrade to Tailwind 4

deno.json

@@ -54,6 +54,7 @@
     "@std/fmt": "jsr:@std/fmt@^1.0.8",
     "@std/front-matter": "jsr:@std/front-matter@^1.0.5",
     "@std/path": "jsr:@std/path@^1.0.8",
+    "@std/semver": "jsr:@std/semver@^1.0.8",
     "@orama/core": "npm:@orama/core@^1.2.17",
     "github-slugger": "npm:github-slugger@^2.0.0",
     "postgres": "https://deno.land/x/postgres@v0.19.5/mod.ts"

frontend/components/GitHubRepoInput.tsx

@@ -48,7 +48,7 @@ export function GitHubRepoInput(
   return (
     <div class="flex items-center w-full md:w-88 rounded-md text-primary shadow-sm pl-3 py-[2px] pr-[2px] sm:text-sm sm:leading-6 bg-white dark:bg-jsr-gray-900 input-container">
       <span class="block">
-        <TbBrandGithub class="!size-5" />
+        <TbBrandGithub class="size-5!" />
       </span>
       <input
         id={id}

frontend/components/Header.tsx

@@ -62,7 +62,7 @@ export function Header({
               <HeaderLogo class="h-8 flex-none" />
             </a>
           )}
-          <div class="hidden sm:block grow-1 flex-1">
+          <div class="hidden sm:block grow flex-1">
             {!isHomepage && (
               <GlobalSearch
                 query={(url.pathname === "/packages"

frontend/components/HomepageHero.tsx

@@ -25,7 +25,7 @@ export function HomepageHero(
 ) {
   return (
     <div
-      class="w-screen -ml-[calc(50vw-50%)] -mt-6 bg-repeat py-32 lg:pt-48 relative before:absolute before:left-0 before:right-0 before:h-32 before:bg-gradient-to-t before:from-white dark:before:from-jsr-gray-950 before:bottom-0 before:z-10 before:pointer-events-none"
+      class="w-screen -ml-[calc(50vw-50%)] -mt-6 bg-repeat py-32 lg:pt-48 relative before:absolute before:left-0 before:right-0 before:h-32 before:bg-linear-to-t before:from-white dark:before:from-jsr-gray-950 before:bottom-0 before:z-10 before:pointer-events-none"
       id="particles-js"
     >
       <script src={asset("/scripts/particles.js")} defer></script>

frontend/components/List.tsx

@@ -42,7 +42,7 @@ export function ListDisplay(
             >
               {item.content}
 
-              <TbChevronRight class="text-jsr-cyan-800 dark:text-jsr-cyan-400 flex-shrink-0 size-6" />
+              <TbChevronRight class="text-jsr-cyan-800 dark:text-jsr-cyan-400 shrink-0 size-6" />
             </a>
           </li>
         ))}

frontend/components/NavOverflow.tsx

@@ -71,7 +71,7 @@ export function NavOverflow() {
         </span>
         <div
           id="nav-menu"
-          class="absolute top-[120%] -right-2 z-[70] px-1 py-2 rounded border-1.5 border-current dark:border-cyan-700 bg-white dark:bg-jsr-gray-950 w-56 shadow overflow-hidden opacity-100 translate-y-0 transition [&>a]:rounded hidden"
+          class="absolute top-[120%] -right-2 z-70 px-1 py-2 rounded border-1.5 border-current dark:border-cyan-700 bg-white dark:bg-jsr-gray-950 w-56 shadow overflow-hidden opacity-100 translate-y-0 transition [&>a]:rounded hidden"
         />
       </button>
       <script

frontend/components/NewsCard.tsx

@@ -23,8 +23,8 @@ export function NewsCard({
           alt=""
           class="w-full h-48 object-cover border-b-1.5 border-jsr-cyan-950 dark:border-jsr-gray-700 group-hover:border-jsr-cyan-400 dark:group-hover:border-cyan-500 group-focus-within:border-jsr-cyan-400 dark:group-focus-within:border-cyan-500 transition-colors duration-150"
         />
-        <div class="p-4 flex flex-grow flex-col gap-4">
-          <h3 class="text-xl lg:text-2xl font-semibold !leading-tight text-balance">
+        <div class="p-4 flex grow flex-col gap-4">
+          <h3 class="text-xl lg:text-2xl font-semibold leading-tight! text-balance">
             {title}
           </h3>
           <p class="text-sm">

frontend/components/PackageHit.tsx

@@ -15,8 +15,8 @@ export function PackageHit(pkg: OramaPackageHit | Package): ListDisplayItem {
   return {
     href: `/@${pkg.scope}/${pkg.name}`,
     content: (
-      <div class="grow-1 w-full flex flex-col md:flex-row gap-2 justify-between">
-        <div class="grow-1">
+      <div class="grow w-full flex flex-col md:flex-row gap-2 justify-between">
+        <div class="grow">
           <div class="flex flex-wrap items-baseline gap-x-2 mb-2 md:mb-0">
             <span class="text-jsr-cyan-700 dark:text-cyan-400 font-semibold">
               {`@${pkg.scope}/${pkg.name}`}

frontend/components/doc/CategoryPanel.tsx

@@ -22,7 +22,7 @@ export function CategoryPanel(
           </li>
         ))}
         <li>
-          <a class="!flex items-center gap-0.5" href={all_symbols_href}>
+          <a class="flex! items-center gap-0.5" href={all_symbols_href}>
             <span class="leading-none">view all {total_symbols} symbols</span>
             <TbChevronRight class="size-4" />
           </a>

frontend/components/doc/DocEntry.tsx

@@ -17,7 +17,7 @@ export function DocEntry(
       id={id}
     >
       <div class="flex justify-between items-start md:text-base">
-        <div class="break-words">
+        <div class="wrap-break-word">
           {tags && tags.length > 0 && (
             <div class="space-x-1 mb-1">
               {tags.map((tag, i) => <Tag key={i} tag={tag} />)}

frontend/components/doc/Function.tsx

@@ -10,7 +10,7 @@ export function Function({ func: { functions } }: { func: FunctionCtx }) {
       {functions.map((func, index) => (
         <>
           <div class="scroll-mt-16" id={func.id}>
-            <code class="anchorable text-base break-words">
+            <code class="anchorable text-base wrap-break-word">
               <Anchor anchor={func.anchor} />
               <span class="font-bold">{func.name}</span>
               <span

frontend/components/doc/NamespaceSection.tsx

@@ -4,18 +4,18 @@ import { DocNodeKindIcon } from "./DocNodeKindIcon.tsx";
 
 export function NamespaceSection({ items }: { items: NamespaceNodeCtx[] }) {
   return (
-    <div class="space-y-2 !mt-6 max-w-prose">
+    <div class="space-y-2 mt-6! max-w-prose">
       {items.map((item) => (
         <div
           id={item.id}
-          class={`flex gap-x-2.5 md:min-h-[4rem] lg:pr-4 rounded transition duration-125 ${
+          class={`flex gap-x-2.5 md:min-h-16 lg:pr-4 rounded transition duration-125 ${
             item.deprecated ? "opacity-60" : ""
           }`}
           aria-label={item.deprecated ? "deprecated" : undefined}
         >
           <DocNodeKindIcon
             kinds={item.doc_node_kind_ctx}
-            class="w-auto flex-col !justify-start gap-1 mt-1 [&>*+*]:ml-0 [&>*+*]:-mt-0.5"
+            class="w-auto flex-col justify-start! gap-1 mt-1 [&>*+*]:ml-0 [&>*+*]:-mt-0.5"
           />
 
           <div

frontend/components/doc/SymbolGroup.tsx

@@ -31,7 +31,7 @@ export function SymbolGroup(
                 </div>
               )}
               {symbol.tags && symbol.tags.length > 0 && (
-                <div class="space-x-2 !mt-2">
+                <div class="space-x-2 mt-2!">
                   {symbol.tags.map((tag, i) => <Tag key={i} tag={tag} large />)}
                 </div>
               )}

frontend/components/doc/Toc.tsx

@@ -98,8 +98,8 @@ function renderToC(
         <li
           key={entry.anchor}
           class={isRoot
-            ? `mx-3 ${hasChildren ? "mt-0" : "mt-2"} !pb-0`
-            : "!mt-1"}
+            ? `mx-3 ${hasChildren ? "mt-0" : "mt-2"} pb-0!`
+            : "mt-1!"}
         >
           <a
             href={`#${entry.anchor}`}

frontend/deno.json

@@ -15,11 +15,11 @@
   },
   "imports": {
     "@deno/doc": "jsr:@deno/doc@^0.193.0",
-    "@fresh/plugin-tailwind-v3": "jsr:@fresh/plugin-tailwind-v3@^1.0.1",
+    "@fresh/plugin-tailwind": "jsr:@fresh/plugin-tailwind@^1.0.0",
     "apexcharts": "npm:apexcharts@^4.5.0",
     "tb-icons": "jsr:@preact-icons/tb@^1.0.14",
     "@std/fmt": "jsr:@std/fmt@^1.0.6",
-    "fresh": "jsr:@fresh/core@^2.0.0-alpha.25",
+    "fresh": "jsr:@fresh/core@^2.2.0",
 
     "preact": "npm:preact@^10",
     "preact-render-to-string": "npm:preact-render-to-string@6.3.1",
@@ -41,7 +41,7 @@
     "@orama/orama": "npm:@orama/orama@^2",
     "@orama/highlight": "npm:@orama/highlight@^0.1.8",
 
-    "tailwindcss": "npm:tailwindcss@3.4",
+    "tailwindcss": "npm:tailwindcss@4.1",
     "postcss": "npm:postcss@8.4",
 
     "@viz-js/viz": "npm:@viz-js/viz@^3.11.0"