mcpField
M
material-ui-tailwind

material-ui-tailwind

github.com/muiデザイン・UI99.3k368 回インストール今日更新
リポジトリ

material-ui-tailwind について

Material UI と Tailwind CSS の設定や問題解決を支援するエージェントスキルです。Next.js や Vite を含む v3・v4 の構成、CSS レイヤー、コンポーネントクラスの扱いを説明します。

主な機能

  1. 01Tailwind と MUI の優先順位問題の調査
  2. 02v4 の CSS レイヤー順の設定
  3. 03Next.js と Vite の連携設定
  4. 04コンポーネントの className の使い方
  5. 05v3 からの移行時の注意点

活用シーン

  1. 01Tailwind のスタイルが MUI を上書きしない問題の解決
  2. 02Next.js や Vite でのスタイルレイヤー設定
  3. 03旧式の Tailwind・MUI 構成からの移行

インストール

コマンドをコピーしてターミナルで実行します。

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

インストール後、Claude Code で/material-ui-tailwindを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

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

詳細

Material UI と Tailwind CSS

MUI と Tailwind 向けのエージェントスキルです。エントリーポイントは SKILL.md、完全なガイドは AGENTS.md です。

適用するケース

  • Tailwind のユーティリティが MUI を上書きしない場合（詳細度／レイヤーの順序）
  • Next.js App Router または Pages Router、あるいは Vite で v4 をセットアップする場合
  • MUI コンポーネントで className / slotProps.*.className を使う場合
  • --mui-* 変数を Tailwind の @theme にマッピングする場合
  • レガシーな v3 のセットアップや移行

AGENTS.md のセクション

領域トピック
v4@layer の順序、utilities より前の mui
Next.jsenableCssLayer、Pages の GlobalStyles と共有キャッシュ
SPAStyledEngineProvider と enableCssLayer
使用方法ルートとスロットの className
@themeドキュメントサイトにある完全なスニペット。cssVariables が必要
IntelliSenseVS Code の classRegex
v3preflight、important、injectFirst、ポータル

完全なガイド

AGENTS.md をお読みください。コピーして貼り付けられるスニペット：reference.md。

コメント

Markdown 対応