solidjs tailwind
via PatrickJS/awesome-cursorrules
Solid.js development with Tailwind CSS styling and reactive components.
What is solidjs tailwind?
This rule configures Cursor for Solid.js projects using Tailwind CSS for styling. It establishes best practices for reactive state management with createSignal(), utility-first CSS patterns, responsive design, and dark mode support. Use it when building Solid.js applications that leverage Tailwind for styling.
- Use createSignal() for reactive state management
- Apply Tailwind CSS classes and @apply directives for styling
- Implement responsive design with Tailwind's responsive utilities
- Configure dark mode using Tailwind's dark variant
- Organize code with components, pages, and styles folders
- Use JSX templates with functional components
Applies to
File patterns this rule matches.
Rule definition (reference)
Source of truth, from the repository.
// 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 = `
- Use JSX for component templates
- Implement proper Tailwind CSS purging for production builds
- Utilize Solid Router for routing when applicable
- Use Tailwind's @layer directive for custom styles
- Implement utility-first CSS approach
- Follow both Solid.js and Tailwind naming conventions
- Use JIT (Just-In-Time) mode for faster development `;
Related rules
Senior full-stack TypeScript, React, Node.js guidance with clean architecture, testing, and WHY-oriented reasoning.
Quantitative factor research skills for designing, evaluating, and mining alpha factors in equities markets.
Android development with Jetpack Compose, clean architecture, and Material Design 3.
Angular development with Novo Elements UI library using standalone components.
Expert Angular 18 + TypeScript development with Jest, emphasizing clean code and performance.
Manage Kubernetes clusters, add-ons, stacks, and credentials via the Ankra CLI platform.