(true);
useEffect(() => {
fetch('https://api.example.com/posts')
.then((res) => res.json())
.then((data: Post[]) => setPosts(data))
.finally(() => setLoading(false));
}, []);
if (loading) return Loading...
;
return (
{posts.map((post) => (
{post.title}
))}
);
}
```
### Using Tauri APIs
```tsx
'use client';
import { invoke } from '@tauri-apps/api/core';
import { Button } from '@/components/ui/button';
import { useState } from 'react';
export default function TauriDemo() {
const [result, setResult] = useState('');
const handleClick = async (): Promise => {
try {
const message = await invoke('greet', { name: 'World' });
setResult(message);
} catch (error) {
console.error('Tauri command failed:', error);
}
};
return (
{result &&
{result}
}
);
}
```
## Dark Mode
Dark mode is configured but NOT automatically implemented. To add:
### Option 1: Simple useState Toggle
```tsx
'use client';
import { useEffect, useState } from 'react';
import { Button } from '@/components/ui/button';
import { Moon, Sun } from 'lucide-react';
export function ThemeToggle() {
const [dark, setDark] = useState(false);
useEffect(() => {
document.documentElement.classList.toggle('dark', dark);
}, [dark]);
return (
);
}
```
### Option 2: next-themes Package (Recommended)
```bash
npm install next-themes
```
See `TauriNextShadcn.md` for full implementation.
## Troubleshooting Guide
### Tailwind Styles Not Applying
**Symptoms:**
- Components render as unstyled HTML
- No visual styling from Tailwind classes
**Common Causes & Solutions:**
1. **Configs in wrong location**
```bash
# Check files exist in src-next/
ls src-next/tailwind.config.cjs
ls src-next/postcss.config.cjs
```
2. **Wrong file extension**
- Must be `.cjs` (CommonJS)
- NOT `.js` or `.mjs`
3. **Missing Tailwind directives**
```css
/* src-next/app/globals.css must have: */
@tailwind base;
@tailwind components;
@tailwind utilities;
```
4. **Cache issues**
```bash
rm -rf src-next/.next
npm run dev:next
```
### Component Import Errors
**Error:** `Cannot find module '@/components/ui/button'`
**Solutions:**
1. Verify file exists: `src-next/components/ui/button.tsx`
2. Check tsconfig.json has path aliases
3. Restart TypeScript server in VS Code
4. Check import statement uses exact filename
### Tailwind v4 Accidentally Installed
**Symptoms:**
- Config using `@import "tailwindcss"` in CSS
- Different config syntax errors
**Solution:**
```bash
npm uninstall tailwindcss
npm install -D tailwindcss@^3.4.18
```
### shadcn CLI Errors
**Error:** "Couldn't find tsconfig.json"
**Solution:** Don't use the CLI. Install components manually (see section above).
## Build Process
### Development
```bash
# Web only (fast iteration)
npm run dev:next
# Desktop app
npm run dev
```
### Production
```bash
# Build desktop app (includes Next.js build)
npm run build
# Or just Next.js static export
npm run build:next
```
**Output:** `src-next/out/` contains:
- `index.html`
- `_next/static/` (compiled CSS, JS)
- All routes as HTML files
## Best Practices for AI Assistants
1. **Always check config locations** before making changes
2. **Use `.cjs` extension** for Tailwind/PostCSS configs
3. **Install components manually** - don't suggest using shadcn CLI
4. **Check Tailwind version** - must be v3, never v4
5. **Use explicit TypeScript types** - follow strict mode
6. **Add `'use client'`** to interactive components
7. **Use `@/` path aliases** for imports
8. **Use `cn()` utility** for conditional classes
9. **Test in both web and desktop** modes when possible
## Summary Checklist for AI Assistants
When working on this codebase, remember:
- [ ] Configs in `src-next/`, not root
- [ ] Configs use `.cjs` extension
- [ ] Tailwind CSS v3 (NOT v4)
- [ ] shadcn CLI doesn't work - manual install only
- [ ] Static export mode (CSR only, no SSR)
- [ ] TypeScript strict mode enforced
- [ ] Use `@/` path aliases
- [ ] Use `cn()` for class merging
- [ ] Dark mode requires manual implementation
**When uncertain:** Refer to `SETUP.md` or `TauriNextShadcn.md` for detailed guidance.