--- title: "Template Astro Daisy | Production Starter Boilerplate" description: "A production-ready starter template pairing Astro 7.3, daisyUI 5, Tailwind CSS v4, and OKLCH theming with strict ESLint 10 standards." year: 2024 role: "Creator & Maintainer" category: "open-source" tags: ["astro", "daisyui", "tailwindcss", "typescript", "eslint", "open-source"] canonicalUrl: "https://sahillangoo.in/projects/template-astro-daisy/" --- # Template Astro Daisy | Production Starter Boilerplate > A production-ready starter template pairing Astro 7.3, daisyUI 5, Tailwind CSS v4, and OKLCH theming with strict ESLint 10 standards. - **Role**: Creator & Maintainer - **Year**: 2024 - **Category**: open-source - **Tech Stack**: astro, daisyui, tailwindcss, typescript, eslint, open-source - **Live Platform**: https://github.com/sahillangoo/template-astro-daisy - **Source Code**: https://github.com/sahillangoo/template-astro-daisy ## The Challenge When bootstrapping new content-driven websites with modern UI libraries, developers frequently encounter friction points: 1. **Tooling Fragmentation**: Setting up Tailwind CSS v4 alongside daisyUI 5, ESLint 10 flat configs, Prettier Astro plugins, and strict TypeScript compiler settings requires dozens of delicate configuration files. 2. **Theme Jumps & Flash of Unstyled Content (FOUC)**: Naive client-side theme toggles cause noticeable white screen flashes on dark-mode page refreshes. 3. **Inconsistent Component Standards**: Absence of semantic UI patterns leads to duplicated inline utility classes and poor maintainability across pages. --- ## Architectural Solutions & Features ``` [Astro 7.3 SSG Core] ──> [Tailwind CSS v4 @ Vite] ──> [daisyUI 5 Semantic Tokens] │ ┌─────────────────┴─────────────────┐ ▼ ▼ [OKLCH Theme Controller] [ESLint 10 Strict Flat Config] (Zero FOUC Inline Script) (astro-eslint-parser + typescript-eslint) ``` ### 1. Astro 7.3 + daisyUI 5 Semantic Design Tokens Engineered an opinionated design architecture utilizing **daisyUI 5** component primitives styled with OKLCH color spaces. Provides curated dark (`editorialDark`) and light (`editorialLight`) themes mapped to semantic CSS custom properties. ### 2. Zero-FOUC Theme Controller Implemented an inline theme initialization script that executes synchronously inside `` before the DOM renders: - Reads the user's stored preference from `localStorage` or queries `prefers-color-scheme`. - Injects the appropriate `data-theme` attribute immediately, completely eliminating dark-mode screen flashes. ### 3. ESLint 10 Flat Configuration & Prettier Pipeline Pre-configured with modern **ESLint 10 Flat Config** (`eslint.config.mjs`) featuring: - `astro-eslint-parser` for strict Astro component syntax validation. - `typescript-eslint` enforcing strict null checks and type safety. - `prettier-plugin-astro` formatting code automatically on save. ### 4. Zero Layout Shift Navigation & Shell Includes responsive navigation layouts with sticky headers, mobile drawer menus, and accessible command palettes maintaining a perfect **CLS = 0.00** score across all viewport sizes.