---
name: mui-material-ui-tailwind
description: "Integrates Material UI with Tailwind CSS v4 using cascade layers (enableCssLayer, @layer order) and documents Tailwind v3 interoperability (preflight, important, injectFirst, portals). Use when combining MUI with Tailwind utilities, slotProps className, or theme token bridges."
license: "MIT"
metadata:
  decimalai-skill-id: "af07deaa-699b-48d7-9770-d1cf2a2cef4b"
  decimalai-version-id: "a88b821f-6650-48c1-82fa-06f5a4e081f6"
  decimalai-version: "1"
  decimalai-body-sha256: "5dc6154dee0f1c0fee95f4c19ffb2362bdfd597802a8da364841b70b684e4336"
  decimalai-name: "mui/material-ui-tailwind"
  decimalai-format: "1"
  decimalai-invocation: "model"
  decimalai-category: "frontend"
  decimalai-source: "https://app.decimal.ai/s/mui-material-ui-tailwind@1/SKILL.md"
---
# Material UI and Tailwind CSS

Agent skill for MUI + Tailwind. SKILL.md is the entry; AGENTS.md is the full guide.

## When to apply

- Tailwind utilities not overriding MUI (specificity / layer order)
- Setting up v4 with Next.js App or Pages Router, or Vite
- `className` / `slotProps.*.className` on MUI components
- Mapping `--mui-*` variables into Tailwind `@theme`
- Legacy v3 setups or migrations

## Sections in AGENTS.md

| Area         | Topics                                                |
| :----------- | :---------------------------------------------------- |
| v4           | `@layer` order, `mui` before `utilities`              |
| Next.js      | `enableCssLayer`, Pages `GlobalStyles` + shared cache |
| SPA          | `StyledEngineProvider` + `enableCssLayer`             |
| Usage        | Root vs slot `className`                              |
| `@theme`     | Full snippet on docs site; needs `cssVariables`       |
| IntelliSense | VS Code `classRegex`                                  |
| v3           | preflight, `important`, `injectFirst`, portals        |

## Full guide

Read [AGENTS.md](./AGENTS.md). Copy-paste snippets: [reference.md](./reference.md).