Upgrade tailwind v4 (#1078)

jderochervlk · web-flow · commit f70031cb1ec1 · 2025-08-09T09:08:52.000-04:00
* chore: upgrade to tailwind v4

* fix issue with cm.css

* format

* fix inline highlighting

* works by combining files

* remove unused file

* fix navbar hiding on desktop
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,14 +8,6 @@
     "node": ">=20"
   },
   "type": "module",
-  "postcss": {
-    "plugins": {
-      "postcss-import": {},
-      "tailwindcss/nesting": "postcss-nesting",
-      "tailwindcss": {},
-      "autoprefixer": {}
-    }
-  },
   "dependencies": {
     "@babel/generator": "^7.24.7",
     "@babel/parser": "^7.24.7",
@@ -69,6 +61,7 @@
   },
   "devDependencies": {
     "@mdx-js/react": "^2.3.0",
+    "@tailwindcss/postcss": "^4.1.11",
     "autoprefixer": "^10.4.14",
     "cssnano": "^6.0.1",
     "dotenv": "^16.4.7",
@@ -79,6 +72,6 @@
     "postcss-nesting": "^12.1.1",
     "reanalyze": "^2.16.0",
     "simple-functional-loader": "^1.2.1",
-    "tailwindcss": "^3.3.3"
+    "tailwindcss": "^4"
   }
 }
diff --git a/pages/_app.js b/pages/_app.js
@@ -1,18 +1,9 @@
-// import App from 'next/app'
-
-
-//function MyApp({ Component, pageProps }) {
-  //console.log(pageProps);
-  //return <Component {...pageProps} />
-//}
-
-import "styles/main.css";
-import "styles/utils.css";
 import "codemirror/lib/codemirror.css";
-import "styles/cm.css";
 import "styles/docson.css";
+import "styles/main.css";
+import "styles/utils.css";
 
-import {make as ResApp} from "src/common/App.mjs";
+import { make as ResApp } from "src/common/App.mjs";
 
 export default function App(props) {
   return <ResApp {...props} />
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/postcss.config.mjs b/postcss.config.mjs
@@ -0,0 +1,5 @@
+export default {
+    plugins: {
+        '@tailwindcss/postcss': {},
+    },
+}
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
@@ -740,7 +740,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)
@@ -781,7 +781,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>
     }
@@ -811,7 +811,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/50"
               placeholder="Flags"
               type_="text"
               tabIndex=0
@@ -1017,7 +1017,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>
@@ -1738,7 +1738,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
   }
@@ -1831,7 +1831,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
@@ -1876,7 +1876,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>
@@ -114,11 +114,11 @@ module Anchor = {
   let make = (~id: string) => {
     <span className="inline group relative">
       <a
-        className="invisible text-gray-60 opacity-50 text-inherit hover:opacity-100 hover:text-gray-60 hover:cursor-pointer group-hover:visible"
+        className="invisible text-gray-60 opacity-50 hover:opacity-100 hover:text-gray-60 hover:cursor-pointer group-hover:visible"
         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>
   }
 }
@@ -186,7 +186,7 @@ module InlineCode = {
   @react.component
   let make = (~children) =>
     <code
-      className="md-inline-code px-2 py-0.5  text-gray-60 font-mono rounded-sm bg-gray-10-tr border border-gray-90 border-opacity-5">
+      className="md-inline-code px-2 py-0.5  text-gray-60 font-mono rounded-sm bg-gray-10-tr border border-gray-90/5">
       children
     </code>
 }
diff --git a/src/components/Navigation.res b/src/components/Navigation.res
@@ -84,12 +84,12 @@ let make = (~fixed=true, ~isOverlayOpen: bool, ~setOverlayOpen: (bool => bool) =
     setOverlayOpen(prev => !prev)
   }
 
-  let fixedNav = fixed ? "fixed top-0" : "relative"
+  let fixedNavClassName = fixed ? "fixed top-0" : "relative"
 
   <>
     <header
       id="header"
-      className={fixedNav ++ " items-center z-50 w-full transition duration-300 ease-out group-[.nav-disappear]:-translate-y-16 md:group-[.nav-disappear]:transform-none min-w-[20rem]"}>
+      className={fixedNavClassName ++ " items-center z-50 w-full transition duration-300 ease-out group-[.nav-disappear]:-translate-y-16 md:group-[.nav-disappear]:-translate-y-0 min-w-[20rem]"}>
       <nav className="px-4 flex xs:justify-center bg-gray-90 shadow h-16 text-white-80 text-14">
         <div className="flex justify-between items-center h-full w-full max-w-1280">
           <div className="h-8 w-8 lg:h-10 lg:w-32">
@@ -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,17 +162,16 @@ 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>
       // This is a subnav for documentation pages
       {isDocRoute(~route)
         ? <nav
             id="docs-subnav"
-            className="bg-white z-50 px-4 w-full h-12 shadow text-gray-60 text-12 md:text-14 transition duration-300 ease-out group-[.nav-disappear]:-translate-y-32 md:group-[.nav-disappear]:transform-none">
-            <div
-              className="pl-30 flex gap-6 lg:gap-10 items-center h-full w-full max-w-1280 m-auto">
+            className="bg-white z-50 px-4 w-full h-12 shadow text-gray-60 text-12 md:text-14 transition duration-300 ease-out group-[.nav-disappear]:-translate-y-32 md:group-[.nav-disappear]:-translate-y-0">
+            <div className="flex gap-6 lg:gap-10 items-center h-full w-full max-w-1280 m-auto">
               <Link
                 href={`/docs/manual/${version}/introduction`}
                 className={isActiveLink(~includes="/docs/manual/", ~excludes="/api", ~route)}>
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/ffi/react-codemirror-hooks.js b/src/ffi/react-codemirror-hooks.js
@@ -5,10 +5,9 @@
 // We keep this around for reference in case we find some 
 // bugs in the new implementation
 //
-import React, { useEffect, useRef } from "react";
 import CodeMirror from "codemirror";
 import "codemirror/lib/codemirror.css";
-import "../styles/cm.css";
+import { useEffect, useRef } from "react";
 
 if (typeof window !== "undefined" && typeof window.navigator !== "undefined") {
   require("codemirror/mode/javascript/javascript");
@@ -81,10 +80,10 @@ function updateErrors(cm, errors) {
     const marker = makeErrorMarker(cm);
     cm.setGutterMarker(e.row, ERROR_GUTTER_ID, marker);
 
-    const from = {line: e.row, ch: e.column};
-    const to = {line: e.endRow, ch: e.endColumn};
-    
-    state.marked.push(cm.markText(from, to, {className: "bg-fire-15"})); 
+    const from = { line: e.row, ch: e.column };
+    const to = { line: e.endRow, ch: e.endColumn };
+
+    state.marked.push(cm.markText(from, to, { className: "bg-fire-15" }));
     console.log("marked", state.marked);
   });
 
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/cm.css b/styles/cm.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`	`}`