Upgrade tailwindcss to v4

playground/package.json

@@ -25,12 +25,12 @@
     "smol-toml": "^1.3.0"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.0.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@typescript-eslint/eslint-plugin": "^8.0.0",
     "@typescript-eslint/parser": "^8.0.0",
     "@vitejs/plugin-react-swc": "^3.0.0",
-    "autoprefixer": "^10.4.13",
     "eslint": "^8.30.0",
     "eslint-config-prettier": "^10.0.0",
     "eslint-plugin-import": "^2.29.1",

playground/postcss.config.cjs

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

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/setupMonaco.tsx

@@ -53,7 +53,7 @@ function defineAyuThemes(monaco: Monaco) {
     colors: {
       focusBorder: "#ffaa33b3",
       foreground: "#8a9199",
-      "widget.shadow": "#00000026",
+      "widget.shadow-sm": "#00000026",
       "selection.background": "#035bd626",
       "icon.foreground": "#8a9199",
       errorForeground: "#e65050",
@@ -84,7 +84,7 @@ function defineAyuThemes(monaco: Monaco) {
       "inputValidation.infoBorder": "#55b4d4",
       "inputValidation.warningBackground": "#f8f9fa",
       "inputValidation.warningBorder": "#f2ae49",
-      "scrollbar.shadow": "#6b7d8f00",
+      "scrollbar.shadow-sm": "#6b7d8f00",
       "scrollbarSlider.background": "#8a919966",
       "scrollbarSlider.hoverBackground": "#8a919999",
       "scrollbarSlider.activeBackground": "#8a9199b3",
@@ -314,7 +314,7 @@ function defineAyuThemes(monaco: Monaco) {
     colors: {
       focusBorder: "#e6b450b3",
       foreground: "#565b66",
-      "widget.shadow": "#00000080",
+      "widget.shadow-sm": "#00000080",
       "selection.background": "#409fff4d",
       "icon.foreground": "#565b66",
       errorForeground: "#d95757",
@@ -345,7 +345,7 @@ function defineAyuThemes(monaco: Monaco) {
       "inputValidation.infoBorder": "#39bae6",
       "inputValidation.warningBackground": "#0b0e14",
       "inputValidation.warningBorder": "#ffb454",
-      "scrollbar.shadow": "#11151c00",
+      "scrollbar.shadow-sm": "#11151c00",
       "scrollbarSlider.background": "#565b6666",
       "scrollbarSlider.hoverBackground": "#565b6699",
       "scrollbarSlider.activeBackground": "#565b66b3",

playground/src/index.css

@@ -1,6 +1,71 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@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;
+}
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}
 
 * {
   box-sizing: border-box;
@@ -17,8 +82,8 @@ html,
 }
 
 .shadow-copied {
-  --tw-shadow: 0 0 0 1px theme("colors.white"),
-    inset 0 0 0 1px theme("colors.white");
+  --tw-shadow: 0 0 0 1px var(--color-white),
+    inset 0 0 0 1px var(--color-white);
   --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color),
     inset 0 0 0 1px var(--tw-shadow-color);