Astro Tina Starter

Astro 6.1.7 + Tina CMS starter template with Tailwind CSS 4.x

Tech Stack

• Framework: Astro 6.1.7 (static mode)
• CMS: Tina CMS (self-hosted)
• Styling: Tailwind CSS 4.x with @tailwindcss/vite
• Language: TypeScript

Features

• Self-hosted Tina CMS with schema-based content
• Tailwind CSS 4.x using @tailwindcss/vite plugin
• ConsentOS + Tracking Scripts (GA4, Facebook Pixel, etc.)
• Docker-ready with nginx
• Thai language support foundation

Quick Start

# Install dependencies
npm install

# Start development (accessible at http://0.0.0.0:4321)
npm run dev

# Build for production
npm run build

Tina CMS Access

During development, access Tina CMS at:

• http://localhost:4321/admin

For production, you'll need a TINA_TOKEN environment variable.

ConsentOS + Tracking

This template includes ConsentOS (consent.moreminimore.com) for PDPA-compliant consent management and auto-blocking of tracking scripts.

Environment Variables

# ConsentOS
PUBLIC_CONSENT_SITE_ID=your-site-id
PUBLIC_CONSENT_API_BASE=https://consent.moreminimore.com

# Analytics
PUBLIC_GA4_ID=G-XXXXXXXXXX
PUBLIC_GTM_ID=GTM-XXXXXXX
PUBLIC_UMAMI_URL=https://umami.example.com
PUBLIC_UMAMI_WEBSITE_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
PUBLIC_CLARITY_ID=xxxxxxxxxx

# Marketing
PUBLIC_FB_PIXEL_ID=123456789
PUBLIC_GOOGLE_ADS_ID=AW-123456789
PUBLIC_TIKTOK_PIXEL_ID=XXXXXXXX
PUBLIC_LINE_CHANNEL_ID=1234567890

How It Works

1. TrackingScripts.astro contains all tracking codes with data-consent-category attributes
2. ConsentOS consent-loader.js scans and auto-blocks scripts until user consent
3. Categories: analytics, marketing

Project Structure

astro-tina-starter/
├── .tina/
│   ├── config.ts       # Tina CMS configuration
│   └── schema.ts       # Content schema definitions
├── src/
│   ├── styles/
│   │   └── global.css  # Tailwind v4 styles
│   ├── layouts/
│   │   └── Layout.astro
│   ├── pages/
│   │   └── index.astro
│   ├── components/
│   │   ├── Header.astro
│   │   └── TrackingScripts.astro  # Tracking scripts
│   └── content/
│       └── config.ts   # Tina content collections
├── Dockerfile
├── nginx.conf
└── package.json

Tailwind CSS 4.x

This template uses Tailwind CSS 4.x with the @tailwindcss/vite plugin. The configuration is done via CSS @theme block in src/styles/global.css.

@import "tailwindcss";

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

Docker

# Build
docker build -t astro-tina .

# Run
docker run -p 8080:80 astro-tina

License

MIT