Solidjs Tailwind

Cursor-Regel für SolidJS mit Tailwind CSS: Styling-Konventionen für Signal-basierte Komponenten.

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

Die Regel

---
description: "Cursor rules for Solid.js development with Tailwind CSS integration."
globs: **/*
alwaysApply: false
---
// Solid.js with Tailwind CSS .cursorrules

// Prefer functional components

const preferFunctionalComponents = true;

// Solid.js and Tailwind CSS best practices

const solidjsTailwindBestPractices = [
  "Use createSignal() for reactive state",
  "Implement Tailwind CSS classes for styling",
  "Utilize @apply directive in CSS files for reusable styles",
  "Implement responsive design using Tailwind's responsive classes",
  "Use Tailwind's configuration file for customization",
  "Implement dark mode using Tailwind's dark variant",
];

// Folder structure

const folderStructure = `
src/
  components/
  pages/
  styles/
  App.jsx
  index.jsx
public/
  index.html
tailwind.config.js
postcss.config.js
`;

// Additional instructions

const additionalInstructions = `
1. Use JSX for component templates
2. Implement proper Tailwind CSS purging for production builds
3. Utilize Solid Router for routing when applicable
4. Use Tailwind's @layer directive for custom styles
5. Implement utility-first CSS approach
6. Follow both Solid.js and Tailwind naming conventions
7. Use JIT (Just-In-Time) mode for faster development
`;

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 die SolidJS-Grundregeln mit Tailwind-spezifischen Vorgaben, etwa wie Utility-Klassen bei bedingtem Styling mit Solids classList-Direktive statt String-Konkatenation gesetzt werden — ein Detail, das sich von React-Tailwind-Setups unterscheidet und ohne diese Regel leicht falsch generiert wird. Sinnvoll für Projekte, die bereits Tailwind als Styling-Basis gewählt haben und wollen, dass generierte Komponenten idiomatisch bleiben statt Klassen manuell per Template-String zusammenzubauen. Ersetzt keine allgemeine SolidJS-Regel, ergänzt sie nur um den CSS-Teil.

Praxis-Tipp

Zusammen mit solidjs-basic nutzen, z. B. „Style diesen Button abhängig vom active-Signal mit Tailwind“ — Cursor greift dann korrekt zu classList() statt zu bedingten Klassen-Strings.

Lizenz & Quelle

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

Lade …