Upgrade to Tailwind4 (#16471)

## Test Plan

<img width="3360" alt="Screenshot 2025-03-03 at 10 01 19"
src="https://github.com/user-attachments/assets/d1ecfca0-ce51-440b-aabb-9107323fd1a4"
/>

.github/renovate.json5

@@ -58,12 +58,6 @@
       description: "Disable PRs updating GitHub runners (e.g. 'runs-on: macos-14')",
       enabled: false,
     },
-    {
-      // TODO: Remove this once the codebase is upgrade to v4 (https://github.com/astral-sh/ruff/pull/16069)
-      matchPackageNames: ["tailwindcss"],
-      matchManagers: ["npm"],
-      enabled: false,
-    },
     {
       // Disable updates of `zip-rs`; intentionally pinned for now due to ownership change
       // See: https://github.com/astral-sh/uv/issues/3642

playground/package.json

@@ -26,17 +26,17 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",
+    "@tailwindcss/postcss": "^4.0.9",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react-swc": "^3.0.0",
-    "autoprefixer": "^10.4.13",
     "eslint": "^9.0.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^5.2.0",
     "postcss": "^8.4.20",
     "prettier": "^3.0.0",
-    "tailwindcss": "^3.2.4",
+    "tailwindcss": "^4.0.9",
     "typescript": "^5.1.6",
     "typescript-eslint": "^8.25.0",
     "vite": "^6.0.0"

playground/postcss.config.cjs

@@ -1,7 +1,5 @@
 module.exports = {
   plugins: {
-    "tailwindcss/nesting": {},
+    '@tailwindcss/postcss': {},
-    tailwindcss: {},
-    autoprefixer: {},
   },
 };

playground/src/Editor/AstralButton.tsx

@@ -12,6 +12,7 @@ export default function AstralButton({
         "uppercase",
         "ease-in-out",
         "font-heading",
+        "outline-radiate",
         "transition-all duration-200",
         "bg-radiate",
         "text-black",

playground/src/Editor/Chrome.tsx

@@ -82,7 +82,7 @@ export default function Chrome() {
         onShare={handleShare}
       />
 
-      <div className="flex flex-grow">
+      <div className="flex grow">
         {source != null && (
           <Editor
             theme={theme}

playground/src/Editor/Diagnostics.tsx

@@ -30,7 +30,7 @@ export default function Diagnostics({
   return (
     <div
       className={classNames(
-        "flex flex-grow flex-col overflow-hidden",
+        "flex grow flex-col overflow-hidden",
         theme === "dark" ? "text-white" : null,
       )}
     >
@@ -43,7 +43,7 @@ export default function Diagnostics({
         Diagnostics ({diagnostics.length})
       </div>
 
-      <div className="flex flex-grow p-2 overflow-hidden">
+      <div className="flex grow p-2 overflow-hidden">
         <Items diagnostics={diagnostics} onGoTo={onGoTo} />
       </div>
     </div>
@@ -66,7 +66,7 @@ function Items({
   }
 
   return (
-    <ul className="space-y-0.5 flex-grow overflow-y-scroll">
+    <ul className="space-y-0.5 grow overflow-y-scroll">
       {diagnostics.map((diagnostic, index) => {
         return (
           <li

playground/src/Editor/Editor.tsx

@@ -263,7 +263,7 @@ export default function Editor({
                   id="diagnostics"
                   minSize={3}
                   order={1}
-                  className="my-2 flex flex-grow"
+                  className="my-2 flex grow"
                 >
                   <Diagnostics
                     diagnostics={checkResult.diagnostics}

playground/src/Editor/SecondaryPanel.tsx

@@ -34,7 +34,7 @@ export default function SecondaryPanel({
 }: SecondaryPanelProps) {
   return (
     <div className="flex flex-col h-full">
-      <div className="flex-grow">
+      <div className="grow">
         <Content
           tool={tool}
           result={result}

playground/src/Editor/ShareButton.tsx

@@ -27,7 +27,7 @@ export default function ShareButton({ onShare }: { onShare?: () => void }) {
   ) : (
     <AstralButton
       type="button"
-      className="relative flex-none leading-6 py-1.5 px-3 shadow-sm disabled:opacity-50"
+      className="relative flex-none leading-6 py-1.5 px-3 shadow-xs disabled:opacity-50"
       disabled={!onShare || copied}
       onClick={
         onShare

playground/src/Editor/SideBar.tsx

@@ -10,7 +10,7 @@ export default function SideBar({ children, position }: SideBarProps) {
   return (
     <ul
       className={classNames(
-        "w-12 flex-initial  flex flex-col items-stretch bg-galaxy",
+        "w-12 flex-initial  flex flex-col items-stretch bg-galaxy border-gray-200",
         position === "left" ? "border-r" : "border-l",
       )}
     >
@@ -62,7 +62,7 @@ interface TooltipProps {
 function Tooltip({ children, position }: TooltipProps) {
   return (
     <span
-      className={`z-10 absolute w-100 rounded dark:border-[1px] dark:border-white bg-space dark:bg-white px-2 py-1 hidden text-xs text-white dark:text-black group-hover:flex whitespace-nowrap ${
+      className={`z-10 absolute rounded dark:border-[1px] dark:border-white bg-space dark:bg-white px-2 py-1 hidden text-xs text-white dark:text-black group-hover:flex whitespace-nowrap ${
         position === "right" ? "right-[52px]" : "left-[52px]"
       }`}
     >

playground/src/index.css

@@ -1,68 +1,106 @@
-@tailwind base;
+@import 'tailwindcss';
-@tailwind components;
+
-@tailwind utilities;
+@custom-variant dark (&:is(.dark *));
+
+@theme {
+    --color-ayu-accent: #ffac2f;
+
+    --color-ayu-background: #f8f9fa;
+    --color-ayu-background-dark: #0b0e14;
+
+    --color-black: #261230;
+    --color-white: #ffffff;
+    --color-radiate: #d7ff64;
+    --color-flare: #6340ac;
+    --color-rock: #78876e;
+    --color-galaxy: #261230;
+    --color-space: #30173d;
+    --color-comet: #6f5d6f;
+    --color-cosmic: #de5fe9;
+    --color-sun: #ffac2f;
+    --color-electron: #46ebe1;
+    --color-aurora: #46eb74;
+    --color-constellation: #5f6de9;
+    --color-neutron: #cff3cf;
+    --color-proton: #f6afbc;
+    --color-nebula: #cdcbfb;
+    --color-supernova: #f1aff6;
+    --color-starlight: #f4f4f1;
+    --color-lunar: #fbf2fc;
+    --color-asteroid: #e3cee3;
+    --color-crater: #f0dfdf;
+
+    --font-heading: Alliance Platt, system-ui, -apple-system, Segoe UI, Roboto, Helvetica,
+    Arial, monospace, Apple Color Emoji, Segoe UI Emoji;
+    --font-body: Alliance Text, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
+    sans-serif, Apple Color Emoji, Segoe UI Emoji;
+    --font-mono: Roboto Mono;
+
+    --text-xs: 0.75rem;
+    --text-sm: 0.875rem;
+    --text-base: 1rem;
+    --text-lg: 1.125rem;
+    --text-xl: 1.25rem;
+    --text-2xl: 1.5rem;
+    --text-3xl: 1.875rem;
+    --text-4xl: 2.25rem;
+    --text-5xl: 3rem;
+}
 
 * {
-  box-sizing: border-box;
+    box-sizing: border-box;
 }
 
 body,
 html,
 #root {
-  margin: 0;
+    margin: 0;
-  height: 100%;
+    height: 100%;
-  width: 100%;
+    width: 100%;
-  -webkit-font-smoothing: antialiased;
+    -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 .shadow-copied {
-  --tw-shadow:
+    --tw-shadow: 0 0 0 1px var(--color-white), inset 0 0 0 1px var(--color-white);
-    0 0 0 1px theme("colors.white"), inset 0 0 0 1px theme("colors.white");
+    --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color), inset 0 0 0 1px var(--tw-shadow-color);
-  --tw-shadow-colored:
-    0 0 0 1px var(--tw-shadow-color), inset 0 0 0 1px var(--tw-shadow-color);
 
-  box-shadow:
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
-    var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 }
 
 @font-face {
-  font-family: "Alliance Text";
+    font-family: "Alliance Text";
-  src:
+    src: url("../fonts/Alliance-TextRegular.woff2") format("woff2"),
-    url("../fonts/Alliance-TextRegular.woff2") format("woff2"),
     url("../fonts/Alliance-TextRegular.woff") format("woff");
-  font-weight: normal;
+    font-weight: normal;
-  font-style: normal;
+    font-style: normal;
-  font-display: block;
+    font-display: block;
 }
 
 @font-face {
-  font-family: "Alliance Text";
+    font-family: "Alliance Text";
-  src:
+    src: url("../fonts/Alliance-TextMedium.woff2") format("woff2"),
-    url("../fonts/Alliance-TextMedium.woff2") format("woff2"),
     url("../fonts/Alliance-TextMedium.woff") format("woff");
-  font-weight: 500;
+    font-weight: 500;
-  font-style: normal;
+    font-style: normal;
-  font-display: block;
+    font-display: block;
 }
 
 @font-face {
-  font-family: "Alliance Platt";
+    font-family: "Alliance Platt";
-  src:
+    src: url("../fonts/Alliance-PlattMedium.woff2") format("woff2"),
-    url("../fonts/Alliance-PlattMedium.woff2") format("woff2"),
     url("../fonts/Alliance-PlattMedium.woff") format("woff");
-  font-weight: 500;
+    font-weight: 500;
-  font-style: normal;
+    font-style: normal;
-  font-display: block;
+    font-display: block;
 }
 
 @font-face {
-  font-family: "Alliance Platt";
+    font-family: "Alliance Platt";
-  src:
+    src: url("../fonts/Alliance-PlattRegular.woff2") format("woff2"),
-    url("../fonts/Alliance-PlattRegular.woff2") format("woff2"),
     url("../fonts/Alliance-PlattRegular.woff") format("woff");
-  font-weight: normal;
+    font-weight: normal;
-  font-style: normal;
+    font-style: normal;
-  font-display: block;
+    font-display: block;
 }

playground/tailwind.config.cjs

@@ -1,78 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-const defaultTheme = require("tailwindcss/defaultTheme");
-
-module.exports = {
-  darkMode: "class",
-  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
-  theme: {
-    extend: {
-      colors: {
-        "ayu-accent": "#ffac2f",
-        "ayu-background": {
-          DEFAULT: "#f8f9fa",
-          dark: "#0b0e14",
-        },
-        black: "#261230",
-        white: "#FFFFFF",
-        radiate: "#D7FF64",
-        flare: "#6340AC",
-        rock: "#78876E",
-        galaxy: "#261230",
-        space: "#30173D",
-        comet: "#6F5D6F",
-        cosmic: "#DE5FE9",
-        sun: "#FFAC2F",
-        electron: "#46EBE1",
-        aurora: "#46EB74",
-        constellation: "#5F6DE9",
-        neutron: "#CFF3CF",
-        proton: "#F6AFBC",
-        nebula: "#CDCBFB",
-        supernova: "#F1AFF6",
-        starlight: "#F4F4F1",
-        lunar: "#FBF2FC",
-        asteroid: "#E3CEE3",
-        crater: "#F0DFDF",
-      },
-      fontFamily: {
-        heading: [
-          "Alliance Platt",
-          "system-ui",
-          "-apple-system",
-          "Segoe UI",
-          "Roboto",
-          "Helvetica",
-          "Arial",
-          "monospace",
-          "Apple Color Emoji",
-          "Segoe UI Emoji",
-        ],
-        body: [
-          "Alliance Text",
-          "system-ui",
-          "-apple-system",
-          "Segoe UI",
-          "Roboto",
-          "Helvetica",
-          "Arial",
-          "sans-serif",
-          "Apple Color Emoji",
-          "Segoe UI Emoji",
-        ],
-        mono: ["Roboto Mono"],
-      },
-      fontSize: {
-        xs: "0.75rem" /* 12px */,
-        sm: "0.875rem" /* 14px */,
-        base: "1rem" /* 16px */,
-        lg: "1.125rem" /* 18px */,
-        xl: "1.25rem" /* 20px */,
-        "2xl": "1.5rem" /* 25px */,
-        "3xl": "1.875rem" /* 30px */,
-        "4xl": "2.25rem" /* 36px */,
-        "5xl": "3rem" /* 48px */,
-      },
-    },
-  },
-  plugins: [],
-};