diff --git a/docs/data/material/integrations/tailwindcss/tailwindcss-v4.md b/docs/data/material/integrations/tailwindcss/tailwindcss-v4.md index 0e0c0f8ca9e666..6e7ca501304b05 100644 --- a/docs/data/material/integrations/tailwindcss/tailwindcss-v4.md +++ b/docs/data/material/integrations/tailwindcss/tailwindcss-v4.md @@ -184,48 +184,48 @@ If you want to use Material UI theme tokens in your Tailwind CSS classes, copy --breakpoint-2xl: 120rem; /* 1920px */ /* Material UI theme colors */ - --color-primary: rgb(var(--mui-palette-primary-mainChannel)); - --color-primary-light: rgb(var(--mui-palette-primary-lightChannel)); - --color-primary-dark: rgb(var(--mui-palette-primary-darkChannel)); - --color-primary-contrast: rgb(var(--mui-palette-primary-contrastTextChannel)); + --color-primary: var(--mui-palette-primary-main); + --color-primary-light: var(--mui-palette-primary-light); + --color-primary-dark: var(--mui-palette-primary-dark); + --color-primary-contrast: var(--mui-palette-primary-contrastText); - --color-secondary: rgb(var(--mui-palette-secondary-mainChannel)); - --color-secondary-light: rgb(var(--mui-palette-secondary-lightChannel)); - --color-secondary-dark: rgb(var(--mui-palette-secondary-darkChannel)); - --color-secondary-contrast: rgb(var(--mui-palette-secondary-contrastTextChannel)); + --color-secondary: var(--mui-palette-secondary-main); + --color-secondary-light: var(--mui-palette-secondary-light); + --color-secondary-dark: var(--mui-palette-secondary-dark); + --color-secondary-contrast: var(--mui-palette-secondary-contrastText); /* Material UI status colors */ - --color-info: rgb(var(--mui-palette-info-mainChannel)); - --color-info-light: rgb(var(--mui-palette-info-lightChannel)); - --color-info-dark: rgb(var(--mui-palette-info-darkChannel)); - --color-info-contrast: rgb(var(--mui-palette-info-contrastTextChannel)); - - --color-error: rgb(var(--mui-palette-error-mainChannel)); - --color-error-light: rgb(var(--mui-palette-error-lightChannel)); - --color-error-dark: rgb(var(--mui-palette-error-darkChannel)); - --color-error-contrast: rgb(var(--mui-palette-error-contrastTextChannel)); - - --color-success: rgb(var(--mui-palette-success-mainChannel)); - --color-success-light: rgb(var(--mui-palette-success-lightChannel)); - --color-success-dark: rgb(var(--mui-palette-success-darkChannel)); - --color-success-contrast: rgb(var(--mui-palette-success-contrastTextChannel)); - - --color-warning: rgb(var(--mui-palette-warning-mainChannel)); - --color-warning-light: rgb(var(--mui-palette-warning-lightChannel)); - --color-warning-dark: rgb(var(--mui-palette-warning-darkChannel)); - --color-warning-contrast: rgb(var(--mui-palette-warning-contrastTextChannel)); + --color-info: var(--mui-palette-info-main); + --color-info-light: var(--mui-palette-info-light); + --color-info-dark: var(--mui-palette-info-dark); + --color-info-contrast: var(--mui-palette-info-contrastText); + + --color-error: var(--mui-palette-error-main); + --color-error-light: var(--mui-palette-error-light); + --color-error-dark: var(--mui-palette-error-dark); + --color-error-contrast: var(--mui-palette-error-contrastText); + + --color-success: var(--mui-palette-success-main); + --color-success-light: var(--mui-palette-success-light); + --color-success-dark: var(--mui-palette-success-dark); + --color-success-contrast: var(--mui-palette-success-contrastText); + + --color-warning: var(--mui-palette-warning-main); + --color-warning-light: var(--mui-palette-warning-light); + --color-warning-dark: var(--mui-palette-warning-dark); + --color-warning-contrast: var(--mui-palette-warning-contrastText); /* Material UI text & common colors */ - --color-text-primary: rgb(var(--mui-palette-text-primaryChannel)); - --color-text-secondary: rgb(var(--mui-palette-text-secondaryChannel)); + --color-text-primary: var(--mui-palette-text-primary); + --color-text-secondary: var(--mui-palette-text-secondary); --color-text-disabled: var(--mui-palette-text-disabled); --color-common-background: var(--mui-palette-common-background); --color-common-onBackground: var(--mui-palette-common-onBackground); --color-divider: var(--mui-palette-divider); /* Material UI background colors */ - --color-background-default: rgb(var(--mui-palette-background-defaultChannel)); - --color-background-paper: rgb(var(--mui-palette-background-paperChannel)); + --color-background-default: var(--mui-palette-background-default); + --color-background-paper: var(--mui-palette-background-paper); /* Material UI action colors */ --color-action-active: var(--mui-palette-action-active); @@ -455,7 +455,7 @@ If you want to use Material UI theme tokens in your Tailwind CSS classes, copy Then you can start using the new classes—for example: - The class `typography-h1` produces `font: var(--mui-font-h1);` -- The class `text-primary` produces `color: rgb(var(--mui-palette-primary-mainChannel));` +- The class `text-primary` produces `color: var(--mui-palette-primary-main);` So when you add these classes to an element… @@ -472,14 +472,14 @@ So when you add these classes to an element… letter-spacing: -0.01562em; } .text-primary { - color: rgb(var(--mui-palette-primary-mainChannel)); + color: var(--mui-palette-primary-main); } } ``` ### Playground -Visit the [Tailwind CSS Playground](https://play.tailwindcss.com/f1ZIr0qSNG) to explore the classes from Material UI theme tokens. +Visit the [Tailwind CSS Playground](https://play.tailwindcss.com/mh7Ym0mGff) to explore the classes from Material UI theme tokens. ## Troubleshooting