[docs] Upgrade to Tailwind v4-alpha (mui#771)

mj12albert · Oct 30, 2024 · 9b5ce28 · 9b5ce28
1 parent 8e8afd0
commit 9b5ce28
Show file tree

Hide file tree

Showing 25 changed files with 366 additions and 256 deletions.
diff --git a/docs/data/components/alert-dialog/AlertDialogIntroduction/tailwind/index.js b/docs/data/components/alert-dialog/AlertDialogIntroduction/tailwind/index.js
@@ -41,7 +41,7 @@ function Controls(props) {
   return (
     <div
       {...props}
-      className="-mx-4 -mb-4 mt-8 flex flex-row-reverse gap-2 bg-slate-100 p-4 dark:bg-slate-800"
+      className="-mx-4 mt-8 -mb-4 flex flex-row-reverse gap-2 bg-slate-100 p-4 dark:bg-slate-800"
     />
   );
 }

diff --git a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.js b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.js
@@ -76,7 +76,7 @@ const Checkbox = React.forwardRef(function Checkbox(props, ref) {
         classNames(
           'h-6 w-6 rounded-md p-0',
           'border-2 border-solid border-purple-500',
-          'outline-none focus-visible:ring-2 focus-visible:ring-purple-500 focus-visible:ring-opacity-60 focus-visible:ring-offset-2',
+          'focus-visible:ring-opacity-60 outline-none focus-visible:ring-2 focus-visible:ring-purple-500 focus-visible:ring-offset-2',
           'transition-colors duration-150',
           state.disabled && 'cursor-not-allowed opacity-40',
           state.checked && 'bg-purple-500',

diff --git a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.js b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.js
@@ -48,7 +48,7 @@ const Checkbox = React.forwardRef(function Checkbox(props, ref) {
         classNames(
           'h-6 w-6 rounded-md p-0',
           'border-2 border-solid border-purple-500',
-          'outline-none focus-visible:ring-2 focus-visible:ring-purple-500 focus-visible:ring-opacity-60 focus-visible:ring-offset-2',
+          'focus-visible:ring-opacity-60 outline-none focus-visible:ring-2 focus-visible:ring-purple-500 focus-visible:ring-offset-2',
           'transition-colors duration-150',
           state.disabled && 'cursor-not-allowed opacity-40',
           state.checked && 'bg-purple-500',

diff --git a/docs/data/components/dialog/UnstyledDialogIntroduction/tailwind/index.js b/docs/data/components/dialog/UnstyledDialogIntroduction/tailwind/index.js
@@ -48,7 +48,7 @@ function Controls(props) {
   return (
     <div
       {...props}
-      className="-mx-4 -mb-4 mt-8 flex flex-row-reverse gap-2 bg-slate-100 p-4 dark:bg-slate-800"
+      className="-mx-4 mt-8 -mb-4 flex flex-row-reverse gap-2 bg-slate-100 p-4 dark:bg-slate-800"
     />
   );
 }

diff --git a/docs/data/components/menu/MenuIntroduction/tailwind/index.js b/docs/data/components/menu/MenuIntroduction/tailwind/index.js
@@ -93,7 +93,7 @@ const MenuGroupLabel = React.forwardRef((props, ref) => {
   return (
     <Menu.GroupLabel
       ref={ref}
-      className="select-none p-2 font-sans text-xs font-semibold uppercase text-slate-700 dark:text-slate-200"
+      className="p-2 font-sans text-xs font-semibold text-slate-700 uppercase select-none dark:text-slate-200"
       {...props}
     />
   );

diff --git a/docs/data/components/number-field/UnstyledNumberFieldIntroduction/tailwind/index.js b/docs/data/components/number-field/UnstyledNumberFieldIntroduction/tailwind/index.js
@@ -97,7 +97,7 @@ const NumberFieldScrubArea = React.forwardRef(
         ref={ref}
         className={(state) =>
           classNames(
-            'cursor-ns-resize select-none font-bold',
+            'cursor-ns-resize font-bold select-none',
             typeof props.className === 'function'
               ? props.className(state)
               : props.className,

diff --git a/docs/data/components/tabs/UnstyledTabsIntroduction/tailwind/index.js b/docs/data/components/tabs/UnstyledTabsIntroduction/tailwind/index.js
@@ -65,7 +65,7 @@ const Tab = React.forwardRef((props, ref) => {
               : 'bg-transparent text-white hover:bg-purple-400 focus:text-white'
           } ${
             disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
-          } focus:shadow-outline-purple-light m-1.5 flex w-full justify-center rounded-md border-0 px-3 py-2.5 text-sm font-semibold leading-[1.3] focus:outline-0`,
+          } focus:shadow-outline-purple-light m-1.5 flex w-full justify-center rounded-md border-0 px-3 py-2.5 text-sm leading-[1.3] font-semibold focus:outline-0`,
           className,
         )
       }

diff --git a/docs/package.json b/docs/package.json
@@ -69,6 +69,7 @@
     "@mui/internal-docs-utils": "^1.0.15",
     "@mui/internal-scripts": "^1.0.25",
     "@mui/internal-test-utils": "https://pkg.csb.dev/mui/material-ui/commit/92c23999/@mui/internal-test-utils",
+    "@tailwindcss/postcss": "4.0.0-alpha.30",
     "@types/chai": "^4.3.20",
     "@types/gtag.js": "^0.0.20",
     "@types/hast": "^3.0.4",
@@ -84,7 +85,7 @@
     "prettier": "^3.2.5",
     "rimraf": "^5.0.10",
     "serve": "^14.2.3",
-    "tailwindcss": "^3.4.13",
+    "tailwindcss": "4.0.0-alpha.30",
     "webpack-bundle-analyzer": "^4.10.2",
     "yargs": "^17.7.2"
   }

diff --git a/docs/postcss.config.js b/docs/postcss.config.js
@@ -1,7 +1,6 @@
 module.exports = {
   plugins: {
     'postcss-import': {},
-    'tailwindcss/nesting': {},
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
   },
 };
diff --git a/docs/src/app/experiments/dialog.module.css b/docs/src/app/experiments/dialog.module.css
@@ -188,22 +188,22 @@
   padding: 16px;
   font-family: IBM Plex Sans;
 
-  h1 {
+  & h1 {
     font-family: General Sans;
     font-weight: 600;
     font-size: 2rem;
   }
 
-  h2 {
+  & h2 {
     font-size: 1.5rem;
     font-weight: 600;
   }
 
-  label {
+  & label {
     font-size: 0.8333rem;
   }
 
-  label + label {
+  & label + label {
     margin-left: 16px;
   }
 }
@@ -246,16 +246,16 @@
   margin-top: 24px;
   flex-wrap: wrap;
 
-  input[type='text'],
-  textarea {
+  & input[type='text'],
+  & textarea {
     padding: 8px;
     border: 1px solid #d8d8d8;
     border-radius: 4px;
     font-family: inherit;
     box-sizing: border-box;
   }
 
-  textarea {
+  & textarea {
     resize: vertical;
     min-height: 100px;
     width: 100%;

diff --git a/docs/src/app/experiments/experiments.module.css b/docs/src/app/experiments/experiments.module.css
@@ -18,7 +18,7 @@
   justify-content: center;
   text-align: center;
 
-  a {
+  & a {
     text-decoration: none;
     color: var(--color-foreground);
     margin: 0.5rem;

diff --git a/docs/src/app/new/layout.tsx b/docs/src/app/new/layout.tsx
@@ -6,12 +6,12 @@ import './layout.css';
 export default function Layout({ children }: React.PropsWithChildren) {
   return (
     <div className="relative z-0 px-[round(min(3rem,max(2rem,5vw)),1px)]">
-      <span className="bg-color-gridline absolute left-0 right-0 top-12 -mt-px h-px" />
-      <span className="bg-color-gridline absolute bottom-12 left-0 right-0 -mb-px h-px" />
+      <span className="bg-gridline absolute top-12 right-0 left-0 -mt-px h-px" />
+      <span className="bg-gridline absolute right-0 bottom-12 left-0 -mb-px h-px" />
       <div className="relative mx-auto flex min-h-dvh max-w-[1330px] flex-col py-12">
-        <span className="bg-color-gridline absolute bottom-0 left-0 top-0 -ml-px w-px" />
-        <span className="bg-color-gridline absolute bottom-0 right-0 top-0 -mr-px w-px" />
-        <div className="bg-color-content flex grow flex-col">{children}</div>
+        <span className="bg-gridline absolute top-0 bottom-0 left-0 -ml-px w-px" />
+        <span className="bg-gridline absolute top-0 right-0 bottom-0 -mr-px w-px" />
+        <div className="bg-content flex grow flex-col">{children}</div>
       </div>
     </div>
   );

diff --git a/docs/src/app/page.tsx b/docs/src/app/page.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { Metadata } from 'next';
 import Link from 'next/link';
 import { BaseUIIcon } from 'docs/src/icons/BaseUI';
+import '../styles.css';
 import '../styles/style.css';
 
 export default function Home() {

diff --git a/docs/src/components/ApiReference.module.css b/docs/src/components/ApiReference.module.css
@@ -5,7 +5,7 @@
   border: 1px solid var(--gray-outline-2);
   background-clip: padding-box;
 
-  table {
+  & table {
     all: unset;
     box-sizing: border-box;
     display: table;
@@ -19,12 +19,12 @@
     table-layout: fixed;
   }
 
-  tr {
+  & tr {
     vertical-align: inherit;
     box-sizing: border-box;
   }
 
-  thead th {
+  & thead th {
     background-color: var(--gray-surface-2);
     font-weight: var(--fw-2);
     text-align: start;
@@ -34,8 +34,8 @@
     padding-left: var(--space-4);
   }
 
-  tbody th,
-  td {
+  & tbody th,
+  & td {
     text-align: start;
     padding-top: var(--space-3);
     padding-right: var(--space-4);

diff --git a/docs/src/components/content/Callout.module.css b/docs/src/components/content/Callout.module.css
@@ -4,14 +4,14 @@
   padding: var(--space-4);
   margin: var(--space-6) 0;
 
-  p {
+  & p {
     color: var(--gray-text-1);
     font-size: var(--fs-3);
     line-height: 20px;
     margin-bottom: var(--space-2);
   }
 
-  > :last-child {
+  & > :last-child {
     margin-bottom: 0;
   }
 }

diff --git a/docs/src/components/demo/index.css b/docs/src/components/demo/index.css
@@ -53,7 +53,7 @@
 
   .DemoFilename {
     @apply text-xs;
-    font-family: var(--font-mono);
+    font-family: var(--font-family-mono);
     color: var(--color-foreground);
     font-weight: bold;
     -webkit-user-select: text;
@@ -67,7 +67,7 @@
 
   .DemoTab {
     @apply text-xs;
-    font-family: var(--font-mono);
+    font-family: var(--font-family-mono);
     cursor: default;
     position: relative;
     margin: -0.5rem;
@@ -138,6 +138,7 @@
   .DemoSelect {
     appearance: none;
     background: none;
+    border: 0;
     margin: 0;
     padding: 0;
     outline: 0;

diff --git a/docs/src/styles.css b/docs/src/styles.css
@@ -1,16 +1,16 @@
+@import 'tailwindcss';
 @import './fonts/index.css';
 @import './syntax-highlighting/index.css';
 @import './components/demo/index.css';
 @import './components/CodeBlock.css';
 @import './components/ToolbarButton.css';
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+/* Handy link to the default Tailwind theme:
+/* https://github.com/tailwindlabs/tailwindcss/blob/next/packages/tailwindcss/theme.css */
 
-:root {
-  --font-mono: 'SF Mono', 'Menlo', 'DejaVu Sans Mono', 'Consolas', 'Inconsolata', monospace;
-  --font-sans: 'Unica 77', system-ui, sans-serif;
+@theme {
+  --font-family-mono: 'SF Mono', 'Menlo', 'DejaVu Sans Mono', 'Consolas', 'Inconsolata', monospace;
+  --font-family-sans: 'Unica 77', system-ui, sans-serif;
 
   --color-background: oklch(98% 0.25% 264);
   --color-foreground: oklch(21% 2% 264);
@@ -28,6 +28,45 @@
   --color-red: oklch(50% 55% 31);
   --color-violet: oklch(40% 60% 300);
 
+  --font-size-xs: 0.8125rem;
+  --font-size-xs--line-height: 1rem;
+  --font-size-xs--letter-spacing: 0.00125em;
+
+  --font-size-sm: 0.9375rem;
+  --font-size-sm--line-height: 1.25rem;
+  --font-size-sm--letter-spacing: 0.001em;
+
+  --font-size-base: 1.0625rem;
+  --font-size-base--line-height: 1.5rem;
+
+  --font-size-lg: 1.1875rem;
+  --font-size-lg--line-height: 1.75rem;
+
+  --font-size-xl: 1.3125rem;
+  --font-size-xl--line-height: 1.75rem;
+
+  --font-size-2xl: 1.5rem;
+  --font-size-2xl--line-height: 1.25;
+  --font-size-2xl--letter-spacing: -0.0125em;
+
+  --font-size-3xl: 1.875rem;
+  --font-size-3xl--line-height: 1.2;
+  --font-size-3xl--letter-spacing: -0.015em;
+
+  --font-size-4xl: 2.25rem;
+  --font-size-4xl--line-height: 2.5rem;
+  --font-size-4xl--letter-spacing: -0.015em;
+
+  --font-size-5xl: 3rem;
+  --font-size-5xl--line-height: 1;
+  --font-size-5xl--letter-spacing: -0.015em;
+
+  --font-size-6xl: 3.75rem;
+  --font-size-6xl--line-height: 0.95;
+  --font-size-6xl--letter-spacing: -0.015em;
+}
+
+:root {
   @media (prefers-color-scheme: dark) {
     --color-background: #000;
     --color-foreground: oklch(90% 2% 264);

diff --git a/docs/src/styles/content.css b/docs/src/styles/content.css
@@ -1,4 +1,3 @@
-@tailwind components;
 @layer components {
   .Content {
     box-sizing: content-box;

diff --git a/docs/src/styles/shiki.css b/docs/src/styles/shiki.css
diff --git a/docs/src/styles/style.css b/docs/src/styles/style.css
@@ -1,6 +1,5 @@
 @import 'theme.css';
 @import 'reset.css';
-@import 'shiki.css';
 
 @import 'demo-colors.css';
 @import 'content.css';

diff --git a/docs/tailwind.config.ts b/docs/tailwind.config.ts