qwik tailwind

The skill Copy

// 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 = `
1. Use TypeScript for all .ts and .tsx files
2. Implement proper Tailwind CSS purging for production builds
3. Utilize Qwik City for routing when applicable
4. Use Tailwind's @layer directive for custom styles
5. Implement dark mode using Tailwind's dark variant
6. Follow both Qwik and Tailwind naming conventions
7. Use server$ for server-side code execution
8. Leverage Vite plugins for optimized builds
`;

How to install it Copy

1. Open the tool and start a new conversation, project or template.
2. Paste the text below wherever the tool keeps standing instructions
   — usually called system prompt, instructions, or persona.
3. Save it so it applies to every run rather than a single message.

Did it work for you?

Where it came from

and Related Rights in the Work and the meaning and intended legal