SvelteKit Tailwind CSS Best Practices: Essential Coding Rules for High-Performance Web Apps

Follow these numbered best practices for building efficient SvelteKit apps with Tailwind CSS:

1. **Adhere to standard project organization**: Structure your project with src/lib for utilities, src/routes for pages and APIs, app.html, static assets, svelte.config.js, and vite.config.js to ensure scalability and maintainability.

2. **Develop reusable components**: Craft .svelte files emphasizing composition, pass data via props, and manage state with reactive statements or stores for clean, modular code.

3. **Implement file-based routing**: Place pages in src/routes/, use [slug] for dynamic paths, fetch data in load functions for server-side rendering, and handle errors via +error.svelte.

4. **Optimize rendering strategies**: Enable SSR for interactive content and SSG via prerender for static pages; select adapter-auto for versatile deployments.

5. **Style efficiently with Tailwind**: Install via svelte-add, apply utility classes directly in markup (e.g., sm:, md: prefixes for responsiveness), extend themes in tailwind.config.cjs, and skip @apply for better purging.

6. **Prioritize performance**: Rely on SSR/SSG to reduce client JS, apply dynamic imports for code splitting, add transitions/animations sparingly, and lazy-load images/assets.

7. **Handle data fetching server-side**: Use load functions with error boundaries; access page data through $app/stores.

8. **Enhance SEO**: Inject meta tags and canonical links with Svelte:head; build reusable components for site-wide consistency.

9. **Manage state effectively**: Employ writable stores for app-wide data, context API for component trees, and handle subscriptions properly.

10. **Process forms progressively**: Leverage form actions for server handling, add client validation reactively, and support no-JS submissions.

11. **Build API endpoints**: Define them in src/routes/api/, format responses consistently, and apply hooks for middleware.

12. **Secure authentication**: Use hooks for session checks, HTTP-only cookies, and CSRF tokens on forms/APIs.

13. **Test comprehensively**: Run unit/integration tests with Vitest, E2E with Playwright/Cypress, and mock SvelteKit features.

14. **Ensure accessibility**: Use semantic HTML, ARIA roles, keyboard-friendly interactions, and bind:this for focus control.

15. **Incorporate TypeScript and conventions**: Enable TS for type safety, log errors thoroughly, support i18n via built-ins, and optimize assets; audit with Lighthouse targeting Core Web Vitals.