Next.js Material UI Tailwind CSS Cursorrules Prompt

Cursor-Regel, die MUI-Styling und Tailwind-Utility-Klassen im selben Next.js-Projekt konfliktfrei kombiniert.

Original-Beschreibung der Autoren: Cursor rules for Next.js development with Material UI and Tailwind CSS integration.

Die Regel

---
description: "Cursor rules for Next.js development with Material UI and Tailwind CSS integration."
globs: **/*
alwaysApply: false
---
Ce projet s'appel Portfolio2

Il est basé sur Next.Js, il a tailwindcss, materialui, shadcn/ui et aceternityui

What is your project named? portfolio2

Would you like to use TypeScript? Yes

Would you like to use ESLint? No

Would you like to use Tailwind CSS? Yes

Would you like to use `src/` directory? Yes

Would you like to use App Router? (recommended) Yes

Would you like to customize the default import alias (@/)? No

What import alias would you like configured? @/

Nola liste des dépendance

"dependencies": {
  "@ckeditor/ckeditor5-react": "^6.3.0",
  "@emotion/react": "^11.11.4",
  "@emotion/styled": "^11.11.5",
  "@mui/icons-material": "^5.15.18",
  "@mui/material": "^5.15.18",
  "@mui/styled-engine-sc": "^6.0.0-alpha.18",
  "@prisma/client": "^5.14.0",
  "autoprefixer": "^10.4.19",
  "bcryptjs": "^2.4.3",
  "ckeditor5": "^41.4.2",
  "clsx": "^2.1.1",
  "framer-motion": "^11.2.5",
  "init": "^0.1.2",
  "next": "^14.2.3",
  "next-auth": "^4.24.7",
  "react": "^18.3.1",
  "react-dom": "^18.3.1",
  "shadcn-ui": "^0.8.0",
  "styled-components": "^6.1.11",
  "tailwind-merge": "^2.3.0"
},

"devDependencies": {
  "@types/bcryptjs": "^2.4.6",
  "@types/node": "^20",
  "@types/react": "^18",
  "@types/react-dom": "^18",
  "postcss": "^8.4.38",
  "prisma": "^5.14.0",
  "tailwindcss": "^3.4.3",
  "typescript": "^5.4.5"
}

So nutzt du sie

Die Regel kopieren (Button oben) oder als Datei herunterladen und im Projekt unter .cursor/rules/ ablegen — Cursor lädt sie beim nächsten Start automatisch. Ältere Cursor-Versionen lesen alternativ eine einzelne .cursorrules-Datei im Projektstamm; dort einfach den Regel-Text ohne den Kopfblock zwischen den ----Zeilen einfügen.

Der Regel-Text ist englisch — Cursor versteht ihn unabhängig von der Sprache, in der Sie mit dem Editor chatten.

Im Detail

Diese Cursor-Regel löst ein konkretes Problem: Material UI bringt eigenes CSS-in-JS mit, Tailwind arbeitet mit Utility-Klassen — ohne Absprache überschreiben sich beide Systeme gegenseitig oder erzeugen Spezifitäts-Konflikte. Die Regel legt fest, wie MUI-Komponenten gestylt werden (über sx-Prop oder styled-Komponenten) und wo stattdessen Tailwind-Klassen zum Einsatz kommen, damit Cursor nicht wahllos beides mischt. Sinnvoll für Teams, die MUI wegen fertiger, barrierearmer Komponenten (Dialoge, Tabellen, Formulare) behalten wollen, aber für Layout und Spacing lieber Tailwind nutzen. Wer komplett auf ein System setzen kann, spart sich die zusätzliche Komplexität besser gleich.

Praxis-Tipp

Vor dem ersten Prompt kurz festlegen, welches System für Layout (meist Tailwind) und welches für Komponentenlogik (MUI) zuständig ist — z. B. ‘Baue eine MUI-Dialog-Komponente, positioniere sie aber mit Tailwind-Klassen’.

Lizenz & Quelle

• Lizenz: CC0 1.0
• Quelle: PatrickJS/awesome-cursorrules (GitHub)

Lade …