material-ui-tailwind
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.
How do I install this agent skill?
npx skills add https://github.com/mui/material-ui --skill material-ui-tailwindIs this agent skill safe to install?
- Gen Agent Trust Hubpass
This skill is safe. It provides documentation and configuration examples for integrating Material UI with Tailwind CSS v3 and v4, following official best practices.
- Socketpass
No alerts
- Snykpass
Risk: LOW · No issues
What does this agent skill do?
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.*.classNameon 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. Copy-paste snippets: reference.md.
How can the creator link this skill?
Add the canonical catalog link to the repository README so users can inspect current installs and available audits. The publishing guide covers the complete discovery path.
<a href="https://skillzs.dev/skills/mui/material-ui/material-ui-tailwind">View material-ui-tailwind on skillZs</a>