Astro + Tailwind Starter

Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Astro + Tailwind Starter</title>
<style>
  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
    background: #0a0a0f;
    color: #e2e8f0;
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem 1rem;
  }

  .card {
    max-width: 640px;
    width: 100%;
    background: linear-gradient(135deg, rgba(34,211,238,0.04), rgba(59,130,246,0.04));
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #22d3ee, #3b82f6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
    flex-shrink: 0;
  }

  .header h1 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #f1f5f9;
  }

  .header p {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-top: 2px;
  }

  h2 {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #22d3ee;
    margin-bottom: 0.5rem;
  }

  .cli-block {
    background: #111118;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: 0.82rem;
    line-height: 1.7;
    color: #cbd5e1;
    overflow-x: auto;
  }

  .cli-block .prompt { color: #22d3ee; }
  .cli-block .flag { color: #a78bfa; }
  .cli-block .comment { color: #475569; }
  .cli-block .step { color: #64748b; font-size: 0.72rem; }

  .tree {
    background: #111118;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: 0.78rem;
    line-height: 1.65;
    color: #94a3b8;
  }

  .tree .dir { color: #3b82f6; }
  .tree .file { color: #cbd5e1; }
  .tree .config { color: #a78bfa; }

  .key-files {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .key-file {
    display: flex;
    gap: 0.6rem;
    align-items: baseline;
    font-size: 0.82rem;
  }

  .key-file code {
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: 0.78rem;
    background: rgba(59,130,246,0.12);
    color: #60a5fa;
    padding: 2px 7px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .key-file span {
    color: #94a3b8;
  }

  .extend-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }

  .extend-item {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
  }

  .extend-item strong {
    font-size: 0.8rem;
    color: #f1f5f9;
    display: block;
    margin-bottom: 2px;
  }

  .extend-item span {
    font-size: 0.72rem;
    color: #64748b;
  }

  .links {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding-top: 0.25rem;
    border-top: 1px solid rgba(255,255,255,0.06);
  }

  .links a {
    font-size: 0.78rem;
    color: #22d3ee;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: color 0.2s;
  }

  .links a:hover { color: #67e8f9; }
  .links a::before { content: '->'; font-family: monospace; font-size: 0.7rem; }
</style>
</head>
<body>
  <div class="card">
    <div class="header">
      <div class="icon">A</div>
      <div>
        <h1>Astro + Tailwind</h1>
        <p>Zero-JS SSG with island architecture &amp; content collections</p>
      </div>
    </div>

    <section>
      <h2>Quick Start</h2>
      <div class="cli-block">
        <span class="step"># Step 1: Scaffold project</span><br/>
        <span class="prompt">$</span> npm create astro@latest my-site<br/>
        <span class="prompt">$</span> cd my-site<br/><br/>
        <span class="step"># Step 2: Add Tailwind integration</span><br/>
        <span class="prompt">$</span> npx astro add tailwind<br/><br/>
        <span class="prompt">$</span> npm run dev <span class="comment"># http://localhost:4321</span>
      </div>
    </section>

    <section>
      <h2>Project Structure</h2>
      <div class="tree">
        <span class="dir">my-site/</span><br/>
        ├── <span class="dir">public/</span><br/>
        │   └── <span class="file">favicon.svg</span><br/>
        ├── <span class="dir">src/</span><br/>
        │   ├── <span class="dir">components/</span><br/>
        │   │   └── <span class="file">Card.astro</span><br/>
        │   ├── <span class="dir">content/</span><br/>
        │   │   └── <span class="config">config.ts</span><br/>
        │   ├── <span class="dir">layouts/</span><br/>
        │   │   └── <span class="file">Layout.astro</span><br/>
        │   └── <span class="dir">pages/</span><br/>
        │       └── <span class="file">index.astro</span><br/>
        ├── <span class="config">astro.config.mjs</span><br/>
        ├── <span class="config">tailwind.config.mjs</span><br/>
        ├── <span class="config">tsconfig.json</span><br/>
        └── <span class="file">package.json</span>
      </div>
    </section>

    <section>
      <h2>Key Files</h2>
      <div class="key-files">
        <div class="key-file">
          <code>astro.config.mjs</code>
          <span>Integrations, output mode, adapters, Vite config</span>
        </div>
        <div class="key-file">
          <code>content/config.ts</code>
          <span>Collection schemas with Zod, auto-generates types</span>
        </div>
        <div class="key-file">
          <code>Layout.astro</code>
          <span>Base HTML shell with &lt;slot /&gt; for page content</span>
        </div>
        <div class="key-file">
          <code>pages/index.astro</code>
          <span>File-based routing, renders to static HTML</span>
        </div>
      </div>
    </section>

    <section>
      <h2>Extend With</h2>
      <div class="extend-grid">
        <div class="extend-item">
          <strong>React / Vue / Svelte</strong>
          <span>Interactive UI islands</span>
        </div>
        <div class="extend-item">
          <strong>MDX</strong>
          <span>Markdown with components</span>
        </div>
        <div class="extend-item">
          <strong>Starlight</strong>
          <span>Documentation theme</span>
        </div>
        <div class="extend-item">
          <strong>View Transitions</strong>
          <span>Smooth page navigation</span>
        </div>
      </div>
    </section>

    <div class="links">
      <a href="https://docs.astro.build/">Astro Docs</a>
      <a href="https://tailwindcss.com/docs">Tailwind Docs</a>
      <a href="https://github.com/onwidget/astrowind">AstroWind (5.5k+)</a>
    </div>
  </div>
</body>
</html>

Astro ships zero JavaScript by default and lets you bring your favorite UI framework as interactive islands. Combined with Tailwind CSS and content collections, it’s the ideal stack for content-driven sites.

Quick Start

npm create astro@latest my-site
cd my-site
npx astro add tailwind
npm run dev

The create astro CLI offers templates (minimal, blog, starlight). The astro add command auto-installs and configures integrations.

What You Get

Zero JS by default — Static HTML output, no client runtime unless you opt in
Island Architecture — Hydrate only the interactive components you need (client:load, client:visible, etc.)
Content Collections — Type-safe Markdown/MDX with schema validation via Zod
Tailwind CSS — Configured via @astrojs/tailwind integration
TypeScript — First-class support with strict mode
SSG + SSR — Static generation by default, with optional server rendering per route
View Transitions — Built-in page transition API

Generated Project Structure

my-site/
├── public/
│   └── favicon.svg
├── src/
│   ├── components/
│   │   └── Card.astro
│   ├── content/
│   │   └── config.ts
│   ├── layouts/
│   │   └── Layout.astro
│   └── pages/
│       └── index.astro
├── astro.config.mjs
├── package.json
├── tailwind.config.mjs
└── tsconfig.json

Key Files

astro.config.mjs — Integrations (Tailwind, React, MDX), output mode, adapters, and Vite overrides.
src/content/config.ts — Define content collection schemas with Zod. Astro auto-generates types for your content.
src/layouts/Layout.astro — Base HTML shell with <slot /> for page content.
src/pages/index.astro — File-based routing. .astro files render to static HTML at build time.

Extend With

Tool	Purpose
React / Vue / Svelte	Interactive islands with your preferred framework
MDX	Markdown with components for rich content
Starlight	Full-featured documentation theme
Astro DB	Built-in SQL database for content
View Transitions	Smooth page transitions without a SPA

References

Astro Documentation — Complete guide to Astro features, integrations, and deployment
onwidget/astrowind (5.5k+ stars) — Community template with Tailwind, MDX, blog, and landing page patterns