[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.

[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.