// 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 TypeScript's strict mode",
"Utilize @apply directive in CSS files for reusable styles",
"Implement responsive design using Tailwind's responsive classes",
"Use Tailwind's CSS in /src/styles.css for global styles",
"Implement dark mode using Tailwind's dark variant",
];

// Additional instructions

const additionalInstructions = `

1. Use .tsx extension for files with JSX
2. Implement strict TypeScript checks
3. Implement proper Tailwind CSS purging for production builds
4. Utilize TanStack Router for routing when applicable
5. Use type-safe context with createContext
6. Implement proper typing for event handlers
7. Follow TypeScript best practices and naming conventions
8. Use type assertions sparingly and only when necessary
9. Use Tailwind's @layer directive for custom styles
10. Implement utility-first CSS approach
11. Follow both Solid.js and Tailwind naming conventions
12. Use JIT (Just-In-Time) mode for faster development
    `;
We use Sentry for watching for errors in our deployed application, as well as for instrumentation of our application.

## Error collection

Error collection is automatic and configured in `src/router.tsx`.

## Instrumentation

We want our server functions intstrumented. So if you see a function name like `createServerFn`, you can instrument it with Sentry. You'll need to import `Sentry`:

```tsx
import * as Sentry from '@sentry/browser'
```

And then wrap the implementation of the server function with `Sentry.startSpan`, liks so:

```tsx
Sentry.startSpan({ name: 'Requesting all the pokemon' }, async () => {
  // Some lengthy operation here
  await fetch('https://api.pokemon.com/data/')
})
```