[POC] Use ThemeCSSProvider as replacement for ThemeProvider

[silviuaavram]

This PR aims to act as a POC for using a CSSThemeProvider instead of ThemeProvider, which should not import anything Emotion related. To be used by consumers who want to replace Emotion styling with anything else: Tailwind, CSS Modules etc. It's one of the ways we can remove Emotion and keep the Theme generation at runtime. The other way is to generate the theme at build time and import the file. This PR will cover just the first option.

Progress:

• Create @mui/tailwind package.
• Test the tailwind v4 import works in the docs.
  • The page is in docs/data/material/integrations/tailwindcss/tailwindcss-components.md.
  • It contains instructions on how to leverage mui states and palette via tailwind values.
  • No need for the postcss-import anymore, as it also broke the import from @mui/tailwind.
• Change Slider to use css file instead of using styled arguments. At the moment, the only option I can make it with CSS modules file.
  • Change composeClasses to build the class name and also check the css modules object for the corresponding hashed class, and add it to the result when found.
  • Generate the transition variables and also make sure they have ms instead of px measurement.
  • Check if Slider works in the docs. At the moment, it seems there is no need to generate any .css file for users to import.
• Create @mui/styled-engine-noop
• Create 2 Vite apps for both ThemeProvider and CSSThemeProvider, as well as 2 experiments in the docs app (css + emotion)
  • Add useColorScheme support for both examples and to make it work via CSSThemeProvider
  • CSSThemeProvider will work with useCSSColorScheme which is a separate export, due to the fact that useColorScheme from CSSVarsProvider is coupled with the implementation.
  • Implementation-wise, the login in useColorScheme / useCSSColorScheme is now abstracted in useColorSchemeSetup.
  • For both examples, use sx, styleOverrides and style tag to change Slider. For css example in experiments, styleOverrides does not work, but sx does (no alias to style-noop). For css example in vite, sx and styleOverrides do not work.

Testing:

• to check docs experiments, run pnpm start and check http://localhost:3000/experiments/css-slider/ and http://localhost:3000/experiments/emotion-slider/. The experiments are in the source code.
• to check the standalone apps, which are better because we are using the package alias for style-noop in the case of CssThemeProvider, run pnpm -F @mui-internal/css-theme-provider-vite-sandbox dev and pnpm -F @mui-internal/emotion-vite-sandbox dev. Check the links provided by the commands.
• to check the bundle sizes for these apps (and make sure emotion is shaken out), run pnpm -F @mui-internal/emotion-vite-sandbox build and pnpm -F @mui-internal/css-theme-provider-vite-sandbox build.

[code-infra-dashboard]

Deploy preview

• docs/data/material/integrations/tailwindcss/tailwindcss-components.md
• docs/data/material/integrations/tailwindcss/tailwindcss-v4.md

Bundle size

Bundle	Parsed size	Gzip size
@mui/material	0B(0.00%)	0B(0.00%)
@mui/lab	0B(0.00%)	0B(0.00%)
@mui/private-theming	0B(0.00%)	0B(0.00%)
@mui/system	0B(0.00%)	0B(0.00%)
@mui/utils	0B(0.00%)	0B(0.00%)

Details of bundle changes

---

Check out the code infra dashboard for more information about this PR.

[Copilot]

Pull request overview

Adds a new @mui/tailwind package as a POC integration layer between MUI’s CSS variables (from CssVarsProvider) and Tailwind (v3 preset + v4 CSS directives), and wires it into the docs with a new integration page and demos.

Changes:

• Introduce @mui/tailwind (Tailwind v3 preset + state-variant plugin + Tailwind v4 v4.css token mapping).
• Update docs to consume @mui/tailwind/v4.css and add a new “Tailwind components” integration page + demos.
• Adjust repo config/deps to include the new workspace package and remove postcss-import from docs.

Reviewed changes

Copilot reviewed 18 out of 20 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
tsconfig.json	Adds TS path aliases for the new @mui/tailwind package.
pnpm-lock.yaml	Adds workspace link for @mui/tailwind and updates lock entries (incl. removal of postcss-import).
packages/mui-tailwind/src/v4.css	Tailwind v4 CSS integration: breakpoints, token mapping, utilities, and mui-* variants.
packages/mui-tailwind/src/preset.js	Tailwind v3 preset exposing MUI token mappings + plugin registration.
packages/mui-tailwind/src/plugin.js	Tailwind plugin adding mui-{state} / mui-not-{state} variants.
packages/mui-tailwind/README.md	Links to the docs integration page for setup and demos.
packages/mui-tailwind/package.json	Declares the new package metadata and entrypoint exports.
docs/postcss.config.js	Removes postcss-import from the docs PostCSS pipeline.
docs/pages/material-ui/integrations/tailwindcss/tailwindcss-components.js	Adds a new docs route for the Tailwind components page.
docs/pages/global.css	Imports @mui/tailwind/v4.css and updates layer ordering for Tailwind/MUI.
docs/package.json	Adds @mui/tailwind workspace dependency; removes postcss-import.
docs/data/material/integrations/tailwindcss/TailwindFilterChips.tsx	New TS demo using mui-selected: Tailwind variant on MUI ToggleButtons.
docs/data/material/integrations/tailwindcss/TailwindFilterChips.js	JS version of the filter chips demo.
docs/data/material/integrations/tailwindcss/TailwindDisabledState.tsx	New TS demo using mui-disabled: variant with Slider/Switch.
docs/data/material/integrations/tailwindcss/TailwindDisabledState.js	JS version of the disabled-state demo.
docs/data/material/integrations/tailwindcss/tailwindcss-v4.md	Points readers to the new @mui/tailwind package page.
docs/data/material/integrations/tailwindcss/tailwindcss-components.md	New docs page describing @mui/tailwind setup (v3 + v4) and demos.
docs/data/material/integrations/tailwindcss/TailwindCard.tsx.preview	Preview snippet for the Tailwind job card demo.
docs/data/material/integrations/tailwindcss/TailwindCard.tsx	New TS Tailwind-styled job card demo built from MUI components.
docs/data/material/integrations/tailwindcss/TailwindCard.js	JS version of the Tailwind job card demo (+ PropTypes).

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Janpot]

You should remove these aliases and test against the build folders instead. These aliases tend to turn what's supposedly 3rd party code for bundlers into 1st party code. Which operates under different rules in some runtimes. In the past I've also masks module graph issues around csj/esm.

[silviuaavram]

sure, let me check.