Qwik Tailwind

Cursor-Regel für Qwik-Projekte mit Tailwind CSS: konsistente Utility-Klassen und Styling-Konventionen.

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

Erweiterung der Qwik-Grundregel speziell für die Kombination mit Tailwind CSS: legt fest, wie der KI-Editor Utility-Klassen, Styling-Struktur und Komponentenaufbau in Qwik-Projekten mit Tailwind handhaben soll. Praktisch für alle, die Qwik nicht mit CSS-Modulen oder eigenem CSS, sondern mit Tailwind stylen und dabei konsistente Klassen-Konventionen wollen, statt bei jedem Component-Prompt neu zu erklären, wie Utility-Klassen organisiert werden sollen. Baut inhaltlich auf den allgemeinen Qwik-Grundlagen auf – sinnvoll also in Kombination mit der Basis-Regel, falls die Tailwind-Regel Grundkonzepte wie Resumability nicht separat abdeckt.

Praxis-Tipp

Zusammen mit der Qwik-Basisregel in .cursor/rules ablegen; beim Anlegen neuer Komponenten prüfen, ob Cursor Tailwind-Klassen konsistent statt inline-CSS vorschlägt.

Lizenz & Quelle

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

Lade …