Qwik Tailwind CSS

1// Qwik.js with Tailwind CSS (TypeScript and Vite included) .cursorrules
2 
3// Prefer functional components
4 
5const preferFunctionalComponents = true;
6 
7// Qwik.js and Tailwind CSS best practices
8 
9const qwikTailwindBestPractices = [
10  "Use $ suffix for lazy-loaded functions",
11  "Utilize useSignal() for reactive state",
12  "Implement Tailwind CSS classes for styling",
13  "Use @apply directive in CSS files for reusable styles",
14  "Implement responsive design using Tailwind's responsive classes",
15  "Utilize Tailwind's configuration file for customization",
16  "Leverage TypeScript for type safety",
17  "Use Vite's fast HMR for development",
18];
19 
20// Folder structure
21 
22const folderStructure = `
23src/
24  components/
25  routes/
26  global.css
27  root.tsx
28  entry.ssr.tsx
29public/
30tailwind.config.js
31postcss.config.js
32vite.config.ts
33tsconfig.json
34`;
35 
36// Additional instructions
37 
38const additionalInstructions = `
391. Use TypeScript for all .ts and .tsx files
402. Implement proper Tailwind CSS purging for production builds
413. Utilize Qwik City for routing when applicable
424. Use Tailwind's @layer directive for custom styles
435. Implement dark mode using Tailwind's dark variant
446. Follow both Qwik and Tailwind naming conventions
457. Use server$ for server-side code execution
468. Leverage Vite plugins for optimized builds
47`;
48 
49