YATAS

YATAS (Yet Another Tailwind Alpine Starter) is a minimal Eleventy (11ty) v2 starter project that builds CSS with the Tailwind CSS v3 CLI and JavaScript with esbuild, and pairs the static site generator with Alpine.js v3 for lightweight interactivity.

What is YATAS?

YATAS is a bare-bones starter template for building static websites with the Eleventy static site generator. It takes markdown content, HTML templates, Tailwind CSS source files, and JavaScript modules as input, and outputs a minified production-ready site. The project is maintained by GitHub user yhaefliger and is deployed as a live demo at yatas.netlify.app.

The stack is intentionally small: Eleventy v2 for templating and content collections, Tailwind CSS v3 compiled via its standalone CLI, and Alpine.js v3 for sprinkling interactivity into HTML. No React, Vue, or other heavy frameworks are used. The build pipeline is orchestrated with npm scripts: npm install, npm run start for local development, and npm run build for a minified production build.

What makes YATAS stand out?

• Asset versioning with content hashing — A built-in Node script looks at the built CSS and JS files, computes an MD5 hash, and renames the files like styles.734a7607648afdb.css instead of styles.css. This ensures browsers fetch fresh files when content changes, avoiding stale caches.
• Global hash data object — The mapping from original asset path to versioned path is written to an 11ty global data file at _data/hash.json. Templates can retrieve the versioned path using a simple lookup expression, for example with the url filter.
• esbuild for JavaScript — Instead of a heavier bundler, YATAS uses esbuild, a Go-based bundler known for extremely fast builds, to bundle and minify JavaScript.
• One-click Netlify deployment — The repository includes a Deploy to Netlify button that imports the repo and sets up continuous deployment on Netlify for you.
• Minimal project structure — The starter keeps dependencies low and configuration files to a minimum: just Eleventy, Tailwind's CLI, esbuild, and Alpine.js are required.
• Customizable asset list — The hash.js script in the root directory has an assets array listing /css/styles.css and /js/scripts.js by default. You can add more paths to include them in the versioned output.

Who should use YATAS?

• Front-end developers who want a clean, no-frills starting point for an Eleventy site with Tailwind styling and a bit of Alpine.js interactivity, without learning a complex build system.
• Designers prototyping a marketing site — you can write pages in markdown and style them on the fly with Tailwind utility classes, then add Alpine.js components for mobile navs or toggles.
• JAMstack enthusiasts looking for a lightweight alternative to React-based static sites; YATAS produces plain HTML with minimal JavaScript.
• Netlify users who want a zero-config deployment path; the starter is pre-configured for Netlify and can be launched in one click.

What can you do with YATAS?

• Launch a static company site: Use the markdown-based content workflow to add pages, style them with Tailwind, and add Alpine.js for an interactive FAQ section or a navigation menu.
• Create a blog or documentation hub: Eleventy's content collections can turn markdown files into a full blog or docs section, while the hashed assets guarantee visitors always get the latest styles.
• Prototype an interactive component: Use the esbuild-bundled JavaScript and Alpine.js to quickly test UI behaviors like modals, dropdowns, and dynamic counters.
• Learn the Eleventy + Tailwind + Alpine stack: Because the starter is minimal and well-documented, it serves as a practical learning tool for understanding how these three tools fit together.

How does YATAS work?

After cloning the repository, run npm install and then npm run start to launch a local development server with live reload. During a production build, npm run build runs the asset versioning script, which hashes the built CSS and JS files, writes the mapping to _data/hash.json, and then generates the final site to the output directory. Templates use the global hash data to reference the versioned asset paths.

Pros and cons

• Pros: minimal footprint, fast builds with esbuild, built-in cache-busting asset hashes, one-click Netlify deploy, and simple npm scripts.
• Cons: it is intentionally bare — there are no pre-built page layouts or components included, so you build those yourself. The versions are pinned to Eleventy v2, Tailwind v3, and Alpine.js v3.

Pricing

YATAS is free and open-source. No purchase, subscription, or license fee is required; you can clone the repository and use it for any project. The only potential cost is the Netlify hosting plan you choose when deploying.

FAQ

Is YATAS free?

Yes, YATAS is an open-source starter on GitHub. There is no charge to use it in personal or commercial projects.

What does YATAS stand for?

It stands for "Yet Another Tailwind Alpine Starter" — a playful name indicating it is another starter in the long line of "Yet Another [stack] Starter" projects.

Does YATAS use a frontend framework?

It does not use a full framework like React or Vue. It uses Alpine.js v3, a minimal JavaScript library that adds interactive behavior to HTML attributes, which keeps the site fast and lightweight.

How do I deploy YATAS to Netlify?

Use the "Deploy to Netlify" button from the GitHub page. It will set up a new Netlify project, clone the repo, and configure the build command (npm run build) and publish directory for you automatically.

Can I add more assets to the versioning?

Yes. Open hash.js in the root directory and append additional paths to the assets array. By default it includes /css/styles.css and /js/scripts.js.