[test] Configure Tailwind CSS in the visual-regression app#48575
Merged
Conversation
The Argos regression bundle pulls in demos that use Tailwind utilities (currently `docs/data/material/integrations/tailwindcss/TextFieldTailwind`), but the Vite app at `test/regressions/` never loaded Tailwind, so those classes resolved to no styles and screenshots showed the demos unstyled. Wire in Tailwind v4 via `@tailwindcss/vite` and reuse `docs/tailwind.config.mjs` through the `@config` directive so the regression bundle resolves utilities identically to the docs site. Preflight is intentionally omitted to avoid resetting MUI's baseline and breaking unrelated screenshots. Closes mui/mui-public#1502
Deploy previewhttps://deploy-preview-48575--material-ui.netlify.app/ Bundle size
Check out the code infra dashboard for more information about this PR. |
…-regressions # Conflicts: # pnpm-lock.yaml
Declaring `@layer theme, base, mui, components, utilities;` establishes the cascade-layer order so utilities outrank mui, and enabling `StyledEngineProvider enableCssLayer` makes MUI's Emotion styles emit inside `@layer mui`. Without this, MUI's unlayered styles beat Tailwind's layered utilities and demos like `TextFieldTailwind` render with the default MUI typography/spacing instead of the Tailwind overrides — same mechanism the docs site uses to render the demo correctly.
mnajdova
approved these changes
May 27, 2026
Member
|
+1 for the fix, we need a much better integration story with Tailwind CSS, so we need a stronger test suite with it. Now, seeing the change, vs. the one used to solve https://mui-org.slack.com/archives/C02P87NQLJC/p1778866246836179?thread_ts=1778866246.836179&cid=C02P87NQLJC for example. I have added Tailwind CSS as another on mui/mui-public#199. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Wires Tailwind v4 into the regression Vite app so demos using Tailwind utilities (currently
TextFieldTailwind) screenshot with the correct styles instead of unstyled.Enabling
enableCssLayeralso brings the regression renderer in line with how mui.com renders, which improves 6 other screenshots that now match the docs site more closely - those Argos diffs are intentional, not regressions.Closes mui/mui-public#1502