[docs] Add Tailwind CSS v4 integration guide #45906
Conversation
| @@ -18,7 +18,7 @@ export const replaceMaterialLinks = (url: string) => { | |||
| return url; | |||
| } | |||
| return url.replace( | |||
| /(guides|customization|getting-started|discover-more|experimental-api|migration)/, | |||
| /(guides|customization|getting-started|discover-more|experimental-api|migration|integrations)/, | |||
There was a problem hiding this comment.
Add this change to fix the wrong generated url of the deploy preview
In the image above, the material should be material-ui.
…/tailwind-integration
| @import 'tailwindcss'; | ||
| ``` | ||
|
|
||
| ### Next.js Pages Router |
There was a problem hiding this comment.
I couldn't make this work, I tried to follow the steps from the Next.js guide and this one, but Tailwind classes were not overriding the MUI styles. It would be great if we can have an example to link (together with the guides), as combining the two guides it's kind of hard to follow.
Also, I've created #45922 with bunch of issues I found on the Next.js guide.
There was a problem hiding this comment.
This is expected because we haven't release #45596.
Updated the PR description to make it clear what build to use.
There was a problem hiding this comment.
Ah, ok, I will update my testing app to use the build from that PR.
There was a problem hiding this comment.
This doc as a whole is very outdated and needs some serious reworking, possibly to split it up into multiple docs. As a start, what do you think about moving the Tailwind v3 info into the new v4 doc and making that the single source of truth for all Tailwind integrations? (That could also be a separate PR so we don't block this one.)
There was a problem hiding this comment.
That could also be a separate PR so we don't block this one.
Totally agree, that's what I think.
However, I lean toward splitting v4 from v3 because the setup is quite different.
Also, I want to leave v3 integration as a separate page because the integration is such painful (we can't do anything about it because of the technical limitation), so in v3 page there should be an info to recommend Tailwind CSS v4 instead.
Co-authored-by: mapache-salvaje <[email protected]> Signed-off-by: Siriwat K <[email protected]>
docs/data/material/integrations/interoperability/interoperability.md
Outdated
Show resolved
Hide resolved
…/tailwind-integration
Co-authored-by: mapache-salvaje <[email protected]> Signed-off-by: Siriwat K <[email protected]>
…erial-ui into docs/tailwind-integration
siriwatknp
force-pushed
the
docs/tailwind-integration
branch
from
2cebe0d to
6784999
Compare
closes #44700
Docs: https://deploy-preview-45906--material-ui.netlify.app/material-ui/integrations/tailwindcss/tailwindcss-v4/
v3to the guide in "Style library interoperability" sectionTry it out
For Next.js Pages Router, the latest
7.0.2won't work because [material-nextjs] Add option to enable CSS layers for pages router #45596 is not released yet, so please use the build below:For App Router, the latest version
7.0.2should work.