Skip to content

[docs] Use direct palette vars in Tailwind v4 snippet#47940

Merged
ZeeshanTamboli merged 3 commits intomui:masterfrom
Ahmad-Alaziz:codex/tailwind-v4-direct-palette-vars
Mar 12, 2026
Merged

[docs] Use direct palette vars in Tailwind v4 snippet#47940
ZeeshanTamboli merged 3 commits intomui:masterfrom
Ahmad-Alaziz:codex/tailwind-v4-direct-palette-vars

Conversation

@Ahmad-Alaziz
Copy link
Copy Markdown
Contributor

Summary

Updates the Tailwind CSS v4 docs snippet to use direct Material UI palette CSS variables instead of *Channel tokens wrapped in rgb(...).

Why

Some palette values, such as palette.text.secondary, include alpha. Mapping them through rgb(var(--mui-palette-...Channel)) makes them opaque, which causes classes like text-text-secondary to resolve to the wrong color.

This updates the snippet so Tailwind classes preserve the original theme token values.

Fixes #47870

@mui-bot
Copy link
Copy Markdown

mui-bot commented Mar 10, 2026

Netlify deploy preview

Bundle size report

Bundle Parsed size Gzip size
@mui/material 0B(0.00%) 0B(0.00%)
@mui/lab 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

Generated by 🚫 dangerJS against a96be74

@ZeeshanTamboli ZeeshanTamboli added docs Improvements or additions to the documentation. customization: css Design CSS customizability. type: bug It doesn't behave as expected. labels Mar 11, 2026
@ZeeshanTamboli ZeeshanTamboli self-requested a review March 11, 2026 09:02
@zannager zannager added the scope: system The system, the design tokens / styling foundations used across components. eg. @mui/system with MUI label Mar 11, 2026
@ZeeshanTamboli ZeeshanTamboli added v7.x needs cherry-pick The PR should be cherry-picked to master after merge. labels Mar 12, 2026
Copy link
Copy Markdown
Member

@ZeeshanTamboli ZeeshanTamboli left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the fix! I also updated the Tailwind playground link to use the fixed tokens.

@ZeeshanTamboli ZeeshanTamboli merged commit 7075c38 into mui:master Mar 12, 2026
18 checks passed
@github-actions
Copy link
Copy Markdown

Cherry-pick PRs will be created targeting branches: v7.x

github-actions Bot pushed a commit that referenced this pull request Mar 12, 2026
Co-authored-by: Zeeshan Tamboli <zeeshan.tamboli@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

customization: css Design CSS customizability. docs Improvements or additions to the documentation. needs cherry-pick The PR should be cherry-picked to master after merge. scope: system The system, the design tokens / styling foundations used across components. eg. @mui/system with MUI type: bug It doesn't behave as expected. v7.x

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[docs] text-secondary CSS variable does not work with Tailwind v4

4 participants