[docs, core] Upgrade Tailwind (again) and Prettier (#853)

docs/package.json

@@ -76,7 +76,7 @@
     "@mui/internal-docs-utils": "^1.0.15",
     "@mui/internal-scripts": "^1.0.26",
     "@mui/internal-test-utils": "https://pkg.csb.dev/mui/material-ui/commit/92c23999/@mui/internal-test-utils",
-    "@tailwindcss/postcss": "4.0.0-alpha.34",
+    "@tailwindcss/postcss": "4.0.0-alpha.36",
     "@types/chai": "^4.3.20",
     "@types/gtag.js": "^0.0.20",
     "@types/hast": "^3.0.4",
@@ -89,10 +89,10 @@
     "framer-motion": "^11.11.11",
     "fs-extra": "^11.2.0",
     "mdast-util-mdx-jsx": "^3.1.3",
-    "prettier": "^3.2.5",
+    "prettier": "^3.3.3",
     "rimraf": "^5.0.10",
     "serve": "^14.2.4",
-    "tailwindcss": "4.0.0-alpha.34",
+    "tailwindcss": "4.0.0-alpha.36",
     "unified": "^11.0.5",
     "webpack-bundle-analyzer": "^4.10.2",
     "yargs": "^17.7.2"

docs/src/app/new/(content)/components/dialog/demos/hero/css-modules/index.module.css

@@ -9,7 +9,7 @@
   background-color: var(--color-gray-50);
   font: inherit;
   font-weight: 500;
-  color: var(--color-gray-900);
+  color: var(--color-gray-950);
   outline: 1px solid var(--color-gray-200);
   user-select: none;
 
@@ -59,6 +59,7 @@
   border-radius: 0.5rem;
   border: 1px solid var(--color-gray-300);
   background-color: var(--color-gray-50);
+  color: var(--color-gray-950);
   outline: 0;
   transition: all 150ms;
 

docs/src/app/new/(content)/components/dialog/demos/hero/tailwind/index.tsx

@@ -4,18 +4,18 @@ import { Dialog } from '@base-ui-components/react/Dialog';
 export default function ExampleDialog() {
   return (
     <Dialog.Root>
-      <Dialog.Trigger className="focus-visible:outline-blue 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">
+      <Dialog.Trigger className="flex rounded-md border-0 bg-gray-50 px-3.5 py-2 font-medium text-gray-950 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" />
-      <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-full max-w-[min(100vw-48px,320px)] -translate-1/2 rounded-lg border border-gray-300 bg-gray-50 p-6 outline-0 transition-all duration-150 [[data-entering],[data-exiting]]:scale-90 [[data-entering],[data-exiting]]:opacity-0">
+      <Dialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-full max-w-[min(100vw-48px,320px)] -translate-1/2 rounded-lg border border-gray-300 bg-gray-50 p-6 text-gray-950 outline-0 transition-all duration-150 [[data-entering],[data-exiting]]:scale-90 [[data-entering],[data-exiting]]:opacity-0">
         <Dialog.Title className="-mt-1.5 mb-1 text-lg font-medium">
           Your notifications
         </Dialog.Title>
         <Dialog.Description className="mb-4 text-gray-600">
           You are all caught up. Good job!
         </Dialog.Description>
-        <Dialog.Close className="focus-visible:outline-blue 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">
+        <Dialog.Close className="ml-auto flex rounded-md border-0 bg-gray-50 px-3.5 py-2 font-medium text-gray-950 outline-1 outline-gray-200 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-blue">
           Close
         </Dialog.Close>
       </Dialog.Popup>

docs/src/app/new/layout.css

@@ -1,4 +1,6 @@
 html {
+  color-scheme: light dark;
+
   /* macOS overscroll background */
   background-color: #000;
 }

docs/src/app/new/layout.tsx

@@ -5,12 +5,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-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" />
+      <span className="absolute top-12 right-0 left-0 -mt-px h-px bg-gridline" />
+      <span className="absolute right-0 bottom-12 left-0 -mb-px h-px bg-gridline" />
       <div className="relative mx-auto flex min-h-dvh max-w-[1330px] flex-col py-12">
-        <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>
+        <span className="absolute top-0 bottom-0 left-0 -ml-px w-px bg-gridline" />
+        <span className="absolute top-0 right-0 bottom-0 -mr-px w-px bg-gridline" />
+        <div className="flex grow flex-col bg-content">{children}</div>
       </div>
     </div>
   );

docs/src/components/GhostButton.css

@@ -1,5 +1,12 @@
 @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;

docs/src/components/Select.css

@@ -8,6 +8,7 @@
 
   .SelectOption {
     @apply text-xs;
+    outline: 0;
     display: grid;
     grid-template-columns: 1rem auto;
     align-items: center;

docs/src/components/content/PackageManagerSnippet.tsx

@@ -38,7 +38,7 @@ export function PackageManagerSnippet(props: PackageManagerSnippetProps) {
 export function Npm(props: React.PropsWithChildren) {
   return (
     <BasePackageManagerSnippet.Code value="npm">
-      <CodeBlock.Root className="mb-5 mt-3">
+      <CodeBlock.Root className="mt-3 mb-5">
         <CodeBlock.Pre {...props} />
       </CodeBlock.Root>
     </BasePackageManagerSnippet.Code>
@@ -48,7 +48,7 @@ export function Npm(props: React.PropsWithChildren) {
 export function Pnpm(props: React.PropsWithChildren) {
   return (
     <BasePackageManagerSnippet.Code value="pnpm">
-      <CodeBlock.Root className="mb-5 mt-3">
+      <CodeBlock.Root className="mt-3 mb-5">
         <CodeBlock.Pre {...props} />
       </CodeBlock.Root>
     </BasePackageManagerSnippet.Code>
@@ -58,7 +58,7 @@ export function Pnpm(props: React.PropsWithChildren) {
 export function Yarn(props: React.PropsWithChildren) {
   return (
     <BasePackageManagerSnippet.Code value="yarn">
-      <CodeBlock.Root className="mb-5 mt-3">
+      <CodeBlock.Root className="mt-3 mb-5">
         <CodeBlock.Pre {...props} />
       </CodeBlock.Root>
     </BasePackageManagerSnippet.Code>

docs/src/components/demo/index.css

@@ -89,6 +89,13 @@
   }
 
   .DemoTab {
+    /* Reset browser defaults */
+    background: none;
+    border-radius: 0;
+    border: none;
+    color: inherit;
+    padding: 0;
+
     font-family: var(--font-mono);
     font-size: 0.8125rem;
     line-height: 1.25rem;
@@ -225,6 +232,13 @@
   }
 
   .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;

docs/src/mdx-components.tsx

@@ -57,7 +57,7 @@ export const mdxComponents: MDXComponents = {
   AttributesTable: (props) => <AttributesTable className="mt-5 mb-6" {...props} />,
   CssVariablesTable: (props) => <CssVariablesTable className="mt-5 mb-6" {...props} />,
   PropsTable: (props) => <PropsTable className="mt-5 mb-6" {...props} />,
-  Subtitle: (props) => <p className="text-gray -mt-2 mb-5 text-lg" {...props} />,
+  Subtitle: (props) => <p className="-mt-2 mb-5 text-lg text-gray" {...props} />,
 };
 
 export const inlineMdxComponents: MDXComponents = {

package.json

@@ -88,7 +88,7 @@
     "@next/eslint-plugin-next": "^14.2.17",
     "@octokit/rest": "^20.1.1",
     "@playwright/test": "1.48.2",
-    "@tailwindcss/postcss": "4.0.0-alpha.34",
+    "@tailwindcss/postcss": "4.0.0-alpha.36",
     "@types/fs-extra": "^11.0.4",
     "@types/lodash": "^4.17.13",
     "@types/mocha": "^10.0.8",
@@ -154,8 +154,8 @@
     "postcss": "^8.4.47",
     "postcss-loader": "^8.1.1",
     "postcss-styled-syntax": "^0.6.4",
-    "prettier": "^3.2.5",
-    "prettier-plugin-tailwindcss": "^0.6.8",
+    "prettier": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.9",
     "pretty-quick": "^4.0.0",
     "process": "^0.11.10",
     "react": "19.0.0-rc-fb9a90fa48-20240614",
@@ -168,7 +168,7 @@
     "style-loader": "^4.0.0",
     "stylelint": "^16.4.0",
     "stylelint-config-standard": "^36.0.1",
-    "tailwindcss": "4.0.0-alpha.34",
+    "tailwindcss": "4.0.0-alpha.36",
     "terser": "^5.31.0",
     "terser-webpack-plugin": "^5.3.10",
     "tsx": "^4.8.2",

packages/react/src/Collapsible/Panel/useCollapsiblePanel.ts

@@ -145,7 +145,7 @@ export function useCollapsiblePanel(
       element.style.animationName = shouldCancelAnimation ? 'none' : originalAnimationName;
       element.style.transitionDuration = shouldCancelAnimation
         ? '0s'
-        : originalTransitionDuration ?? '';
+        : (originalTransitionDuration ?? '');
 
       runOnceAnimationsFinish(() => {
         ReactDOM.flushSync(() => {

packages/react/src/Composite/List/useCompositeListItem.ts

@@ -39,7 +39,7 @@ export function useCompositeListItem(
         elementsRef.current[index] = node;
         if (labelsRef) {
           const isLabelDefined = label !== undefined;
-          labelsRef.current[index] = isLabelDefined ? label : node?.textContent ?? null;
+          labelsRef.current[index] = isLabelDefined ? label : (node?.textContent ?? null);
         }
       }
     },

packages/react/src/Field/Control/useFieldControlValidation.ts

@@ -90,7 +90,7 @@ export function useFieldControlValidation() {
     const nextValidityData = {
       value,
       state: nextState,
-      error: Array.isArray(result) ? result[0] : result ?? element.validationMessage,
+      error: Array.isArray(result) ? result[0] : (result ?? element.validationMessage),
       errors: validationErrors,
       initialValue: validityData.initialValue,
     };

packages/react/src/Progress/Root/useProgressRoot.ts

@@ -42,7 +42,7 @@ function useProgressRoot(parameters: useProgressRoot.Parameters): useProgressRoo
         'aria-valuenow': value ?? undefined,
         'aria-valuetext': getAriaValueText
           ? getAriaValueText(value)
-          : ariaValuetext ?? getDefaultAriaValueText(value),
+          : (ariaValuetext ?? getDefaultAriaValueText(value)),
         dir: direction,
         role: 'progressbar',
       }),

packages/react/src/Slider/Thumb/useSliderThumb.ts

@@ -247,7 +247,7 @@ export function useSliderThumb(parameters: useSliderThumb.Parameters): useSlider
         'aria-valuenow': thumbValue,
         'aria-valuetext': getAriaValueText
           ? getAriaValueText(thumbValue, index)
-          : ariaValuetext ?? getDefaultAriaValueText(sliderValues, index),
+          : (ariaValuetext ?? getDefaultAriaValueText(sliderValues, index)),
         'data-index': index,
         disabled,
         id: inputId,

packages/react/src/useButton/useButton.ts

@@ -108,7 +108,7 @@ export function useButton(parameters: useButton.Parameters = {}): useButton.Retu
     buttonProps.tabIndex = tabIndex ?? 0;
     if (disabled) {
       buttonProps['aria-disabled'] = disabled as boolean;
-      buttonProps.tabIndex = focusableWhenDisabled ? tabIndex ?? 0 : -1;
+      buttonProps.tabIndex = focusableWhenDisabled ? (tabIndex ?? 0) : -1;
     }
   }