Skip to content
announcement

Free Astro 7 Starter Template With Tailwind CSS 4 (and Where SolidJS Fits)

March 03, 2026 Updated September 17, 2026 By Alex Crabinsky
Free Astro 7 Starter Template With Tailwind CSS 4 (and Where SolidJS Fits)

The Amrify Starter is a free Astro 7 template for business websites that have to be fast on a phone. It is also the exact foundation Amrify Pro is built on, so anything you configure in the Starter carries straight over if you move up later.

The public repo opens with the product launch; once it is live, it is clone and go. Join the founding list to get the link the moment it opens.

Updated September 2026. An earlier version of this post described a smaller one-site starter with SolidJS islands and a looser license. The Starter that is actually shipping is different and better, so this post now describes the real thing: a small monorepo with no JavaScript framework at all, free for unlimited sites. SolidJS lives in Pro, where the interactive widgets need it.

What’s in the Starter

Core stack:

  • Astro 7, fully static output
  • Tailwind CSS 4 with CSS-first configuration
  • TypeScript throughout, strict
  • No React, Vue, Svelte or SolidJS. No client-side framework or router.

A complete site, not a blank page:

  • Home, services, service detail, about, blog with tags, contact, thank-you, privacy and an honest 404
  • Two demo sites in the box that share every line of code and look like different studios built them
  • Six design switches (header, hero, services, steps, call-to-action, corner radius), so two sites on the same code look nothing alike
  • A site is one validated site.json, a folder of markdown, and those switches. There is no page code to maintain.

Everything a site is expected to have:

  • JSON-LD structured data: Organization (or a more specific business type), WebSite, Service, Article, FAQPage, BreadcrumbList
  • A generated favicon, app icons, and a social card for every page
  • Sitemap, robots.txt, RSS, web manifest and llms.txt
  • A contact form that works on static hosting (Formspree, Basin or your own endpoint) with a honeypot field
  • Google Analytics 4, Tag Manager or Microsoft Clarity, injected only when you set an ID

