qwik tailwind
via PatrickJS/awesome-cursorrules
Qwik development with Tailwind CSS, TypeScript, and Vite integration.
What is qwik tailwind?
This rule configures Cursor for building Qwik applications styled with Tailwind CSS. It establishes best practices for lazy-loaded functions, reactive state management, responsive design, and TypeScript type safety, along with recommended folder structure and build optimization techniques.
- Use $ suffix for lazy-loaded functions and server$ for server-side execution
- Manage reactive state with useSignal() and implement Tailwind CSS styling
- Apply responsive design using Tailwind's responsive classes and @apply directives
- Configure Tailwind purging, dark mode, and custom styles with @layer directive
- Leverage TypeScript for type safety and Vite's fast HMR for development
- Follow recommended folder structure with components, routes, and configuration 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
R development best practices guide covering project structure, coding style, testing, and package development.
Rails 8 development conventions and best practices for generators, architecture, and tooling.
React best practices and patterns for modern web applications
React development with Chakra UI component library and best practices.
Structured workflow for creating React components with design review and code reuse checks.
Generate production-ready React forms from screenshots, PDFs, or text using FormEngine JSON schema with RSuite, Material UI, or Mantine.