Next.js Material UI Tailwind CSS Cursorrules Prompt

Cursor-Regel für Next.js-Projekte, die Material UI und Tailwind CSS konfliktfrei kombinieren.

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

Kombiniert Next.js mit Material UI und Tailwind CSS — eine Kombination, die in der Praxis Konflikte erzeugen kann, da beide Systeme eigene Styling-Ansätze mitbringen (MUI: sx-Prop/Theme, Tailwind: Utility-Klassen). Die Regel soll dem Editor vorgeben, wie beides sauber nebeneinander funktioniert, ohne dass Tailwind-Klassen von MUI-Styles überschrieben werden oder doppelte Theme-Definitionen entstehen. Sinnvoll für Projekte, die bereits MUI-Komponenten nutzen, aber für Layout/Spacing lieber Tailwind-Utilities einsetzen wollen, statt komplett auf ein System umzusteigen. Wer sauber trennen kann, sollte eher nur eines der beiden Systeme verwenden.

Praxis-Tipp

Bei Prompts wie „style diese Card mit Tailwind-Spacing, aber MUI-Komponente“ testen, ob die Regel tatsächlich Klassenkonflikte vermeidet, bevor man sie projektweit übernimmt.

Lizenz & Quelle

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

Lade …