Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

material-ui-tailwind — Claude Code skill: install

This skill explains how to combine Material UI with Tailwind CSS, handle CSS layer order, pass utility classes to components, and work with Tailwind v3.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add mui/material-ui --skill material-ui-tailwind -a claude-code
Open on GitHub

What material-ui-tailwind does

material-ui-tailwind covers Material UI with Tailwind CSS v4 through cascade layers. It explains @layer ordering, enableCssLayer, root className, slotProps.*.className, and mapping --mui-* variables into Tailwind @theme.

The guide includes setups for Next.js App Router, Next.js Pages Router, Vite, and SPAs. It uses GlobalStyles and a shared cache for the Pages Router, plus StyledEngineProvider with enableCssLayer for SPAs. The skill package contains SKILL.md, the detailed AGENTS.md, and reference.md with copy-ready snippets.

When Tailwind utilities fail to override MUI styles, check the CSS layer order first. Tailwind v3 coverage includes preflight, important, injectFirst, and portals.

What it helps with

  • configure Tailwind CSS v4 beside Material UI
  • fix style overrides caused by CSS layer order
  • pass utility classes through className and slotProps.*.className
  • map --mui-* variables into Tailwind @theme
  • handle Tailwind v3 interoperability with MUI

Example prompts for the agent

  • Set up Material UI with Tailwind CSS v4 in a Vite app so Tailwind utilities can override MUI styles.
  • Show the Next.js Pages Router setup with `enableCssLayer`, `GlobalStyles`, and a shared cache.
  • Explain how to apply a Tailwind utility through `slotProps.*.className` and map `--mui-*` variables into `@theme`.

How to install material-ui-tailwind

1Skills CLI (Vercel)

npx skills add mui/material-ui --skill material-ui-tailwind -a claude-code

2Manually: put the files in place

~/.claude/skills/material-ui-tailwind/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/material-ui-tailwind/

From the same set4

The whole set →
material-ui-nextjs mui A skill for wiring Material UI into Next.js: SSR, Emotion cache, next/font, CSS layers, Link, and useSearchParams. Use it when setting up or debugging MUI in a Next.js app. Claude Code CX Codex Cursor +1 725installs material-ui-styling mui Helps the agent pick the right Material UI styling layer: sx, styled(), theme components, or global CSS. Use it when edits pile up and you need to avoid extra wrapper nesting. Claude Code CX Codex Cursor +1 685installs material-ui-theming mui Skill for building and managing Material UI themes: palettes, color schemes, CSS variables, light/dark switching, and TypeScript augmentation. Use it when designing your app's visual system or implementing theme customization. Claude Code CX Codex Cursor +1 604installs

Similar

react-native vercel-labs This skill turns JSON specs into native React Native mobile UIs. Use it when screens need state bindings, conditional visibility, and actions. Claude Code CX Codex Cursor +1 3,200installs uizze-ui UIZZE Guides the agent through layout fixes, typography adjustments, and UI state handling. Helpful when improving component hierarchy using existing project tokens. Claude Code CX Codex Cursor +1 144,000installs ui tw93 This skill builds and refines production interfaces with a clear visual direction and screenshot-based checks. Use it for pages, components, and typography. Claude Code CX Codex Cursor +1 4,300installs frontend-design sickn33 Teaches the agent to create memorable interfaces instead of generic layouts: picks an aesthetic direction, checks accessibility, writes clean code. Claude Code CX Codex Cursor +1 2,600installs design-guide paperclipai This skill defines Paperclip rules for UI components, tokens, typography, and status systems. Use it when building or changing frontend pages. Claude Code CX Codex Cursor +1 362installs hairline-create lucasmarkes Generates interactive isometric line figures using the Hairline engine and outputs them as self-contained HTML files. Claude Code CX Codex Cursor +1 5,000installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs

Questions about material-ui-tailwind

How do I install material-ui-tailwind in Claude Code?

Run npx skills add mui/material-ui --skill material-ui-tailwind -a claude-code, run npx skills add mui/material-ui --skill material-ui-tailwind -a claude-code again, then open ~/.claude/skills/material-ui-tailwind/SKILL.md.

What does material-ui-tailwind do?

The skill explains how to combine Material UI with Tailwind CSS v4 using cascade layers, component class names, and theme variables. It also covers Next.js, Vite, SPA, and Tailwind v3 setups.

Does material-ui-tailwind support Tailwind v3?

Yes. The guide covers preflight, important, injectFirst, and portals for Tailwind v3 setups.

Source text

SKILL.md · MIT 
---
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).

© mui · MIT · mui/material-ui

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor