# Astro Tina Starter - Agent Knowledge Base

**Generated:** 2026-04-17  
**Version:** 1.0.0  
**Type:** Astro 6 + Tina CMS Starter Template

---

## OVERVIEW

Starter template for building websites with Astro 6, Tina CMS, and Tailwind CSS 4.x.

### Tech Stack

| Component | Technology | Version |
|-----------|------------|---------|
| Framework | Astro | 6.1.7 |
| CMS | Tina CMS | 2.x |
| Styling | Tailwind CSS | 4.x |
| Database | Astro DB | 0.14.x |
| State | Nano Stores | 0.11.x |

### Key Features

- Self-hosted Tina CMS with schema-based content
- Tailwind CSS 4.x using `@tailwindcss/vite` plugin
- Astro DB for consent logging (PDPA compliant)
- Thai language support with Noto Sans Thai
- Docker-ready deployment

---

## PROJECT STRUCTURE

```
astro-tina-starter/
├── .tina/
│   ├── config.ts       # Tina CMS configuration
│   └── schema.ts       # Content schema definitions
├── db/
│   ├── config.ts       # Astro DB schema
│   └── seed.ts         # Database seed script
├── src/
│   ├── styles/
│   │   └── global.css  # Tailwind v4 styles + @theme
│   ├── layouts/
│   │   └── Layout.astro
│   ├── pages/
│   │   └── index.astro
│   ├── components/
│   │   └── Header.astro
│   └── content/
│       ├── config.ts   # Astro content collections
│       ├── posts/       # Blog posts (MDX)
│       ├── pages/       # Static pages (MDX)
│       └── settings/    # Site settings (JSON)
├── public/
│   └── favicon.svg
├── Dockerfile
├── astro.config.mjs
├── tsconfig.json
└── package.json
```

---

## IMPORTANT CONVENTIONS

### Tailwind CSS 4.x Setup

**CRITICAL:** This template uses `@tailwindcss/vite` plugin, NOT `@astrojs/tailwind`.

```javascript
// astro.config.mjs
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  vite: {
    plugins: [tailwindcss()],
  },
})
```

```css
/* src/styles/global.css */
@import "tailwindcss";

@theme {
  --color-primary: #1a1a1a;
  --color-accent: #3b82f6;
}
```

### Tina CMS Content

Tina CMS manages content in `src/content/`:
- `posts/` - Blog posts (MDX format)
- `pages/` - Static pages (MDX format)
- `settings/` - Site settings (JSON format)

Schema defined in `.tina/schema.ts`.

### Astro DB Schema

Consent log table for PDPA compliance in `db/config.ts`.

---

## CREDENTIALS

No external API credentials required for this template.

### Optional Environment Variables

| Variable | Description |
|----------|-------------|
| `TINA_TOKEN` | Tina CMS production authentication |
| `TINA_CLIENT_ID` | Tina CMS client ID |
| `DATABASE_URL` | Custom database connection (optional) |

---

## COMMANDS

```bash
# Install dependencies
npm install

# Development
npm run dev          # Full dev (Tina + Astro)
npm run dev:astro    # Astro only
npm run dev:tina     # Tina CMS only

# Build
npm run build        # Production build
npm run preview      # Preview production build

# Database
npm run db:push      # Push schema to database
npm run db:seed      # Seed database
```

---

## PDPA COMPLIANCE

Template includes consent logging via Astro DB:

```typescript
// db/config.ts
export const ConsentLog = defineTable({
  columns: {
    action: text(),
    purpose: text(),
    analytics: boolean(),
    marketing: boolean(),
    functional: boolean(),
    userAgent: text(),
    ip: text(),
    timestamp: text(),
  },
})
```

---

## ANTI-PATTERNS

- **NEVER** use `@astrojs/tailwind` (deprecated)
- **ALWAYS** use `@tailwindcss/vite` for Tailwind v4
- **NEVER** commit environment files (.env)

---

## DEPLOYMENT

### Docker

```bash
docker build -t astro-tina-starter .
docker run -p 8080:80 astro-tina-starter
```

### Manual

```bash
npm install
npm run build
# Serve dist/ folder with any static server
```

---

## NOTES

- Tina CMS admin: http://localhost:4321/admin
- Astro default port: 4321
- Tina dev server: 3001