chore: upgrade to tailwind v4

jderochervlk · jderochervlk · commit e03d9e748264 · 2025-07-27T18:31:16.000-04:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,10 +10,7 @@
   "type": "module",
   "postcss": {
     "plugins": {
-      "postcss-import": {},
-      "tailwindcss/nesting": "postcss-nesting",
-      "tailwindcss": {},
-      "autoprefixer": {}
+      "@tailwindcss/postcss": {}
     }
   },
   "dependencies": {
@@ -69,7 +66,7 @@
   },
   "devDependencies": {
     "@mdx-js/react": "^2.3.0",
-    "autoprefixer": "^10.4.14",
+    "@tailwindcss/postcss": "^4.1.11",
     "cssnano": "^6.0.1",
     "dotenv": "^16.4.7",
     "esbuild-loader": "^4.3.0",
@@ -79,6 +76,7 @@
     "postcss-nesting": "^12.1.1",
     "reanalyze": "^2.16.0",
     "simple-functional-loader": "^1.2.1",
-    "tailwindcss": "^3.3.3"
+    "tailwindcss": "^4.1.11",
+    "webpack": "^5.100.2"
   }
 }
diff --git a/pages/docs/react/latest/styling.mdx b/pages/docs/react/latest/styling.mdx
@@ -114,7 +114,7 @@ let make = (~active: bool) => {
     "text-red-600"
   }
 
-  <div className={`border-1 border-black ${activeClass}`}>
+  <div className={`border border-black ${activeClass}`}>
     {React.string("Hello World")}
   </div>
 }
diff --git a/pages/docs/react/v0.10.0/styling.mdx b/pages/docs/react/v0.10.0/styling.mdx
@@ -114,7 +114,7 @@ let make = (~active: bool) => {
     "text-red-600"
   }
 
-  <div className={`border-1 border-black ${activeClass}`}>
+  <div className={`border border-black ${activeClass}`}>
     {React.string("Hello World")}
   </div>
 }
diff --git a/pages/docs/react/v0.11.0/styling.mdx b/pages/docs/react/v0.11.0/styling.mdx
@@ -114,7 +114,7 @@ let make = (~active: bool) => {
     "text-red-600"
   }
 
-  <div className={`border-1 border-black ${activeClass}`}>
+  <div className={`border border-black ${activeClass}`}>
     {React.string("Hello World")}
   </div>
 }
diff --git a/src/ApiDocs.res b/src/ApiDocs.res
@@ -207,7 +207,7 @@ module SidebarTree = {
       ) ++ " md:block md:w-48 md:-ml-4 lg:w-1/5 md:h-auto md:relative overflow-y-visible bg-white"}>
       <aside
         id="sidebar-content"
-        className="relative top-0 px-4 w-full block md:top-[7rem] md:pt-10 md:sticky border-r border-gray-20 overflow-y-auto pb-24 h-[calc(100vh-7rem)]">
+        className="relative top-0 px-4 w-full block md:top-28 md:pt-10 md:sticky border-r border-gray-20 overflow-y-auto pb-24 h-[calc(100vh-7rem)]">
         <div className="flex justify-between">
           <div className="w-3/4 md:w-full"> React.null </div>
           <button
