Gatsby Tailwind Emotion Starter

Gatsby Tailwind Emotion Starter is a Gatsby.js boilerplate that combines Tailwind CSS utility classes with Emotion CSS-in-JS, letting React components load only the styles they actually use.

What is Gatsby Tailwind Emotion Starter?

Gatsby Tailwind Emotion Starter is a starter project created by muhajirdev that scaffolds a new Gatsby site with Tailwind CSS and Emotion preconfigured. Input: a GitHub repository URL passed to gatsby new. Output: a working Gatsby project where you can write React components styled with Emotion's styled and Tailwind utility classes via the tw template literal tag. The starter is based on the author's own gatsby-plugin-tailwindcss, and it runs entirely on Gatsby's static site generation framework.

Key Features

• Tailwind CSS integration — Use Tailwind's utility-first classes directly inside Emotion components by calling the tw tag within a styled template string.
• Emotion CSS-in-JS — Styles are colocated with components; Emotion includes only the utilities you use so the final CSS file stays small.
• Gatsby-powered — Built on Gatsby, giving you React-based static generation, automatic code splitting, and access to hundreds of plugins.
• One-command setup — Scaffold a new site with gatsby new my-new-website https://github.com/muhajirdev/gatsby-tailwind-emotion-starter; no extra config files to write.
• Simple scripts — npm run develop starts a live-reload dev server; npm run build generates a production-ready static site in /public.
• Companion projects — The author also maintains react-tailwind-emotion-starter for create-react-app and a VS Code snippets extension for Tailwind styled components.

Who is it for?

• Gatsby developers who want to combine Tailwind's design tokens with Emotion's component-scoped styles.
• React developers who prefer CSS-in-JS and want to evaluate utility-first CSS without committing to a full CSS framework like Bootstrap.
• Static site builders who need Gatsby's plugin ecosystem (e.g., for SEO, images, data) and want a minimal styling setup.

What can you do with it?

• Scaffold a blog or marketing site instantly, then style every component with Tailwind utilities inside Emotion.
• Create themed design systems by mapping Tailwind's default palette to Emotion theme variables, keeping all styles in JavaScript.
• Deploy a static site by running npm run build and hosting the generated public folder on any static host.

How does it work?

Use the Gatsby CLI to pull the starter: install the CLI with npm install --global gatsby-cli, run gatsby new with the repository URL, then cd into the project. npm run develop starts the local dev server, and npm run build compiles the site to /public.

FAQ

Is this starter free?

Yes, it is open source on GitHub and you can use it freely, including for commercial projects.

How do I apply Tailwind classes to a component?

Create an Emotion component with styled.div (or another tag) and include the tw tag inside the template string. The starter wires the tw tag to parse Tailwind utilities at build time.

Why use Emotion instead of plain Tailwind?

Plain Tailwind ships a large CSS file (roughly 1.5 times bigger than Bootstrap), and the official docs recommend purging unused classes. Emotion solves this by automatically bundling only the utilities that appear in your components.