# 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.

- Skill: `mui/material-ui-tailwind` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add mui/material-ui-tailwind`
- Raw SKILL.md: https://api.skillmd.com/api/skills/mui/material-ui-tailwind/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: MIT
- Author: mui (https://skillmd.com/u/mui)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/mui/material-ui-tailwind

---


# 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).