Qwik Tailwind

Cursor-Regel, die bei Qwik-Projekten automatisch Tailwind-Utility-Klassen statt eigenem CSS erzwingt.

Original-Beschreibung der Autoren: Cursor rules for Qwik development with Tailwind CSS integration.

Die Regel

---
description: "Cursor rules for Qwik development with Tailwind CSS integration."
globs: **/*
alwaysApply: false
---
// Qwik.js with Tailwind CSS (TypeScript and Vite included) .cursorrules

// Prefer functional components

const preferFunctionalComponents = true;

// Qwik.js and Tailwind CSS best practices

const qwikTailwindBestPractices = [
  "Use $ suffix for lazy-loaded functions",
  "Utilize useSignal() for reactive state",
  "Implement Tailwind CSS classes for styling",
  "Use @apply directive in CSS files for reusable styles",
  "Implement responsive design using Tailwind's responsive classes",
  "Utilize Tailwind's configuration file for customization",
  "Leverage TypeScript for type safety",
  "Use Vite's fast HMR for development",
];

// Folder structure

const folderStructure = `
src/
  components/
  routes/
  global.css
  root.tsx
  entry.ssr.tsx
public/
tailwind.config.js
postcss.config.js
vite.config.ts
tsconfig.json
`;

// Additional instructions

const additionalInstructions = `
1. Use TypeScript for all .ts and .tsx files
2. Implement proper Tailwind CSS purging for production builds
3. Utilize Qwik City for routing when applicable
4. Use Tailwind's @layer directive for custom styles
5. Implement dark mode using Tailwind's dark variant
6. Follow both Qwik and Tailwind naming conventions
7. Use server$ for server-side code execution
8. Leverage Vite plugins for optimized builds
`;

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 richtet sich an Teams, die mit dem Meta-Framework Qwik arbeiten und dabei konsequent Tailwind CSS statt eigener Stylesheets einsetzen wollen. Sie sorgt dafür, dass die KI beim Codegenerieren automatisch zu Utility-Klassen statt zu Inline-Styles oder separaten CSS-Dateien greift und sich an gängigen Tailwind-Konventionen wie Klassenreihenfolge und responsiven Präfixen orientiert. Der Nutzen liegt vor allem in der Konsistenz über ein wachsendes Codebase hinweg, weil jeder generierte Codeabschnitt demselben Styling-Muster folgt. Qwik selbst ist noch ein Nischen-Framework, entsprechend ist diese Regel primär für Entwickler relevant, die bereits ein Qwik-Projekt betreiben und keine Lust haben, der KI jedes Mal aufs Neue ihre Styling-Präferenzen zu erklären.

Praxis-Tipp

Legen Sie die Regel in Ihr Qwik-Projekt, bevor Sie neue Komponenten generieren lassen, damit die KI von Anfang an Tailwind-Klassen statt CSS-Module vorschlägt, etwa bei einem Prompt wie „erstelle eine Card-Komponente mit Hover-Effekt“.

Lizenz & Quelle

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

Lade …