Squashed commit of the following:

commit abff5e2
Author: Tanner Linsley <[email protected]>
Date:   Tue Aug 12 19:07:36 2025 -0600

    more conflict resolution

commit 006fd8c
Author: Leonardo Montini <[email protected]>
Date:   Fri Aug 8 17:32:31 2025 +0200

    fix: revert splash afphoto

commit 288476c
Author: Leonardo Montini <[email protected]>
Date:   Fri Aug 8 17:30:43 2025 +0200

    fix: small menu height

commit 931f4d5
Author: Leonardo Montini <[email protected]>
Date:   Fri Aug 8 17:01:32 2025 +0200

    cleanup

commit fb3e69d
Author: Leonardo Montini <[email protected]>
Date:   Fri Aug 8 15:57:49 2025 +0200

    feat: migrate tailwind config

commit abd4027
Author: Leonardo Montini <[email protected]>
Date:   Fri Aug 8 15:15:39 2025 +0200

    feat: update spacings

commit ffa0128
Author: Leonardo Montini <[email protected]>
Date:   Fri Aug 8 13:48:35 2025 +0200

    feat: update colors

commit 6af1d56
Author: Leonardo Montini <[email protected]>
Date:   Fri Aug 8 11:58:11 2025 +0200

    feat: tailwind migration tool

Author: tannerlinsley

.gitignore

@@ -2,6 +2,7 @@ node_modules
 package-lock.json
 yarn.lock
 
+.tanstack
 .DS_Store
 .cache
 .env

media/splash/splash-dark.afphoto

@@ -33,6 +33,7 @@
     "@sentry/react": "^8.35.0",
     "@sentry/vite-plugin": "^2.22.6",
     "@tailwindcss/typography": "^0.5.13",
+    "@tailwindcss/vite": "^4.1.11",
     "@tanstack/react-pacer": "^0.7.0",
     "@tanstack/react-query": "^5.84.2",
     "@tanstack/react-router": "1.131.2",
@@ -92,7 +93,7 @@
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.35",
     "prettier": "^2.8.8",
-    "tailwindcss": "^3.4.1",
+    "tailwindcss": "^4.1.11",
     "typescript": "^5.6.3",
     "vite": "^6.3.5"
   },

media/splash/splash-light.afphoto