@@ -350,7 +350,7 @@ let default = (props: props) => {
   | Ok({module_: {items}}) if Array.length(items) > 0 =>
     <div className="hidden xl:block lg:w-1/5 md:h-auto md:relative overflow-y-visible bg-white">
       <aside
-        className="relative top-0 pl-4 w-full block md:top-[7rem] md:pt-4 md:sticky border-l border-gray-20 overflow-y-auto pb-24 h-[calc(100vh-7rem)]">
+        className="relative top-0 pl-4 w-full block md:top-28 md:pt-4 md:sticky border-l border-gray-20 overflow-y-auto pb-24 h-[calc(100vh-7rem)]">
         <div className="hl-overline block text-gray-80 mt-16 mb-2">
           {"Types and values"->React.string}
         </div>
diff --git a/src/Blog.res b/src/Blog.res
@@ -142,7 +142,7 @@ module FeatureCard = {
     }
     <section
       className="flex sm:px-4 md:px-8 lg:px-0 flex-col justify-end lg:flex-row sm:items-center h-full">
-      <div className="w-full h-full sm:self-start md:self-auto max-h-[25.4375rem]">
+      <div className="w-full h-full sm:self-start md:self-auto max-h-101.75">
         <Link href={`/blog/${slug}`} className="relative block pt-2/3">
           {switch badge {
           | Some(badge) =>
@@ -262,7 +262,7 @@ let default = (props: props): React.element => {
 
     <>
       <div className="hidden sm:flex justify-center ">
-        <div className="my-16 w-full max-w-[12rem]">
+        <div className="my-16 w-full max-w-48">
           <CategorySelector selected=category />
         </div>
       </div>
@@ -284,7 +284,7 @@ let default = (props: props): React.element => {
           <main className="min-w-320 lg:align-center w-full lg:px-0 max-w-1280 pb-48">
             <MdxProvider components=MarkdownComponents.default>
               <div className="flex justify-center">
-                <div className="w-full max-w-[66.625rem]"> content </div>
+                <div className="w-full max-w-266.5"> content </div>
               </div>
             </MdxProvider>
           </main>
diff --git a/src/BlogArticle.res b/src/BlogArticle.res
@@ -93,7 +93,7 @@ module BlogHeader = {
         )}
         <div className="flex flex-col md:flex-row mb-12">
           {Array.map(authors, author =>
-            <div key=author.username className="mt-4 md:mt-0 md:ml-8 first:ml-0 min-w-[8.1875rem]">
+            <div key=author.username className="mt-4 md:mt-0 md:ml-8 first:ml-0 min-w-32.75">
               <AuthorBox author />
             </div>
           )->React.array}
@@ -102,7 +102,7 @@ module BlogHeader = {
       {switch articleImg {
       | Some(articleImg) =>
         <div className="-mx-8 sm:mx-0 sm:w-full bg-gray-5-tr md:mt-24">
-          <img className="h-full w-full object-cover max-h-[33.625rem]" src=articleImg />
+          <img className="h-full w-full object-cover max-h-134.5" src=articleImg />
         </div>
       | None =>
         <div className="max-w-740 w-full">
diff --git a/src/DocsOverview.res b/src/DocsOverview.res
@@ -1,7 +1,7 @@
 module Card = {
   @react.component
   let make = (~title: string, ~hrefs: array<(string, string)>) => {
-    <div className="max-w-[21rem] border border-gray-10 bg-gray-5 px-5 py-8 rounded-lg">
+    <div className="max-w-84 border border-gray-10 bg-gray-5 px-5 py-8 rounded-lg">
       <h2 className="font-bold text-24 mb-4"> {React.string(title)} </h2>
       <ul>
         {Array.map(hrefs, ((text, href)) =>
diff --git a/src/Packages.res b/src/Packages.res
@@ -489,7 +489,7 @@ let default = (props: props) => {
             className="flex justify-between min-w-320 px-4 pt-16 lg:align-center w-full lg:px-8 pb-48">
             <MdxProvider components=MarkdownComponents.default>
               <main className="max-w-1280 w-full flex justify-center">
-                <div className="w-full max-w-[44.0625rem]">
+                <div className="w-full max-w-176.25">
                   <H1> {React.string("Libraries & Bindings")} </H1>
                   <SearchBox
                     placeholder="Enter a search term, name, keyword, etc"
diff --git a/src/Playground.res b/src/Playground.res
@@ -739,7 +739,7 @@ module WarningFlagsWidget = {
       Option.map(suggestions, elements =>
         <div
           ref={ReactDOM.Ref.domRef((Obj.magic(listboxRef): React.ref<Nullable.t<Dom.element>>))}
-          className="p-2 absolute overflow-auto z-50 border-b rounded border-l border-r block w-full bg-gray-100 max-h-[15rem]">
+          className="p-2 absolute overflow-auto z-50 border-b rounded border-l border-r block w-full bg-gray-100 max-h-60">
           elements
         </div>
       )->Option.getOr(React.null)
@@ -780,7 +780,7 @@ module WarningFlagsWidget = {
         onClick
         onFocus
         tabIndex=0
-        className="focus:outline-none self-start focus:ring hover:cursor-pointer hover:bg-gray-40 p-2 rounded-full">
+        className="focus:outline-hidden self-start focus:ring-3 hover:cursor-pointer hover:bg-gray-40 p-2 rounded-full">
         <Icon.Close />
       </button>
     }
@@ -810,7 +810,7 @@ module WarningFlagsWidget = {
           <section className="mt-3">
             <input
               ref={ReactDOM.Ref.domRef((Obj.magic(inputRef): React.ref<Nullable.t<Dom.element>>))}
-              className="inline-block p-1 max-w-20 outline-none bg-gray-90 placeholder-gray-20 placeholder-opacity-50"
+              className="inline-block p-1 max-w-20 outline-hidden bg-gray-90 placeholder-gray-20 placeholder-opacity-50"
               placeholder="Flags"
               type_="text"
               tabIndex=0
@@ -1001,7 +1001,7 @@ module Settings = {
           </button>
         </div>
         <div className="flex justify-end" />
-        <div className="max-w-[40rem]">
+        <div className="max-w-md">
           <WarningFlagsWidget onUpdate=onWarningFlagsUpdate flags=warnFlagTokens />
         </div>
       </div>
@@ -1703,7 +1703,7 @@ let make = (~versions: array<string>) => {
   let disabled = false
 
   let makeTabClass = active => {
-    let activeClass = active ? "text-white !border-sky-70 font-medium hover:cursor-default" : ""
+    let activeClass = active ? "text-white border-sky-70! font-medium hover:cursor-default" : ""
 
     "flex-1 items-center p-4 border-t-4 border-transparent " ++ activeClass
   }
@@ -1796,7 +1796,7 @@ let make = (~versions: array<string>) => {
       // Left Panel
       <div
         ref={ReactDOM.Ref.domRef((Obj.magic(leftPanelRef): React.ref<Nullable.t<Dom.element>>))}
-        className={`${layout == Column ? "h-2/4" : "!h-full"} ${layout == Column
+        className={`${layout == Column ? "h-2/4" : "h-full!"} ${layout == Column
             ? "w-full"
             : "w-[50%]"}`}>
         <CodeMirror
@@ -1840,7 +1840,7 @@ let make = (~versions: array<string>) => {
       // Right Panel
       <div
         ref={ReactDOM.Ref.domRef((Obj.magic(rightPanelRef): React.ref<Nullable.t<Dom.element>>))}
-        className={`${layout == Column ? "h-6/15" : "!h-inherit"} ${layout == Column
+        className={`${layout == Column ? "h-6/15" : "h-inherit!"} ${layout == Column
             ? "w-full"
             : "w-[50%]"}`}>
         <div className={"flex flex-wrap justify-between w-full " ++ (disabled ? "opacity-50" : "")}>
diff --git a/src/SyntaxLookup.res b/src/SyntaxLookup.res
@@ -347,13 +347,13 @@ let default = (props: props) => {
   let content =
     <div>
       <div className="flex flex-col items-center">
-        <div className="text-center max-w-[21rem]">
+        <div className="text-center max-w-84">
           <Markdown.H1> {React.string("Syntax Lookup")} </Markdown.H1>
           <div className="mb-8 text-gray-60-tr text-14">
             {React.string("Enter some language construct you want to know more about.")}
           </div>
         </div>
-        <div className="w-full max-w-[34rem]">
+        <div className="w-full max-w-136">
           <SearchBox
             placeholder="Enter keywords or syntax..."
             completionValues={Array.map(completionItems, item => item.name)}
diff --git a/src/components/Button.res b/src/components/Button.res
@@ -23,7 +23,7 @@ let make = (
   <button
     ?onClick
     role="button"
-    className={`select-none hover:cursor-pointer transition-colors duration-200 body-button focus:outline-none ${bgColor} ${padding}`}>
+    className={`select-none hover:cursor-pointer transition-colors duration-200 body-button focus:outline-hidden ${bgColor} ${padding}`}>
     children
   </button>
 }
diff --git a/src/components/CodeExample.res b/src/components/CodeExample.res
@@ -179,9 +179,9 @@ module Toggle = {
         }
 
         let borderColor = if selected === i {
-          "border-t-[#696b7d]"
+          "border-t-gray-60"
         } else {
-          "border-t-[transparent]"
+          "border-t-transparent"
         }
 
         <span
diff --git a/src/components/ImageGallery.res b/src/components/ImageGallery.res
@@ -50,7 +50,7 @@ let make = (
       setIndex(_ => i)
     }
     <div key={src} onClick className="group flex items-center hover:cursor-pointer h-8 w-8">
-      <div className={`h-[1px] group-hover:bg-gray-40 w-full ${bgColor}`} />
+      <div className={`h-px group-hover:bg-gray-40 w-full ${bgColor}`} />
     </div>
   })
 
diff --git a/src/components/Markdown.res b/src/components/Markdown.res
@@ -19,7 +19,7 @@ module Cite = {
   let make = (~author: option<string>, ~children) =>
     // For semantics, check out
     // https://css-tricks.com/quoting-in-html-quotations-citations-and-blockquotes/
-    <div className="my-10 border-l-2 border-fire font-normal pl-10 py-1 text-fire max-w-[30rem]">
+    <div className="my-10 border-l-2 border-fire font-normal pl-10 py-1 text-fire max-w-sm">
       <blockquote className="text-32 italic mb-2"> children </blockquote>
       {Option.mapOr(author, React.null, author =>
         <figcaption className="font-semibold text-14"> {React.string(author)} </figcaption>
@@ -118,7 +118,7 @@ module Anchor = {
         href={"#" ++ id}>
         <Icon.Hyperlink className="inline-block align-middle text-gray-40" />
       </a>
-      <a className="absolute top-[-7rem]" id />
+      <a className="absolute -top-28" id />
     </span>
   }
 }
diff --git a/src/components/Navigation.res b/src/components/Navigation.res
@@ -104,7 +104,7 @@ let make = (~fixed=true, ~isOverlayOpen: bool, ~setOverlayOpen: (bool => bool) =
           /* Desktop horizontal navigation */
           <div
             className="flex items-center xs:justify-between w-full bg-gray-90 sm:h-auto sm:relative">
-            <div className="flex ml-10 space-x-5 w-full text-gray-40 max-w-[26rem]">
+            <div className="flex ml-10 space-x-5 w-full text-gray-40 max-w-104">
               <Link
                 href={`/docs/manual/${version}/introduction`} className={isDocRouteActive(~route)}>
                 {React.string("Docs")}
@@ -162,7 +162,7 @@ let make = (~fixed=true, ~isOverlayOpen: bool, ~setOverlayOpen: (bool => bool) =
         <div
           className={(
             isOverlayOpen ? "flex" : "hidden"
-          ) ++ " top-[4rem] sm:hidden flex-col fixed top-0 left-0 h-full w-full z-50 sm:w-9/12 bg-gray-100 sm:h-auto sm:flex sm:relative sm:flex-row sm:justify-between"}>
+          ) ++ " top-16 sm:hidden flex-col fixed top-0 left-0 h-full w-full z-50 sm:w-9/12 bg-gray-100 sm:h-auto sm:flex sm:relative sm:flex-row sm:justify-between"}>
           <MobileNav route />
         </div>
       </nav>
diff --git a/src/components/SearchBox.res b/src/components/SearchBox.res
@@ -89,7 +89,7 @@ let make = (
       onKeyDown
       onChange={onChange}
       placeholder
-      className="text-16 outline-none ml-4 w-full"
+      className="text-16 outline-hidden ml-4 w-full"
       type_="text"
     />
     <button onFocus className={value === "" ? "hidden" : "block"} onMouseDown=onMouseDownClear>
diff --git a/src/components/ToggleButton.res b/src/components/ToggleButton.res
@@ -5,7 +5,7 @@ let make = (~checked, ~onChange, ~children) => {
     <div
       className={`relative w-8 h-4 bg-gray-700
       rounded-full peer peer-checked:after:translate-x-full 
-      rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white 
+      peer-checked:rtl:after:-translate-x-full peer-checked:after:border-white 
       after:content-[''] after:absolute after:top-[2px] after:start-[4px] 
       after:bg-white after:border-gray-300 after:border after:rounded-full 
       after:h-3 after:w-3 after:transition-all border-gray-600 
diff --git a/src/layouts/LandingPageLayout.res b/src/layouts/LandingPageLayout.res
diff --git a/src/layouts/SidebarLayout.res b/src/layouts/SidebarLayout.res
diff --git a/styles/_docsearch.css b/styles/_docsearch.css
diff --git a/styles/main.css b/styles/main.css
diff --git a/tailwind.config.mjs b/tailwind.config.mjs

Original file line number	Diff line number	Diff line change
`@@ -114,7 +114,7 @@ let make = (~active: bool) => {`
`114`	`114`	`"text-red-600"`
`115`	`115`	`}`
`116`	`116`
`117`		- <div className={`border-1 border-black ${activeClass}`}>
	`117`	+ <div className={`border border-black ${activeClass}`}>
`118`	`118`	`{React.string("Hello World")}`
`119`	`119`	`</div>`
`120`	`120`	`}`