material-ui-tailwind

star 5

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.

siriwatknp By siriwatknp schedule Updated 4/23/2026

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. Copy-paste snippets: reference.md.

Install via CLI
npx skills add https://github.com/siriwatknp/material-ui --skill material-ui-tailwind
Repository Details
star Stars 5
call_split Forks 0
navigation Branch main
article Path SKILL.md
More from Creator