├── .npmrc
├── src
    ├── lib
    │   └── index.ts
    ├── routes
    │   ├── +layout.svelte
    │   ├── page.svelte.test.ts
    │   └── +page.svelte
    ├── demo.spec.ts
    ├── app.d.ts
    ├── app.html
    └── app.css
├── postcss.config.js
├── vitest-setup-client.ts
├── .prettierignore
├── tailwind.config.js
├── .gitignore
├── .prettierrc
├── tsconfig.json
├── svelte.config.js
├── vite.config.ts
├── README.md
├── eslint.config.js
├── package.json
├── static
    └── favicon.svg
└── AGENTS.md


/.npmrc:
--------------------------------------------------------------------------------
1 | engine-strict=true
2 | 


--------------------------------------------------------------------------------
/src/lib/index.ts:
--------------------------------------------------------------------------------
1 | // place files you want to import through the `$lib` alias in this folder.
2 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 | 	plugins: {
3 | 		tailwindcss: {},
4 | 		autoprefixer: {}
5 | 	}
6 | };
7 | 


--------------------------------------------------------------------------------
/vitest-setup-client.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="@vitest/browser/matchers" />
2 | /// <reference types="@vitest/browser/providers/playwright" />
3 | 


--------------------------------------------------------------------------------
/src/routes/+layout.svelte:
--------------------------------------------------------------------------------
1 | <script lang="ts">
2 | 	import '../app.css';
3 | 	
4 | 	let { children } = $props();
5 | </script>
6 | 
7 | {@render children()}
8 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
 1 | # Package Managers
 2 | package-lock.json
 3 | pnpm-lock.yaml
 4 | yarn.lock
 5 | bun.lock
 6 | bun.lockb
 7 | 
 8 | # Miscellaneous
 9 | /static/
10 | 


--------------------------------------------------------------------------------
/src/demo.spec.ts:
--------------------------------------------------------------------------------
1 | import { describe, it, expect } from 'vitest';
2 | 
3 | describe('sum test', () => {
4 | 	it('adds 1 + 2 to equal 3', () => {
5 | 		expect(1 + 2).toBe(3);
6 | 	});
7 | });
8 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | export default {
3 | 	content: ['./src/**/*.{html,js,svelte,ts}'],
4 | 	theme: {
5 | 		extend: {}
6 | 	},
7 | 	plugins: []
8 | };
9 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | 
 3 | # Output
 4 | .output
 5 | .vercel
 6 | .netlify
 7 | .wrangler
 8 | /.svelte-kit
 9 | /build
10 | 
11 | # OS
12 | .DS_Store
13 | Thumbs.db
14 | 
15 | # Env
16 | .env
17 | .env.*
18 | !.env.example
19 | !.env.test
20 | 
21 | # Vite
22 | vite.config.js.timestamp-*
23 | vite.config.ts.timestamp-*
24 | 


--------------------------------------------------------------------------------
/src/app.d.ts:
--------------------------------------------------------------------------------
 1 | // See https://svelte.dev/docs/kit/types#app.d.ts
 2 | // for information about these interfaces
 3 | declare global {
 4 | 	namespace App {
 5 | 		// interface Error {}
 6 | 		// interface Locals {}
 7 | 		// interface PageData {}
 8 | 		// interface PageState {}
 9 | 		// interface Platform {}
10 | 	}
11 | }
12 | 
13 | export {};
14 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"useTabs": true,
 3 | 	"singleQuote": true,
 4 | 	"trailingComma": "none",
 5 | 	"printWidth": 100,
 6 | 	"plugins": [
 7 | 		"prettier-plugin-svelte",
 8 | 		"prettier-plugin-tailwindcss"
 9 | 	],
10 | 	"overrides": [
11 | 		{
12 | 			"files": "*.svelte",
13 | 			"options": {
14 | 				"parser": "svelte"
15 | 			}
16 | 		}
17 | 	],
18 | 	"tailwindStylesheet": "./src/app.css"
19 | }
20 | 


--------------------------------------------------------------------------------
/src/app.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="utf-8" />
 5 | 		<link rel="icon" href="%sveltekit.assets%/favicon.svg" />
 6 | 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 7 | 		%sveltekit.head%
 8 | 	</head>
 9 | 	<body data-sveltekit-preload-data="hover">
