material-ui-tailwind — скилл для Claude Code: установка
Скилл помогает настроить Material UI вместе с Tailwind CSS и разобраться с порядком CSS-слоёв, классами компонентов и миграцией с Tailwind v3.
npx skills add mui/material-ui --skill material-ui-tailwind -a claude-codeЧто делает material-ui-tailwind
material-ui-tailwind описывает связку Material UI и Tailwind CSS v4 через каскадные слои. В руководстве разобраны порядок @layer, настройка enableCssLayer, применение className и slotProps.*.className, а также перенос переменных --mui-* в Tailwind @theme.
Материалы охватывают Next.js с App Router и Pages Router, Vite и одностраничные приложения. Для Next.js показаны GlobalStyles и общий cache, для SPA — StyledEngineProvider вместе с enableCssLayer. В комплект входят SKILL.md, подробный AGENTS.md и reference.md с готовыми фрагментами.
Если утилиты Tailwind не перекрывают стили MUI, проверьте порядок CSS-слоёв. Для Tailwind v3 отдельно разобраны preflight, important, injectFirst и порталы.
Какие задачи решает
- настроить Tailwind CSS v4 рядом с Material UI
- исправить перекрытие стилей из-за порядка CSS-слоёв
- передать классы через
classNameиslotProps.*.className - связать переменные
--mui-*с Tailwind@theme - разобраться с совместимостью Tailwind v3 и MUI
Примеры запросов агенту
- Настрой Material UI и Tailwind CSS v4 в приложении на Vite, чтобы утилиты Tailwind перекрывали стили MUI.
- Покажи конфигурацию для Next.js Pages Router с `enableCssLayer`, `GlobalStyles` и общим cache.
- Объясни, как применить Tailwind-класс через `slotProps.*.className` и как перенести `--mui-*` в `@theme`.
Как установить material-ui-tailwind
1Через Skills CLI (Vercel)
npx skills add mui/material-ui --skill material-ui-tailwind -a claude-code2Вручную: положить файлы
~/.claude/skills/material-ui-tailwind/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/material-ui-tailwind/
1Через Skills CLI (Vercel)
npx skills add mui/material-ui --skill material-ui-tailwind -a codex2Вручную: положить файлы
.agents/skills/material-ui-tailwind/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add mui/material-ui --skill material-ui-tailwind -a cursor2Вручную: положить файлы
.cursor/skills/material-ui-tailwind/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install mui/material-ui material-ui-tailwind2Вручную: положить файлы
.github/skills/material-ui-tailwind/SKILL.md1Через Skills CLI (Vercel)
npx skills add mui/material-ui --skill material-ui-tailwind -a gemini-cli2Командой платформы
gemini skills install https://github.com/mui/material-ui --path skills/material-ui-tailwindВручную: положить файлы
.devin/skills/material-ui-tailwind/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add mui/material-ui --skill material-ui-tailwind -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
Из того же набора4
Весь набор →Похожие
Вопросы о material-ui-tailwind
Как установить material-ui-tailwind в Claude Code?
Выполните npx skills add mui/material-ui --skill material-ui-tailwind -a claude-code, затем повторите npx skills add mui/material-ui --skill material-ui-tailwind -a claude-code и откройте ~/.claude/skills/material-ui-tailwind/SKILL.md.
Что делает material-ui-tailwind?
Скилл объясняет, как соединить Material UI с Tailwind CSS v4 через каскадные слои, классы компонентов и переменные темы. Он также разбирает настройку для Next.js, Vite и Tailwind v3.
Поддерживает ли material-ui-tailwind Tailwind v3?
Да. В руководстве рассмотрены preflight, important, injectFirst и порталы для сценариев с Tailwind v3.
Исходный текст
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