@@ -121,7 +121,7 @@ export function Doc({
         <div
           className={twMerge(
             'flex overflow-auto flex-col w-full p-4 lg:p-6',
-            isTocVisible && '!pr-0'
+            isTocVisible && 'pr-0!'
           )}
         >
           <AdGate>
@@ -133,7 +133,7 @@ export function Doc({
               {setIsFullWidth && (
                 <button
                   onClick={() => setIsFullWidth(!isFullWidth)}
-                  className="p-2 mr-4 text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors flex-shrink-0 hidden [@media(min-width:1800px)]:inline-flex"
+                  className="p-2 mr-4 text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors shrink-0 hidden [@media(min-width:1800px)]:inline-flex"
                   title={isFullWidth ? 'Constrain width' : 'Expand width'}
                 >
                   {isFullWidth ? (

package.json

@@ -393,16 +393,16 @@ export function DocsLayout({
     return (
       <WrapperComp
         key={`group-${i}`}
-        className="[&>summary]:before:mr-[0.4rem] [&>summary]:marker:text-[0.8em] [&>summary]:marker:-ml-[0.3rem] [&>summary]:marker:leading-4 [&>div.ts-sidebar-label]:ml-[1rem] relative select-none"
+        className="[&>summary]:before:mr-[0.4rem] [&>summary]:marker:text-[0.8em] [&>summary]:marker:-ml-[0.3rem] [&>summary]:marker:leading-4 [&>div.ts-sidebar-label]:ml-4 relative select-none"
         {...detailsProps}
       >
         <LabelComp className="text-[.8em] uppercase font-black leading-4 ts-sidebar-label">
           {group?.label}
         </LabelComp>
         <div className="h-2" />
-        <ul className="ml-2 text-[.85em] list-none">
+        <ul className="ml-2 text-[.85em] leading-6 list-none">
           {group?.children?.map((child, i) => {
-            const linkClasses = `cursor-pointer flex gap-2 items-center justify-between group px-2 py-[.1rem] rounded-lg hover:bg-gray-500 hover:bg-opacity-10`
+            const linkClasses = `flex gap-2 items-center justify-between group px-2 py-[.1rem] rounded-lg hover:bg-gray-500/10`
 
             return (
               <li key={i}>
@@ -422,7 +422,7 @@ export function DocsLayout({
                       includeHash: false,
                       includeSearch: false,
                     }}
-                    className="!cursor-pointer relative"
+                    className="relative"
                   >
                     {(props) => {
                       return (
@@ -431,7 +431,7 @@ export function DocsLayout({
                             className={twMerge(
                               'overflow-auto w-full',
                               props.isActive
-                                ? `font-bold text-transparent bg-clip-text bg-gradient-to-r ${colorFrom} ${colorTo}`
+                                ? `font-bold text-transparent bg-clip-text bg-linear-to-r ${colorFrom} ${colorTo}`
                                 : ''
                             )}
                           >
@@ -494,7 +494,7 @@ export function DocsLayout({
       <details
         ref={detailsRef as any}
         id="docs-details"
-        className="border-b border-gray-500 border-opacity-20"
+        className="border-b border-gray-500/20"
       >
         <summary className="p-4 flex gap-2 items-center justify-between">
           <div className="flex-1 flex gap-2 items-center text-xl md:text-2xl">
@@ -503,11 +503,7 @@ export function DocsLayout({
             {logo}
           </div>
         </summary>
-        <div
-          className="flex flex-col gap-4 p-4 whitespace-nowrap h-[0vh] overflow-y-auto
-          border-t border-gray-500 border-opacity-20 bg-white/20 text-lg
-          dark:bg-black/20"
-        >
+        <div className="flex flex-col gap-4 p-4 whitespace-nowrap overflow-y-auto border-t border-gray-500/20 bg-white/20 text-lg dark:bg-black/20">
           <div className="flex gap-4">
             <FrameworkSelect
               label={frameworkConfig.label}
@@ -581,7 +577,7 @@ export function DocsLayout({
             {children}
           </div>
           <AdGate>
-            <div className="mb-8 !py-0 mx-auto max-w-full overflow-x-hidden">
+            <div className="mb-8 !py-0! mx-auto max-w-full overflow-x-hidden">
               <GamFooter />
             </div>
           </AdGate>
@@ -609,7 +605,7 @@ export function DocsLayout({
                 >
                   <div className="flex gap-2 items-center font-bold">
                     <span
-                      className={`bg-gradient-to-r ${colorFrom} ${colorTo} bg-clip-text text-transparent`}
+                      className={`bg-linear-to-r ${colorFrom} ${colorTo} bg-clip-text text-transparent`}
                     >
                       {nextItem.label}
                     </span>{' '}

pnpm-lock.yaml

@@ -16,7 +16,7 @@ export const DocsLogo = ({
   colorTo,
   libraryId,
 }: Props) => {
-  const gradientText = `inline-block text-transparent bg-clip-text bg-gradient-to-r ${colorFrom} ${colorTo}`
+  const gradientText = `inline-block text-transparent bg-clip-text bg-linear-to-r ${colorFrom} ${colorTo}`
 
   return (
     <>

postcss.config.cjs

@@ -8,6 +8,7 @@ import svelteIconUrl from '~/images/file-icons/svelte.svg?url'
 import vueIconUrl from '~/images/file-icons/vue.svg?url'
 import textIconUrl from '~/images/file-icons/txt.svg?url'
 import type { GitHubFileNode } from '~/utils/documents.server'
+import { twMerge } from 'tailwind-merge'
 
 const getFileIconPath = (filename: string) => {
   const ext = filename.split('.').pop()?.toLowerCase() || ''
@@ -210,7 +211,7 @@ export function FileExplorer({
           width: isSidebarOpen ? sidebarWidth : 0,
           paddingRight: isSidebarOpen ? '0.5rem' : 0,
         }}
-        className={`flex-shrink-0 overflow-y-auto bg-gradient-to-r from-gray-50 via-gray-50 to-transparent dark:from-gray-800/50 dark:via-gray-800/50 dark:to-transparent shadow-sm ${
+        className={`shrink-0 overflow-y-auto bg-linear-to-r from-gray-50 via-gray-50 to-transparent dark:from-gray-800/50 dark:via-gray-800/50 dark:to-transparent shadow-sm ${
           isResizing ? '' : 'transition-all duration-300'
         }`}
       >
@@ -289,16 +290,14 @@ const RenderFileTree = (props: {
               onMouseEnter={() =>
                 file.type !== 'dir' && props.prefetchFileContent(file.path)
               }
-              className={`px-2 py-1.5 text-left w-full flex items-center gap-2 text-sm rounded transition-colors duration-200 min-w-0 ${
+              className={twMerge(
+                `px-2 py-1.5 text-left w-full flex items-center gap-2 text-sm rounded transition-colors duration-200 min-w-0`,
                 props.currentPath === file.path
-                  ? `${props.libraryColor.replace(
-                      'bg-',
-                      'bg-opacity-20 bg-'
-                    )} text-gray-900 dark:text-white shadow-sm`
+                  ? `${props.libraryColor}/20 text-gray-900 dark:text-white shadow-sm`
                   : 'hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300'
-              }`}
+              )}
             >
-              <span className="flex-shrink-0 select-none">
+              <span className="shrink-0 select-none">
                 {file.type === 'dir' ? (
                   <FolderIcon isOpen={props.expandedFolders.has(file.path)} />
                 ) : (