TanStack · Balastrong · Aug 8, 2025 · Aug 8, 2025 · Aug 8, 2025 · Aug 8, 2025
diff --git a/.gitignore b/.gitignore
@@ -2,6 +2,7 @@ node_modules
 package-lock.json
 yarn.lock
 
+.tanstack
 .DS_Store
 .cache
 .env

diff --git a/package.json b/package.json
@@ -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"
   },

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/postcss.config.cjs b/postcss.config.cjs
diff --git a/src/components/Doc.tsx b/src/components/Doc.tsx
@@ -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 ? (

diff --git a/src/components/DocsLayout.tsx b/src/components/DocsLayout.tsx
@@ -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>{' '}

diff --git a/src/components/DocsLogo.tsx b/src/components/DocsLogo.tsx
@@ -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 (
     <>

diff --git a/src/components/FileExplorer.tsx b/src/components/FileExplorer.tsx
@@ -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)} />
                 ) : (

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -30,7 +30,7 @@ export function Footer() {
   return (
     <div
       className={`flex flex-col items-start justify-center gap-4 p-8
-      max-w-screen-lg mx-auto text-sm
+      max-w-(--breakpoint-lg) mx-auto text-sm
       bg-white dark:bg-black/40 shadow-xl shadow-black/10 rounded-lg`}
     >
       <div className={`grid gap-1 sm:grid-cols-2 md:grid-cols-3`}>

diff --git a/src/components/FrameworkSelect.tsx b/src/components/FrameworkSelect.tsx
@@ -69,7 +69,7 @@ export function FrameworkSelect<T extends SelectOption>({
               leaveFrom="opacity-100"
               leaveTo="opacity-0"
             >
-              <Listbox.Options className="absolute z-10 dark:bg-gray-800 dark:border-2 border-gray-600/70 mt-1 max-h-60 w-fit overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+              <Listbox.Options className="absolute z-10 dark:bg-gray-800 dark:border-2 border-gray-600/70 mt-1 max-h-60 w-fit overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm">
                 {Object.values(available).map((option) => (
                   <Listbox.Option
                     key={option.value}

diff --git a/src/components/Gam.tsx b/src/components/Gam.tsx
@@ -79,7 +79,7 @@ function GamAd({
   const gamId = gamDivs[name]
 
   return (
-    <div {...props} className="grid [&>*]:col-start-1 [&>*]:row-start-1">
+    <div {...props} className="grid *:col-start-1 *:row-start-1">
       {/* <div className="flex items-center justify-center">{children}</div> */}
       <div data-fuse={gamId} className="w-full min-h-[200px]" />
     </div>
@@ -110,7 +110,7 @@ export function GamRightRailSquare() {
   return (
     <GamAd
       name="mrec_1"
-      className="[aspect-ratio:250/250] xl:[aspect-ratio:300/250] flex items-center justify-center"
+      className="aspect-250/250 xl:aspect-300/250 flex items-center justify-center"
     >
       <Link
         to={`/${randomLibrary.id}` as any}
@@ -120,7 +120,7 @@ export function GamRightRailSquare() {
           <span>TanStack</span>
           <span
             className={twMerge(
-              'text-transparent bg-clip-text bg-gradient-to-r',
+              'text-transparent bg-clip-text bg-linear-to-r',
               randomLibrary.colorFrom,
               randomLibrary.colorTo
             )}
@@ -154,7 +154,7 @@ export function GamLeftRailSquare() {
   return (
     <GamAd
       name="mrec_2"
-      className="[aspect-ratio:250/250] xl:[aspect-ratio:300/250] flex items-center justify-center"
+      className="aspect-250/250 xl:aspect-300/250 flex items-center justify-center"
     >
       <Link
         to={`/${randomRemainingLibrary.id}` as any}
@@ -164,7 +164,7 @@ export function GamLeftRailSquare() {
           <span>TanStack</span>
           <span
             className={twMerge(
-              'text-transparent bg-clip-text bg-gradient-to-r',
+              'text-transparent bg-clip-text bg-linear-to-r',
               randomRemainingLibrary.colorFrom,
               randomRemainingLibrary.colorTo
             )}

diff --git a/src/components/LandingPageGad.tsx b/src/components/LandingPageGad.tsx
@@ -9,32 +9,32 @@ export default function LandingPageGad() {
         <div className="flex flex-col gap-4 items-center">
           <div className="shadow-lg rounded-lg overflow-hidden bg-white dark:bg-gray-800 dark:text-white mx-auto">
             <GamFooter />
-            <div
-              className="text-xs bg-gray-500 bg-opacity-10 py-2 px-4 rounded text-gray-600 dark:text-gray-300
-                dark:bg-opacity-20 self-center text-center w-[500px] max-w-full space-y-2"
-            >
-              <div>
-                <span className="font-medium italic">
-                  An ad on an open source project?
-                </span>{' '}
-                <span className="font-black">What is this, 1999?</span>
-              </div>
-              <div>
-                <span className="font-medium italic">Please...</span> TanStack
-                is 100% privately owned, with no paid products, venture capital,
-                or acquisition plans. We're a small team dedicated to creating
-                software used by millions daily. What did you expect?
-              </div>
-              <div>
-                <Link
-                  to="/ethos"
-                  className="text-gray-600 dark:text-gray-200 font-bold underline"
-                >
-                  Check out our ethos
-                </Link>{' '}
-                to learn more about how we plan on sticking around (and staying
-                relevant) for the long-haul.
-              </div>
+          </div>
+          <div
+            className="text-xs bg-gray-500/10 py-2 px-4 rounded text-gray-600 dark:text-gray-300
+                dark:bg-gray-500/20 self-center text-center w-[500px] max-w-full space-y-2"
+          >
+            <div>
+              <span className="font-medium italic">
+                An ad on an open source project?
+              </span>{' '}
+              <span className="font-black">What is this, 1999?</span>
+            </div>
+            <div>
+              <span className="font-medium italic">Please...</span> TanStack is
+              100% privately owned, with no paid products, venture capital, or
+              acquisition plans. We're a small team dedicated to creating
+              software used by millions daily. What did you expect?
+            </div>
+            <div>
+              <Link
+                to="/ethos"
+                className="text-gray-600 dark:text-gray-200 font-bold underline"
+              >
+                Check out our ethos
+              </Link>{' '}
+              to learn more about how we plan on sticking around (and staying
+              relevant) for the long-haul.
             </div>
           </div>
         </div>