10 | 		<div style="display: contents">%sveltekit.body%</div>
11 | 		<div class="footer">This change should be visible</div>
12 | 	</body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/src/routes/page.svelte.test.ts:
--------------------------------------------------------------------------------
 1 | import { page } from '@vitest/browser/context';
 2 | import { describe, expect, it } from 'vitest';
 3 | import { render } from 'vitest-browser-svelte';
 4 | import Page from './+page.svelte';
 5 | 
 6 | describe('/+page.svelte', () => {
 7 | 	it('should render h1', async () => {
 8 | 		render(Page);
 9 | 		
10 | 		const heading = page.getByRole('heading', { level: 1 });
11 | 		await expect.element(heading).toBeInTheDocument();
12 | 	});
13 | });
14 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"extends": "./.svelte-kit/tsconfig.json",
 3 | 	"compilerOptions": {
 4 | 		"allowJs": true,
 5 | 		"checkJs": true,
 6 | 		"esModuleInterop": true,
 7 | 		"forceConsistentCasingInFileNames": true,
 8 | 		"resolveJsonModule": true,
 9 | 		"skipLibCheck": true,
10 | 		"sourceMap": true,
11 | 		"strict": true,
12 | 		"moduleResolution": "bundler"
13 | 	}
14 | 	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
15 | 	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
16 | 	//
17 | 	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
18 | 	// from the referenced tsconfig.json - TypeScript does not merge them in
19 | }
20 | 


--------------------------------------------------------------------------------
/svelte.config.js:
--------------------------------------------------------------------------------
 1 | import adapter from '@sveltejs/adapter-auto';
 2 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 3 | 
 4 | /** @type {import('@sveltejs/kit').Config} */
 5 | const config = {
 6 | 	// Consult https://svelte.dev/docs/kit/integrations
 7 | 	// for more information about preprocessors
 8 | 	preprocess: vitePreprocess(),
 9 | 
10 | 	kit: {
11 | 		// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
12 | 		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
13 | 		// See https://svelte.dev/docs/kit/adapters for more information about adapters.
14 | 		adapter: adapter()
15 | 	}
16 | };
17 | 
18 | export default config;
19 | 


--------------------------------------------------------------------------------
/src/app.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | #root {
 6 | 	max-width: 1280px;
 7 | 	margin: 0 auto;
 8 | 	padding: 2rem;
 9 | 	text-align: center;
