mcpField
M
material-ui-tailwind

material-ui-tailwind

github.com/muiDesign & UI99.3k368 installsUpdated today
Repository

About material-ui-tailwind

An agent skill for configuring and troubleshooting Material UI with Tailwind CSS. It covers v3 and v4 setups, including Next.js and Vite, with guidance on CSS layers and component classes.

Key features

  1. 01Troubleshoot Tailwind and MUI specificity
  2. 02Configure v4 CSS layer order
  3. 03Set up Next.js and Vite integration
  4. 04Explain component className usage
  5. 05Review v3 migration considerations

Use cases

  1. 01Fix Tailwind styles that fail to override MUI
  2. 02Configure style layers in Next.js or Vite
  3. 03Migrate older Tailwind and MUI setups

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/mui/material-ui --skill material-ui-tailwind

After installing, type/material-ui-tailwindin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

AGENTS.md
metadata.json
README.md
reference.md

Details

From the project README

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

AreaTopics
v4@layer order, mui before utilities
Next.jsenableCssLayer, Pages GlobalStyles + shared cache
SPAStyledEngineProvider + enableCssLayer
UsageRoot vs slot className
@themeFull snippet on docs site; needs cssVariables
IntelliSenseVS Code classRegex
v3preflight, important, injectFirst, portals

Full guide

Read AGENTS.md. Copy-paste snippets: reference.md.

Comments

Markdown supported