11tea

11tea is an open-source Eleventy starter boilerplate that combines Tailwind CSS 2.1 and Alpine.js 2.8 to build lightweight static websites. It provides a pre-configured project architecture with Nunjucks templating, SEO meta handling, sitemap generation, image processing, and HTML/CSS minification, so you can start creating a site immediately without configuring a build pipeline.

What is 11tea?

11tea is a minimal GitHub-hosted starter project created by halfmage. It gives you a simple folder structure and npm scripts that turn Nunjucks templates into a static website with minified HTML and CSS, a generated sitemap.xml, and optimized images. The starter is designed to be cloned and customized, with everything wired together so you can focus on content and styling.

What makes 11tea stand out?

• TEA stack — Combines Eleventy for site generation, Tailwind CSS 2.1 for utility-first CSS, and Alpine.js 2.8 for lightweight interactivity, eliminating the need for a separate JavaScript bundler like Webpack.
• Nunjucks templating — HTML output is powered by Nunjucks, the templating engine supported natively by Eleventy.
• SEO ready — Ships with a meta.html partial for centralized metadata and a sitemap.xml generator to help search engines index the site.
• Image processing — Integrates @11ty/eleventy-img to resize and optimize images at build time.
• Minification — HTML and CSS are minified with html-minifier as part of the build pipeline.
• Easy font replacement — A dedicated fonts folder lets you drop in your own font files and update the CSS quickly.
• Favicon-friendly — Favicon file names match the output of Real Favicon Generator, so you can replace the default icons with your own generated set.
• Simple workflow — Only four commands are needed to go from clone to a running site: git clone, npm install, npm run build, and npm run start.

Who should use 11tea?

11tea is for developers who want a no-configuration starting point for an Eleventy site. It suits freelancers and agencies building small marketing sites or landing pages, as well as developers who want to learn how Eleventy, Tailwind, and Alpine.js fit together. If you're comfortable editing Nunjucks templates and running npm commands, this starter gives you everything pre-wired.

What can you do with 11tea?

• Build a marketing site — Use Tailwind's utility classes to style a landing page and add Alpine.js components like mobile menus or modals for interactivity.
• Prototype a static website — Clone the repo, modify the Nunjucks layout, and have a deployable static site in hours.
• Learn the TEA stack — Study a minimal, real-world configuration of Eleventy, Tailwind CSS, and Alpine.js without the complexity of a larger framework.

How does 11tea work?

After cloning the repository, you run npm install to load dependencies. Then npm run build generates the Tailwind CSS into a temporary folder for the first time, and npm run start launches a watcher that rebuilds the site whenever you change templates or styles. The project structure keeps Nunjucks templates separate from the generated output, and the build process is controlled by a simple set of npm scripts.

FAQ

Is 11tea free?

Yes, the repository is public on GitHub, so you can clone it and use it freely as a starting point for your own projects.

What is the TEA stack?

TEA stands for Tailwind, Eleventy, and Alpine.js. These three technologies form the foundation of this starter, giving you a static site generator, a utility-first CSS framework, and a lightweight JavaScript library for interactivity.

Which versions of Tailwind and Alpine does it use?

The README specifies Tailwind CSS 2.1 and Alpine.js 2.8. These are the versions the starter was designed around.

Does 11tea include a CMS?

No. This starter is static-only; you manage content through Nunjucks templates and Eleventy data files. It does not include any headless CMS integration.