Gatsby Emotion Tailwind Starter

Gatsby Emotion Tailwind Starter is a Gatsby v2 static-site template that combines Emotion and Tailwind CSS through twin.macro, shipping with PWA, offline support, lazy-loaded images, sitemap generation, and dark mode out of the box.

What is Gatsby Emotion Tailwind Starter?

Gatsby Emotion Tailwind Starter is a free, open-source starting point for building static websites with Gatsby v2, Emotion, and Tailwind CSS. It takes a standard Gatsby project structure and pre-configures these libraries so you can write styled components with Emotion while using Tailwind utility classes. The output is a production-ready static site that can be deployed to any static host, with a demo hosted on Netlify and a one-click Netlify deploy button included. The template is authored by Chris Williams, as seen in the GitHub repository URL, and is inspired by the official gatsby-starter-blog.

Key Features

• Gatsby v2 static generation — the template uses Gatsby v2 to generate a fast, static site with React under the hood.
• Emotion CSS-in-JS — Emotion is configured for writing styled components directly in JavaScript files.
• Tailwind CSS utilities — Tailwind is available for utility-first styling, and the template uses twin.macro to combine Tailwind classes with Emotion styled components.
• Offline support and PWA — the site works offline and can be installed as a progressive web app.
• Lazy loading images with webp support — images are optimized and lazy-loaded for performance.
• Auto-generated sitemap — a sitemap is produced automatically for search engine indexing.
• Dark mode variant — Tailwind's dark mode variant is enabled for toggling between light and dark themes manually.
• SEO component and favicon — includes an SEO component taken from gatsby-starter-blog and auto-generates a favicon from a 512x512 icon via gatsby-plugin-manifest.

Who is it for?

• Static site developers — developers who want a pre-configured Gatsby setup with Emotion and Tailwind without spending time on boilerplate configuration.
• Bloggers — since it's inspired by gatsby-starter-blog, it suits creating personal blogs or content sites.
• Netlify users — the one-click deploy button makes it easy for Netlify users to launch a new site.

What can you do with it?

• Launch a personal blog — use the blog-style layout and SEO component to publish articles with fast static delivery.
• Create a landing page — the default layout and Tailwind utilities let you quickly style a marketing or portfolio page.
• Build a PWA — the built-in PWA and offline support let you deliver an installable web app.

How does it work?

The template is set up as a standard Git repository. You clone it (or download the zip), install dependencies with npm or yarn, then run the development command to start a local server with hot reload. For production, you run the build command to generate static files in the public folder. Deployment can be manual or via the included Netlify deploy button, which connects the repository to Netlify for continuous deployment.

Pros and cons

Pros:

• Pre-configured tooling for Emotion and Tailwind.
• Includes PWA, offline support, lazy-loaded images, sitemap, and dark mode.
• One-click Netlify deployment.

Cons:

• Template is no longer maintained.
• Uses Gatsby v2, an older major version.

FAQ

Is Gatsby Emotion Tailwind Starter free?

Yes, the template is open-source and free to use. It is hosted on GitHub under the repository chrismwilliams/gatsby-emotion-tailwind-starter.

Is the template still maintained?

No. The README explicitly states that the template is no longer maintained, so you may need to handle updates yourself or consider newer alternatives.

What does twin.macro do in this template?

twin.macro is a library that lets you use Tailwind utility classes inside Emotion styled components. It processes the classes at build time, so you can combine the power of CSS-in-JS with Tailwind's utility-first approach.