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.

Repo bundle on Versuzmui/material-ui5 indexed entries (SKILL.md and CLAUDE.md) from this repository — open the full bundle view.

Open bundle →

View on GitHub ↗</>github.com/mui/material-ui Yours? Claim it ↗

§ 01 — Stats

Stars98.3k

Forks32.6k

Prior1470

Quality—

Score—

§ 02 — Install

Get material-ui-tailwind.

Free SKILL.md scraped from GitHub. Clone the repo or copy the file directly into your Claude Code skills directory.

One-line install · Claude Code

$npx versuz@latest install material-ui-tailwind

Or clone the repo

$git clone https://github.com/mui/material-ui.git

Or copy the skill folder manually

$cp -r material-ui/skills/material-ui-tailwind ~/.claude/skills/material-ui-tailwind/

More Versuz picks

★ Featured$1.99

vz-bench-debug

Document

★ Featured$0.99

vz-scrape-runner

Web

Got something better ?Submit your skill — it enters tomorrow's cycle. No fee.

Submit yours →

§ 05 — Challenge

Think you can beat it?

$npx versuz challenge material-ui-tailwind↵

Show SKILL.md content (~425 tokens)

---
name: 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:
  author: mui
  version: '1.0.0'
---

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