Developer experience:

  • pnpm workspace with Turborepo: websites/* for sites, packages/* for the shared design system
  • pnpm new-site copies a demo into a new site and rewires its URL
  • A catalog app that renders every component variant from the real shared code
  • CLAUDE.md and AGENTS.md, so Claude Code, Cursor or Copilot know which files to touch and in what order. Zod schemas catch their mistakes at build time with readable errors.
  • Unit tests, astro check, and a Lighthouse gate in CI

Why There Is No JavaScript Framework

Most Astro templates reach for React the moment something needs to move. For a brochure site that is a tax with no return: the visitor downloads a runtime to open a menu.

The Starter gets its interactivity from the platform instead:

  • Mobile menu: the Popover API. No script.
  • FAQ accordion: <details> and <summary>. No script.
  • Scroll reveals: CSS only.
  • Page transitions: native cross-document view transitions, pure CSS.
  • Instant navigation: speculation rules prerender the next page on hover.
  • Dark mode: CSS light-dark() color tokens follow the visitor’s system setting with no JavaScript. If you switch on the optional toggle, the page gains one inline line of script to restore the saved choice, and nothing else.

That is how every page of both demo sites scores 100 in all four Lighthouse categories, and why CI fails the build if one slips.

So Where Does SolidJS Fit?

In Pro. An estimate calculator, a multi-step quote wizard, a reviews carousel and a before-and-after slider are small applications, and hand-rolling them in vanilla JavaScript is how sites get slow and buggy. Amrify Pro ships them as SolidJS islands, mounted per widget, so a roofing homepage with no calculator on it never downloads calculator code.

Two reasons SolidJS won over React for the islands:

1. No virtual DOM runtime. SolidJS compiles to direct DOM operations, so an island ships its own logic and very little else.

2. Familiar syntax. If you know React, you can read SolidJS. The JSX is nearly identical. The main difference is signals instead of useState: components run once and fine-grained reactivity handles the updates.

// A SolidJS island - looks like React, ships far less
import { createSignal } from "solid-js";

export function Counter() {
  const [count, setCount] = createSignal(0);
  return (
    <button onClick={() => setCount(c => c + 1)}>
      Count: {count()}
    </button>
  );
}

Why Tailwind CSS 4

Tailwind CSS 4 moved configuration into CSS. You define design tokens where they belong:

@theme {
  --color-primary: #6366f1;
  --color-secondary: #4f46e5;
  --font-sans: "Inter", sans-serif;
}

There is no tailwind.config.mjs to maintain, it plugs into Astro through the Vite plugin, and the new engine emits less CSS. In the Starter you rarely touch even this: brand colors live in site.json, and the shared design system turns them into tokens, the favicon and the social cards.

Project Structure

my-sites/
├── websites/
│   ├── website1/        # demo: light, blue, centered layouts
│   └── website2/        # demo: dark, warm red, split hero, timeline
│       ├── src/config/site.json   # business data, nav, colors, switches
│       ├── src/content/           # services, posts, FAQs, page copy
│       └── astro.config.mjs       # your domain and font
├── packages/
│   ├── config/          # site.json + content schemas (Zod)
│   ├── astro-preset/    # createAstroConfig(), injects every route
│   ├── layouts/         # routes, JSON-LD, generated images
│   ├── ui/              # components + icons
│   └── styles/          # the design system CSS
├── catalog/             # every variant, rendered from the real components
├── deploy/              # Netlify, Vercel and Cloudflare Pages configs
└── docs/

A site folder holds config and content and no .astro files. Fix a bug or add a section once in packages/ and every site gets it on the next build.

Getting Started

At launch, getting started looks like this (the public repo opens with the product launch - join the founding list to get the link the moment it is live):

git clone https://github.com/amrify/starter.git my-sites
cd my-sites && pnpm install
pnpm --filter website1 dev

You need Node 22.12 or newer and pnpm 10. Open the URL the CLI prints and pick the demo closer to your taste, or make a third with pnpm new-site my-site --from website2 --url https://my-site.com.

Then either hand your business details to an AI editor in one message and review the diff like a pull request, or edit src/config/site.json and the markdown in src/content/ by hand. Before you ship:

pnpm test                        # unit tests
pnpm --filter website1 build     # static output in websites/website1/dist/
pnpm --filter website1 check     # zero type errors
pnpm lighthouse website1         # expects 100s

Deploy configs for Netlify, Vercel and Cloudflare Pages are included, each with security headers and long-lived caching for hashed assets.

The License, in Plain Words

The Starter is free to use, copy and modify for yourself or your clients, commercial sites included, with no limit on the number of sites. The “Built with Amrify” footer credit is on by default and you may remove it.

The one thing you may not do is redistribute or sell the Starter itself as a template, theme, boilerplate or starter kit. Deploying a site you built with it is not redistribution. The final license text ships with the public repo.

Upgrading When You’re Ready

The Starter stays free. When you need more, there is exactly one upgrade. The short version: free gets you the site, Pro gets you the leads.

Amrify Pro ($249 one-time founding price for the first 5,000 members, then $399) adds:

  • Ten trade templates at launch, with future trades included
  • The lead engine: a serverless form API that stores every lead and alerts you by email, Telegram, SMS or webhook, with spam filtering in front of it
  • The local SEO engine: service-area and service-in-city pages, with a build gate that fails thin pages and an audit that catches near-duplicates
  • Conversion widgets as SolidJS islands: estimate calculator, quote wizard, reviews carousel, before-and-after gallery
  • Optional customer accounts
  • Fleet tooling: a cross-site verifier and AWS S3 + CloudFront deploys
  • Claude Code skills that configure a site and write its content
  • Lifetime updates

Pro is built on this exact Starter, so your configuration carries forward. No rewriting and no migration.

While You Wait for the Repo

The Starter opens at launch, but the measuring stick is available today. Run your current site through the free Website Grader (Google’s own test, no email, about thirty seconds), then keep it on a watch list in the free Website Monitor and re-test whenever you ship a change. Four 100s is the bar every page of the Starter has to clear in CI; now you know how far your site is from it.

Tags: announcement
Share:

Ready to build your next agency site?

Start with the free tools today and the free Starter at launch, or own Amrify Pro - every niche template in one purchase.

Get Amrify Docs