[docs] Tailwind upgrade to v4.0.0-beta.2 (#873)

mui · Nov 26, 2024 · bdbe328 · bdbe328
1 parent 0e6223f
commit bdbe328
Show file tree

Hide file tree

Showing 8 changed files with 89 additions and 106 deletions.
diff --git a/docs/package.json b/docs/package.json
@@ -78,7 +78,7 @@
     "@mui/internal-docs-utils": "^1.0.15",
     "@mui/internal-scripts": "^1.0.27",
     "@mui/internal-test-utils": "https://pkg.csb.dev/mui/material-ui/commit/92c23999/@mui/internal-test-utils",
-    "@tailwindcss/postcss": "4.0.0-alpha.36",
+    "@tailwindcss/postcss": "4.0.0-beta.2",
     "@types/chai": "^4.3.20",
     "@types/gtag.js": "^0.0.20",
     "@types/hast": "^3.0.4",
@@ -94,7 +94,7 @@
     "prettier": "^3.3.3",
     "rimraf": "^5.0.10",
     "serve": "^14.2.4",
-    "tailwindcss": "4.0.0-alpha.36",
+    "tailwindcss": "4.0.0-beta.2",
     "unified": "^11.0.5",
     "webpack-bundle-analyzer": "^4.10.2",
     "yargs": "^17.7.2"

diff --git a/docs/src/app/new/(content)/components/dialog/demos/hero/tailwind/index.tsx b/docs/src/app/new/(content)/components/dialog/demos/hero/tailwind/index.tsx
@@ -4,7 +4,7 @@ import { Dialog } from '@base-ui-components/react/dialog';
 export default function ExampleDialog() {
   return (
     <Dialog.Root>
-      <Dialog.Trigger className="flex rounded-md border-0 bg-gray-50 px-3.5 py-2 font-medium text-gray-900 outline-1 outline-gray-200 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-blue">
+      <Dialog.Trigger className="flex rounded-md bg-gray-50 px-3.5 py-2 font-medium text-gray-900 outline-1 outline-gray-200 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-blue">
         View notifications
       </Dialog.Trigger>
       <Dialog.Backdrop className="fixed inset-0 bg-black opacity-20 transition-all duration-150 ease-out dark:opacity-70 [[data-entering],[data-exiting]]:opacity-0" />
@@ -15,7 +15,7 @@ export default function ExampleDialog() {
         <Dialog.Description className="mb-4 text-gray-600">
           You are all caught up. Good job!
         </Dialog.Description>
-        <Dialog.Close className="ml-auto flex rounded-md border-0 bg-gray-50 px-3.5 py-2 font-medium text-gray-900 outline-1 outline-gray-200 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-blue">
+        <Dialog.Close className="ml-auto flex rounded-md bg-gray-50 px-3.5 py-2 font-medium text-gray-900 outline-1 outline-gray-200 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-blue">
           Close
         </Dialog.Close>
       </Dialog.Popup>

diff --git a/docs/src/components/GhostButton.css b/docs/src/components/GhostButton.css
@@ -1,12 +1,5 @@
 @layer components {
   .GhostButton {
-    /* Reset browser defaults */
-    background: none;
-    border-radius: 0;
-    border: none;
-    color: inherit;
-    padding: 0;
-
     @apply text-xs;
     color: var(--color-gray);
     cursor: default;

diff --git a/docs/src/components/Table.css b/docs/src/components/Table.css
@@ -13,6 +13,10 @@
     table-layout: fixed;
     width: 100%;
     vertical-align: top;
+
+    /* Tailwind's border-collapse: collapse causes alpha blending issues in Safari */
+    border-collapse: separate;
+    border-spacing: 0;
   }
 
   .TableHead,

diff --git a/docs/src/components/demo/index.css b/docs/src/components/demo/index.css
@@ -86,13 +86,6 @@
   }
 
   .DemoTab {
-    /* Reset browser defaults */
-    background: none;
-    border-radius: 0;
-    border: none;
-    color: inherit;
-    padding: 0;
-
     font-family: var(--font-mono);
     letter-spacing: normal;
     cursor: default;
@@ -226,13 +219,6 @@
   }
 
   .DemoCollapseButton {
-    /* Reset browser defaults */
-    background: none;
-    border-radius: 0;
-    border: none;
-    color: inherit;
-    padding: 0;
-
     @apply text-xs;
     background-color: var(--color-gray-50);
     cursor: default;

diff --git a/docs/src/styles.css b/docs/src/styles.css
@@ -67,43 +67,43 @@
 
   --text-xs: 0.8125rem;
   --text-xs--line-height: 1.25rem;
-  --text-xs--tracking: 0.0015em;
+  --text-xs--letter-spacing: 0.0015em;
 
   --text-sm: 0.9375rem;
   --text-sm--line-height: 1.375rem;
-  --text-sm--tracking: 0.001em;
+  --text-sm--letter-spacing: 0.001em;
 
   --text-base: 1rem;
   --text-base--line-height: 1.5rem;
-  --text-base--tracking: 0em;
+  --text-base--letter-spacing: 0em;
 
   --text-lg: 1.125rem;
   --text-lg--line-height: 1.75rem;
-  --text-lg--tracking: -0.0025em;
+  --text-lg--letter-spacing: -0.0025em;
 
   --text-xl: 1.3125rem;
   --text-xl--line-height: 1.75rem;
-  --text-xl--tracking: -0.005em;
+  --text-xl--letter-spacing: -0.005em;
 
   --text-2xl: 1.5rem;
   --text-2xl--line-height: 1.25;
-  --text-2xl--tracking: -0.0125em;
+  --text-2xl--letter-spacing: -0.0125em;
 
   --text-3xl: 1.875rem;
   --text-3xl--line-height: 1.2;
-  --text-3xl--tracking: -0.015em;
+  --text-3xl--letter-spacing: -0.015em;
 
   --text-4xl: 2.25rem;
   --text-4xl--line-height: 2.5rem;
-  --text-4xl--tracking: -0.015em;
+  --text-4xl--letter-spacing: -0.015em;
 
   --text-5xl: 3rem;
   --text-5xl--line-height: 1;
-  --text-5xl--tracking: -0.015em;
+  --text-5xl--letter-spacing: -0.015em;
 
   --text-6xl: 3.75rem;
   --text-6xl--line-height: 0.95;
-  --text-6xl--tracking: -0.015em;
+  --text-6xl--letter-spacing: -0.015em;
 }
 
 :root {

diff --git a/package.json b/package.json
@@ -83,7 +83,7 @@
     "@next/eslint-plugin-next": "^14.2.17",
     "@octokit/rest": "^20.1.1",
     "@playwright/test": "1.49.0",
-    "@tailwindcss/postcss": "4.0.0-alpha.36",
+    "@tailwindcss/postcss": "4.0.0-beta.2",
     "@types/fs-extra": "^11.0.4",
     "@types/lodash": "^4.17.13",
     "@types/mocha": "^10.0.8",
@@ -164,7 +164,7 @@
     "style-loader": "^4.0.0",
     "stylelint": "^16.4.0",
     "stylelint-config-standard": "^36.0.1",
-    "tailwindcss": "4.0.0-alpha.36",
+    "tailwindcss": "4.0.0-beta.2",
     "terser": "^5.31.0",
     "terser-webpack-plugin": "^5.3.10",
     "tsc-alias": "^1.8.10",