feat: migrate from tailwind v3 to v4 and UI enhancements

.prettierrc

@@ -1,4 +1,5 @@
 {
   "singleQuote": true,
-  "semi": false
+  "semi": false,
+  "plugins": ["prettier-plugin-tailwindcss"]
 }

package.json

@@ -12,8 +12,8 @@
     "dev:backend": "convex dev --tail-logs",
     "build": "vite build",
     "start": "vite start",
-    "lint": "prettier --check '**/*' --ignore-unknown && eslint --ext .ts,.tsx ./src",
-    "format": "prettier --write '**/*' --ignore-unknown",
+    "lint": "prettier --check --ignore-unknown * && eslint --ext .ts,.tsx ./src",
+    "format": "prettier --write --ignore-unknown *",
     "linkAll": "node scripts/link.js"
   },
   "dependencies": {
@@ -81,17 +81,18 @@
     "@content-collections/core": "^0.8.2",
     "@content-collections/vite": "^0.2.4",
     "@shikijs/transformers": "^1.10.3",
+    "@tailwindcss/postcss": "^4.1.8",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@types/remove-markdown": "^0.3.4",
-    "autoprefixer": "^10.4.18",
     "dotenv-cli": "^8.0.0",
     "eslint": "^8.57.0",
     "eslint-plugin-unicorn": "^49.0.0",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.35",
-    "prettier": "^2.8.8",
-    "tailwindcss": "^3.4.1",
+    "postcss": "^8.5.4",
+    "prettier": "^3.5.3",
+    "prettier-plugin-tailwindcss": "^0.6.12",
+    "tailwindcss": "^4.1.8",
     "typescript": "^5.6.3",
     "vite": "^6.3.5"
   },

postcss.config.mjs

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+}

src/components/Doc.tsx

@@ -1,16 +1,17 @@
-import * as React from 'react'
-import { FaEdit } from 'react-icons/fa'
-import { marked } from 'marked'
-import markedAlert from 'marked-alert'
-import { gfmHeadingId, getHeadingList } from 'marked-gfm-heading-id'
 import { DocTitle } from '~/components/DocTitle'
 import { Markdown } from '~/components/Markdown'
-import { Toc } from './Toc'
+import { marked } from 'marked'
+import markedAlert from 'marked-alert'
+import { getHeadingList, gfmHeadingId } from 'marked-gfm-heading-id'
+import * as React from 'react'
+import { FaEdit } from 'react-icons/fa'
 import { twMerge } from 'tailwind-merge'
-import { TocMobile } from './TocMobile'
 import { GadLeader } from './GoogleScripts'
+import { Toc } from './Toc'
+import { TocMobile } from './TocMobile'
 
 type DocProps = {
+  isBlog?: boolean
   title: string
   content: string
   repo: string
@@ -22,6 +23,7 @@ type DocProps = {
 }
 
 export function Doc({
+  isBlog = false,
   title,
   content,
   repo,
@@ -35,7 +37,7 @@ export function Doc({
     const markup = marked.use(
       { gfm: true },
       gfmHeadingId(),
-      markedAlert()
+      markedAlert(),
     )(content) as string
 
     const headings = getHeadingList()
@@ -59,7 +61,7 @@ export function Doc({
           map[headingElement.target.id] = headingElement
           return map
         },
-        headingElementRefs.current
+        headingElementRefs.current,
       )
 
       const visibleHeadings: Array<IntersectionObserverEntry> = []
@@ -82,8 +84,8 @@ export function Doc({
 
     const headingElements = Array.from(
       markdownContainerRef.current?.querySelectorAll(
-        'h2[id], h3[id], h4[id], h5[id], h6[id]'
-      ) ?? []
+        'h2[id], h3[id], h4[id], h5[id], h6[id]',
+      ) ?? [],
     )
     headingElements.forEach((el) => observer.observe(el))
 
@@ -95,34 +97,34 @@ export function Doc({
       {shouldRenderToc ? <TocMobile headings={headings} /> : null}
       <div
         className={twMerge(
-          'w-full flex bg-white/70 dark:bg-black/40 mx-auto rounded-xl max-w-[936px]',
+          'mx-auto flex w-full bg-white/70 dark:bg-black/40',
           isTocVisible && 'max-w-full',
-          shouldRenderToc && 'lg:pt-0'
+          shouldRenderToc && 'lg:pt-0',
         )}
       >
         <div
           className={twMerge(
-            'flex overflow-auto flex-col w-full p-4 lg:p-6',
-            isTocVisible && '!pr-0'
+            'ml-auto flex w-full max-w-[820px] flex-col overflow-auto p-4.5',
+            isBlog && 'mx-auto',
           )}
         >
           <GadLeader />
           {title ? <DocTitle>{title}</DocTitle> : null}
           <div className="h-4" />
-          <div className="h-px bg-gray-500 opacity-20" />
+          <div className="h-px bg-gray-500/20" />
           <div className="h-4" />
           <div
             ref={markdownContainerRef}
             className={twMerge(
               'prose prose-gray prose-sm prose-p:leading-7 dark:prose-invert max-w-none',
               isTocVisible && 'pr-4 lg:pr-6',
-              'styled-markdown-content'
+              'styled-markdown-content',
             )}
           >
             <Markdown htmlMarkup={markup} />
           </div>
           <div className="h-12" />
-          <div className="w-full h-px bg-gray-500 opacity-30" />
+          <div className="h-px w-full bg-gray-500 opacity-30" />
           <div className="py-4 opacity-70">
             <a
               href={`https://github.com/${repo}/edit/${branch}/${filePath}`}
@@ -134,15 +136,22 @@ export function Doc({
           <div className="h-24" />
         </div>
 
-        {isTocVisible && (
-          <div className="border-l border-gray-500/20 max-w-52 w-full hidden 2xl:block transition-all">
+        {isTocVisible ? (
+          <div className="hidden w-full max-w-64 border-l border-gray-500/20 transition-all 2xl:block">
             <Toc
               headings={headings}
               activeHeadings={activeHeadings}
               colorFrom={colorFrom}
               colorTo={colorTo}
             />
           </div>
+        ) : (
+          <div
+            className={twMerge(
+              'hidden w-full max-w-64 2xl:block',
+              isBlog && '2xl:hidden',
+            )}
+          />
         )}
       </div>
     </React.Fragment>

src/components/DocContainer.tsx

@@ -8,10 +8,7 @@ export function DocContainer({
   return (
     <div
       {...props}
-      className={twMerge(
-        'w-full max-w-full p-2 md:p-4 2xl:p-8',
-        props.className
-      )}
+      className={twMerge('w-full max-w-full lg:pr-4', props.className)}
     >
       {children}
     </div>