10 | }
11 | 
12 | .logo {
13 | 	height: 6em;
14 | 	padding: 1.5em;
15 | 	will-change: filter;
16 | 	transition: filter 300ms;
17 | }
18 | .logo:hover {
19 | 	filter: drop-shadow(0 0 2em #646cffaa);
20 | }
21 | .logo.react:hover {
22 | 	filter: drop-shadow(0 0 2em #61dafbaa);
23 | }
24 | 
25 | @keyframes logo-spin {
26 | 	from {
27 | 		transform: rotate(0deg);
28 | 	}
29 | 	to {
30 | 		transform: rotate(360deg);
31 | 	}
32 | }
33 | 
34 | @media (prefers-reduced-motion: no-preference) {
35 | 	a:nth-of-type(2) .logo {
36 | 		animation: logo-spin infinite 20s linear;
37 | 	}
38 | }
39 | 
40 | .card {
41 | 	padding: 2em;
42 | }
43 | 
44 | .read-the-docs {
45 | 	color: #888;
46 | }
47 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { sveltekit } from '@sveltejs/kit/vite';
 2 | import { defineConfig } from 'vite';
 3 | 
 4 | export default defineConfig({
 5 | 	plugins: [sveltekit()],
 6 | 	test: {
 7 | 		projects: [
 8 | 			{
 9 | 				extends: './vite.config.ts',
10 | 				test: {
11 | 					name: 'client',
12 | 					environment: 'browser',
13 | 					browser: {
14 | 						enabled: true,
15 | 						provider: 'playwright',
16 | 						instances: [{ browser: 'chromium' }]
17 | 					},
18 | 					include: ['src/**/*.svelte.{test,spec}.{js,ts}'],
19 | 					exclude: ['src/lib/server/**'],
20 | 					setupFiles: ['./vitest-setup-client.ts']
21 | 				}
22 | 			},
23 | 			{
24 | 				extends: './vite.config.ts',
25 | 				test: {
26 | 					name: 'server',
27 | 					environment: 'node',
28 | 					include: ['src/**/*.{test,spec}.{js,ts}'],
29 | 					exclude: ['src/**/*.svelte.{test,spec}.{js,ts}']
30 | 				}
31 | 			}
32 | 		]
33 | 	}
34 | });
35 | 


--------------------------------------------------------------------------------
/src/routes/+page.svelte:
--------------------------------------------------------------------------------
 1 | <div
 2 | 	class="flex min-h-screen items-center justify-center bg-gradient-to-br from-slate-100 to-slate-200"
 3 | >
 4 | 	<div class="text-center">
 5 | 		<!-- TODO: replace everything here with the actual app! -->
 6 | 		<h1 class="flex items-center justify-center gap-3 text-2xl font-semibold text-slate-800">
 7 | 			<svg class="h-8 w-8 animate-spin text-slate-400" viewBox="0 0 50 50">
 8 | 				<circle
 9 | 					class="opacity-30"
10 | 					cx="25"
11 | 					cy="25"
12 | 					r="20"
13 | 					stroke="currentColor"
14 | 					stroke-width="5"
15 | 					fill="none"
16 | 				/>
17 | 				<circle
18 | 					class="text-slate-600"
19 | 					cx="25"
20 | 					cy="25"
21 | 					r="20"
22 | 					stroke="currentColor"
23 | 					stroke-width="5"
24 | 					fill="none"
25 | 					stroke-dasharray="100"
26 | 					stroke-dashoffset="75"
27 | 				/>
28 | 			</svg>
29 | 			Generating your app...
30 | 		</h1>
31 | 	</div>
32 | </div>
33 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # sv
 2 | 
 3 | Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
 4 | 
 5 | ## Creating a project
 6 | 
 7 | If you're seeing this, you've probably already done this step. Congrats!
 8 | 
 9 | ```sh
10 | # create a new project in the current directory
11 | npx sv create
12 | 
13 | # create a new project in my-app
14 | npx sv create my-app
15 | ```
16 | 
17 | ## Developing
18 | 
19 | Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
20 | 
21 | ```sh
22 | npm run dev
23 | 
24 | # or start the server and open the app in a new browser tab
25 | npm run dev -- --open
26 | ```
27 | 
28 | ## Building
29 | 
30 | To create a production version of your app:
31 | 
32 | ```sh
33 | npm run build
34 | ```
35 | 
36 | You can preview the production build with `npm run preview`.
37 | 
38 | > To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
39 | 


--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
 1 | import prettier from 'eslint-config-prettier';
 2 | import { includeIgnoreFile } from '@eslint/compat';
 3 | import js from '@eslint/js';
 4 | import svelte from 'eslint-plugin-svelte';
 5 | import globals from 'globals';
 6 | import { fileURLToPath } from 'node:url';
 7 | import ts from 'typescript-eslint';
 8 | import svelteConfig from './svelte.config.js';
 9 | 
10 | const gitignorePath = fileURLToPath(new URL('./.gitignore', import.meta.url));
11 | 
12 | export default ts.config(
13 | 	includeIgnoreFile(gitignorePath),
14 | 	js.configs.recommended,
15 | 	...ts.configs.recommended,
16 | 	...svelte.configs.recommended,
17 | 	prettier,
18 | 	...svelte.configs.prettier,
19 | 	{
20 | 		languageOptions: {
21 | 			globals: { ...globals.browser, ...globals.node }
22 | 		},
23 | 		rules: { // typescript-eslint strongly recommend that you do not use the no-undef lint rule on TypeScript projects.
24 | 		// see: https://typescript-eslint.io/troubleshooting/faqs/eslint/#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors
25 | 		"no-undef": 'off' }
26 | 	},
27 | 	{
28 | 		files: [
29 | 			'**/*.svelte',
30 | 			'**/*.svelte.ts',
31 | 			'**/*.svelte.js'
32 | 		],
33 | 		languageOptions: {
34 | 			parserOptions: {
35 | 				projectService: true,
36 | 				extraFileExtensions: ['.svelte'],
37 | 				parser: ts.parser,
38 | 				svelteConfig
39 | 			}
40 | 		}
41 | 	}
42 | );
43 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "fusion-svelte-vite-starter",
 3 | 	"private": true,
 4 | 	"version": "0.0.1",
 5 | 	"type": "module",
 6 | 	"scripts": {
 7 | 		"dev": "vite dev",
 8 | 		"build": "vite build",
 9 | 		"preview": "vite preview",
10 | 		"prepare": "svelte-kit sync || echo ''",
11 | 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
12 | 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
13 | 		"format": "prettier --write .",
14 | 		"lint": "prettier --check . && eslint .",
15 | 		"test:unit": "vitest",
16 | 		"test": "npm run test:unit -- --run"
17 | 	},
18 | 	"devDependencies": {
19 | 		"@eslint/compat": "^1.2.5",
20 | 		"@eslint/js": "^9.18.0",
21 | 		"@sveltejs/adapter-auto": "^6.0.0",
22 | 		"@sveltejs/kit": "^2.22.0",
23 | 		"@sveltejs/vite-plugin-svelte": "^6.0.0",
24 | 		"@vitest/browser": "^3.2.3",
25 | 		"eslint": "^9.18.0",
26 | 		"eslint-config-prettier": "^10.0.1",
27 | 		"eslint-plugin-svelte": "^3.0.0",
28 | 		"globals": "^16.0.0",
29 | 		"playwright": "^1.53.0",
30 | 		"prettier": "^3.4.2",
31 | 		"prettier-plugin-svelte": "^3.3.3",
32 | 		"prettier-plugin-tailwindcss": "^0.6.11",
33 | 		"svelte": "^5.0.0",
34 | 		"svelte-check": "^4.0.0",
35 | 		"tailwindcss": "^3.4.11",
36 | 		"autoprefixer": "^10.4.16",
37 | 		"typescript": "^5.0.0",
38 | 		"typescript-eslint": "^8.20.0",
39 | 		"vite": "^7.0.4",
40 | 		"vitest": "^3.2.3",
41 | 		"vitest-browser-svelte": "^0.1.0"
42 | 	}
43 | }
44 | 


--------------------------------------------------------------------------------
/static/favicon.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>


--------------------------------------------------------------------------------
/AGENTS.md:
--------------------------------------------------------------------------------
  1 | # Fusion SvelteKit Tailwind Starter
  2 | 
  3 | A production-ready SvelteKit application template with TypeScript, TailwindCSS 3, and modern tooling.
  4 | 
  5 | ## Tech Stack
  6 | 
  7 | - **Frontend**: SvelteKit 2 + Svelte 5 + TypeScript + TailwindCSS 3.4.11
  8 | - **Styling**: TailwindCSS 3 with PostCSS + Autoprefixer
  9 | - **Testing**: Vitest with Playwright for browser testing
 10 | - **Build Tool**: Vite 7 with SvelteKit
 11 | - **Package Manager**: npm
 12 | - **Linting**: ESLint 9 + Prettier
 13 | - **Type Checking**: TypeScript 5 + svelte-check
 14 | 
 15 | ## Project Structure
 16 | 
 17 | ```
 18 | src/                     # SvelteKit application source
 19 | ├── app.html             # Main app template
 20 | ├── app.css              # Global styles with TailwindCSS imports
 21 | ├── app.d.ts             # TypeScript declarations
 22 | ├── routes/              # SvelteKit file-based routing
 23 | │   ├── +layout.svelte   # Root layout component
 24 | │   └── +page.svelte     # Home page component
 25 | ├── lib/                 # Shared components and utilities
 26 | └── demo.spec.ts         # Example test file
 27 | 
 28 | static/                  # Static assets
 29 | ├── favicon.svg          # Site favicon
 30 | └── ...                  # Other static files
 31 | ```
 32 | 
 33 | ## Key Features
 34 | 
 35 | ### SvelteKit File-Based Routing
 36 | 
 37 | The application uses SvelteKit's modern file-based routing system:
 38 | 
 39 | - `+page.svelte` files define page components
 40 | - `+layout.svelte` files define layout components
 41 | - Automatic route generation based on file structure
 42 | - Server-side rendering (SSR) and static site generation (SSG) support
 43 | 
 44 | ### Styling System
 45 | 
 46 | - **Primary**: TailwindCSS 3.4.11 utility classes
 47 | - **PostCSS**: Autoprefixer for cross-browser compatibility
 48 | - **Configuration**: `tailwind.config.js` for custom theming
 49 | 
 50 | ```svelte
 51 | <!-- Example of TailwindCSS usage in Svelte components -->
 52 | <script>
 53 | 	// Component logic here
 54 | </script>
 55 | 
 56 | <div
 57 | 	class="flex min-h-screen items-center justify-center bg-gradient-to-br from-slate-100 to-slate-200"
 58 | >
 59 | 	<div class="text-center">
 60 | 		<h1 class="text-2xl font-semibold text-slate-800">Welcome to Fusion</h1>
 61 | 	</div>
 62 | </div>
 63 | ```
 64 | 
 65 | ### Development Commands
 66 | 
 67 | ```bash
 68 | npm run dev          # Start development server
 69 | npm run build        # Production build
 70 | npm run preview      # Preview production build
 71 | npm run check        # Type check with svelte-check
 72 | npm run test         # Run tests with Vitest
 73 | npm run lint         # Lint with ESLint and Prettier
 74 | ```
 75 | 
 76 | ## Adding Features
 77 | 
 78 | ### New Pages
 79 | 
 80 | 1. Create page in `src/routes/`:
 81 | 
 82 | ```svelte
 83 | <!-- src/routes/about/+page.svelte -->
 84 | <script>
 85 | 	// Page logic here
 86 | </script>
 87 | 
 88 | <div class="container mx-auto px-4 py-8">
 89 | 	<h1 class="text-3xl font-bold text-gray-900">About Us</h1>
 90 | 	<p class="mt-4 text-gray-600">This is the about page.</p>
 91 | </div>
 92 | ```
 93 | 
 94 | 2. Access via `/about` route automatically
 95 | 
 96 | ### New Components
 97 | 
 98 | 1. Create component in `src/lib/components/`:
 99 | 
100 | ```svelte
101 | <!-- src/lib/components/MyComponent.svelte -->
102 | <script>
103 | 	export let title = 'Default Title';
104 | 	export let description = 'Default description';
105 | </script>
106 | 
107 | <div class="rounded-lg bg-white p-4 shadow">
108 | 	<h2 class="text-xl font-bold text-gray-900">{title}</h2>
109 | 	<p class="text-gray-600">{description}</p>
110 | </div>
111 | ```
112 | 
113 | 2. Import in your pages:
114 | 
115 | ```svelte
116 | <script>
117 | 	import MyComponent from '$lib/components/MyComponent.svelte';
118 | </script>
119 | 
120 | <MyComponent title="Custom Title" description="Custom description" />
121 | ```
122 | 
123 | ### Custom TailwindCSS Configuration
124 | 
125 | 1. Update `tailwind.config.js` for custom theming:
126 | 
127 | ```javascript
128 | /** @type {import('tailwindcss').Config} */
129 | export default {
130 | 	content: ['./src/**/*.{html,js,svelte,ts}'],
131 | 	theme: {
132 | 		extend: {
133 | 			colors: {
134 | 				primary: '#3b82f6',
135 | 				secondary: '#64748b'
136 | 			}
137 | 		}
138 | 	},
139 | 	plugins: []
140 | };
141 | ```
142 | 
143 | 2. Add custom styles in `src/app.css`:
144 | 
145 | ```css
146 | @tailwind base;
147 | @tailwind components;
148 | @tailwind utilities;
149 | 
150 | @layer components {
151 | 	.btn-primary {
152 | 		@apply rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700;
153 | 	}
154 | }
155 | ```
156 | 
157 | ## Testing
158 | 
159 | The project includes comprehensive testing setup:
160 | 
161 | - **Unit Testing**: Vitest for fast unit tests
162 | - **Browser Testing**: Playwright for browser-based testing
163 | - **Type Checking**: svelte-check for TypeScript validation
164 | 
165 | ```bash
166 | npm run test         # Run all tests
167 | npm run test:unit    # Run unit tests only
168 | ```
169 | 
170 | ## Production Deployment
171 | 
172 | - **Development**: `npm run dev` for local development
173 | - **Build**: `npm run build` creates optimized production build
174 | - **Preview**: `npm run preview` to preview production build
175 | - **Type Check**: `npm run check` for TypeScript validation
176 | 
177 | ## Architecture Notes
178 | 
179 | - SvelteKit 2 with Svelte 5 for modern reactive components
180 | - TypeScript throughout the application
181 | - TailwindCSS 3.4.11 for utility-first styling
182 | - Vite 7 for fast development and optimized builds
183 | - Vitest + Playwright for comprehensive testing
184 | - ESLint + Prettier for code quality
185 | - File-based routing with automatic route generation
186 | - Server-side rendering (SSR) and static site generation (SSG) support
187 | 


--------------------------------------------------------------------------------