Gatsby Astroturf Tailwind

A Gatsby starter that combines Astroturf scoped CSS-in-JS with Tailwind utility classes, wired for zero-config GitHub Pages deployment.

This Gatsby starter answers a specific question: what if you could write scoped, colocated CSS using real CSS syntax — not template literals — while still having the full Tailwind utility library at your fingertips? That’s exactly what Astroturf enables, and this starter wires it all together with sensible defaults so you can start building instead of configuring.

The template extends gatsby-starter-default with a working Astroturf + Tailwind CSS setup, a Prettier configuration, VSCode workspace settings tuned for the stack, and a GitHub Actions workflow that auto-deploys to GitHub Pages on push. Everything a developer needs to go from gatsby new to a live, styled site in minutes.

It’s aimed at React developers who like the ergonomics of CSS Modules and styled components but want to stay close to real CSS, and who don’t want to choose between that approach and Tailwind’s utility-first efficiency. The two tools complement each other well, and this starter makes that combination immediately usable.