qwik tailwind
via PatrickJS/awesome-cursorrules
Qwik development with Tailwind CSS, TypeScript, and Vite integration.
What is qwik tailwind?
This rule configures Cursor for Qwik.js projects styled with Tailwind CSS. It establishes best practices for lazy-loaded components, reactive state management, and responsive design, along with recommended folder structure and TypeScript conventions.
- Use $ suffix for lazy-loaded functions and server$ for server-side execution
- Manage reactive state with useSignal() and implement Tailwind CSS classes for styling
- Apply responsive design using Tailwind's responsive classes and @apply directive for reusable styles
- Configure Tailwind customization via tailwind.config.js and dark mode variants
- Leverage TypeScript for type safety and Vite's fast HMR for development
- Organize code with recommended folder structure (components, routes, global.css, entry files)
Applies to
File patterns this rule matches.
Rule definition (reference)
Source of truth, from the repository.
// 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 = `
- Use TypeScript for all .ts and .tsx files
- Implement proper Tailwind CSS purging for production builds
- Utilize Qwik City for routing when applicable
- Use Tailwind's @layer directive for custom styles
- Implement dark mode using Tailwind's dark variant
- Follow both Qwik and Tailwind naming conventions
- Use server$ for server-side code execution
- Leverage Vite plugins for optimized builds `;
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.