Shopify Horizon Theme: What It's Actually Built From, and the 100KB Ceiling Nobody Mentions

Shopify Horizon theme ships with no build step, no package.json, and no bundler.¹² Its CSS lives mostly inside Liquid files, not in the assets folder. The widely quoted "100KB CSS limit" is a Theme Check lint rule called AssetSizeCSS, defaulting to 100,000 bytes, and it is switched off for themes.¹² The number that actually binds your CSS is different: 256 KB per Liquid file, a documented platform limit almost nobody talks about.⁸

That rule cannot see 91.9 percent of Horizon's own CSS, because it only reaches files sitting in assets/.¹¹² This post measures Horizon directly: what is in the repository, what Theme Check checks, and where the real ceiling sits.

The short version

• Horizon ships with zero build tooling: no package.json, no bundler config, no lockfile, no src/ or dist/ directory anywhere in the repository.¹²
• The "100KB CSS limit" is Theme Check's AssetSizeCSS rule, a default threshold of 100,000 bytes per file. It is disabled by default for themes and only runs if you add it to a config yourself.¹²¹⁰
• AssetSizeCSS can only see CSS reachable through a stylesheet link or the asset_url filter, not CSS inside Liquid's stylesheet or style tags, where most of Horizon's CSS lives.¹¹⁰
• Horizon's total authored CSS is 612,203 bytes across every location it can appear. Only 8.1 percent sits in assets/, where the 100KB rule can reach it. Dawn keeps 88.6 percent of its CSS in assets/, fully visible to the same rule.¹²¹⁵
• Horizon ships 1.47 times more total CSS than Dawn. The difference is not less CSS, it is where the CSS lives.¹²¹⁵
• The limit that binds Horizon's CSS is 256 KB per Liquid file, a hard platform ceiling. Horizon's largest Liquid file is already at roughly half that number.⁸¹²
• Tailwind Labs is joining Shopify, with no terms disclosed, Hydrogen offers Tailwind as a scaffolding option, and the Horizon Liquid theme contains zero occurrences of the word Tailwind in its codebase.¹⁷¹⁸¹²
• Horizon's license is not MIT.¹³ See our breakdown of the commercial and licensing consequences for client work.

What is actually in the Shopify Horizon theme

Clone the repository and count the top level. There are exactly 11 entries: LICENSE.md, README.md, assets, blocks, config, layout, locales, release-notes.md, sections, snippets, templates. No hidden files.¹²

No package.json, no lockfile, no Tailwind, PostCSS, Vite, or Webpack configuration, no tsconfig.json, no src/ or dist/ directory. There is no build step between the repository and what Shopify serves: you edit a Liquid file, push it, and the storefront renders it.¹²

That is not a Horizon differentiator, though. Dawn has no package.json either, so a missing build step is true of both themes.¹⁵ What actually separates them is architectural: Horizon is built from theme blocks and web components in a way Dawn never was (more below).⁷

For the full folder-by-folder map, see our guide to Shopify theme structure.

Does Shopify use Tailwind CSS? The three-part answer

Part one: Tailwind Labs is joining Shopify. On September 9, 2026, Adam Wathan published "Tailwind Labs is joining Shopify" on the Tailwind Labs blog. The post uses "joining" throughout; neither party has disclosed terms or used the word "acquisition." Wathan wrote that the move gives Tailwind "a stable long-term home where it will be actively maintained for the millions of people who depend on it."¹⁷ The commercial story is covered in our piece on the Shopify and Tailwind Labs announcement; here it is context only.

Part two: Hydrogen scaffolds with Tailwind as a documented option. Hydrogen, Shopify's headless React framework, is a separate product from Liquid themes. Its CLI's interactive setup prompt defaults to Tailwind, labeled "Tailwind v4," among five styling options.¹⁸ This has been true since 2024, not something new tied to the September announcement, and it has no bearing on Liquid theme CSS.

Part three: the Horizon Liquid theme contains none of it. A case-insensitive search across the full Horizon repository for "tailwind" returns zero occurrences.¹² Same for Dawn.¹⁵ If you are building on Horizon today, Tailwind is not in it, and the September news does not change that.

The CSS budget, measured

CSS in a Shopify theme can live in four places: a discrete file in assets/, inside a stylesheet tag, inside a style tag, or in a raw HTML style tag.³⁴⁵ Most coverage only counts the first, because it is the easiest to find.

Measured at pinned commits, Horizon's total authored CSS across all four locations is 612,203 bytes, against 154 of 283 Liquid files carrying a stylesheet tag.¹² Dawn's total is 417,419 bytes, and Dawn does not use the stylesheet tag at all.¹⁵ The byte breakdown by location is in the table below.

Horizon's total is 1.47 times Dawn's. If you have seen Horizon called leaner than Dawn because its base.css is 45,165 bytes against Dawn's 81,445, that comparison measures the wrong thing: base.css is only 8.1 percent of Horizon's CSS.¹²¹⁵ Stylesheet and style tags combined, 91.9 percent of Horizon's CSS is invisible to any rule that only inspects discrete files. Dawn is close to the inverse, at 88.6 percent visible.

Location	Horizon bytes	Horizon share	Dawn bytes	Dawn share
assets/*.css	49,569	8.1%	369,985	88.6%
stylesheet tags	507,276	82.9%	0	0%
style tags	55,358	9.0%	44,197	10.6%
raw style tags	0	0%	3,237	0.8%
Total	612,203	100%	417,419	100%

Reproduction note: cloning on Windows with core.autocrlf true inflates every byte count above by roughly 4 percent. Measure with git ls-tree -r -l HEAD instead, which always reports the LF blob size.

Why utility classes fight the way Shopify compiles CSS

Shopify automatically subsets CSS from stylesheet tags so each page loads only the styles its render tree needs, rather than bundling every file's stylesheet-tag CSS into one payload. Its documentation states the rule directly: "A theme is compatible with subsetting when each file's CSS classes are used only within that file or files it directly renders."³

A utility class system inverts that by design. One shared file defines classes like .flex, .pt-4, .text-sm, and hundreds of unrelated Liquid files consume them, files that never render the one that defined the class. That is structurally the incompatible pattern, at scale.

Shopify's documented fix: move genuinely global classes, utility classes included, into a CSS file in assets/ and load it through stylesheet_tag in the layout, since "asset stylesheets aren't subject to subsetting and are always available on every page that loads them."³⁴ That is the exact route a compiled utility output file would take, and it lands the file back inside AssetSizeCSS's actual reach.

If a utility approach trips a warning under the default config, it is unlikely to be AssetSizeCSS, which never runs by default. It is more likely ValidScopedCSSClass, on by default at warning severity, which reports HTML classes not defined in any in-scope stylesheet tag or asset file, hedged: "CSS class '${className}' may be defined outside the scope of this file."¹¹

The Theme Store rules that catch a standard build output

Shopify's own tooling automatically minifies CSS files, and JavaScript written in ES5 or lower, when the storefront requests them. Theme Store submission requirements ban shipping minified .css or .js files, except for ES6 and third-party libraries, and ban Sass outright: "Themes must not use Sass, or include .scss or .scss.liquid files."⁶

These are Theme Store submission requirements specifically, not platform-wide rules. A one-off client build on Horizon is not bound by them, and for a separate reason: Horizon-derived themes cannot be submitted to the Theme Store at all (see the license section below).¹³¹⁴⁶ A Store-bound theme shipping a standard minified build will still fail review.

Shopify's file transformation docs list tailwindcss by name, alongside Autoprefixer and cssnano, as an example PostCSS transformation, framed around a local build process outside Shopify's own tooling: "You can transform files as part of a build process, and then upload your compiled code as a theme that can be accessed in the Shopify admin."⁹ Shopify neither runs Tailwind for you nor forbids it. You compile locally, and the output has to land in assets/ to be usable as a stylesheet, which puts it back under the 100,000 byte ceiling and the no-minified-CSS rule.

Web components, theme blocks, and what replaced Dawn

Horizon's front end defines 76 custom elements through customElements.define, and 81 of its 125 asset files are .js, totaling 754,781 bytes of uncompressed source, loaded through a JavaScript import map in snippets/scripts.liquid rather than one bundled script.¹² It ships 95 theme block files in blocks/, against a documented cap of 300 per theme.⁸ Dawn has no blocks/ directory and no equivalent import map.¹⁵ Treat the 754,781 byte figure as uncompressed source, not page weight, since module loading means no single page executes all 81 files.

Shopify's own architecture page still points to the Dawn repository as the example directory structure, but Dawn has no blocks/ directory, so it cannot illustrate what that page documents.⁷¹⁵ Horizon can. For the history of how sections, then theme blocks, came to define this architecture, see our piece on Online Store 2.0.

Horizon launched as Shopify's design foundation at the Summer 2025 Editions event;¹⁹ its public repository was created July 18, 2025.¹² Shopify's materials do not state a specific date it became the default theme for new stores.

The Horizon license is not MIT

Horizon ships under a custom Shopify license. GitHub reports it as NOASSERTION, meaning it matches no recognized open source license. Use is restricted to developing themes that integrate with Shopify software or services, and the license separately prohibits making any "Derived Theme" available through the Theme Store, any other Shopify channel, or any off-platform channel, including a developer's own site or a third-party marketplace. Shopify reserves sole discretion over what counts as a Derived Theme.¹³

There is a services carve-out: a developer may deliver a Horizon-based build to one merchant for that merchant's own use, but the result cannot be resold, relicensed, or redistributed by either party. Dawn's license is also custom and non-MIT, what Shopify calls "a source available reference theme,"¹⁶ but it carries no Derived Theme prohibition.

What this means for pricing a build, structuring a client contract, or deciding whether to start from Horizon at all is its own subject, covered in our comparison of Horizon against a custom theme build.

If you still want a build step, here is the honest tradeoff

None of this means you cannot run PostCSS, Tailwind, or another compiler against a Horizon-based theme. Shopify documents tailwindcss by name as a legitimate option.⁹ What it means is narrower: your compiled output has to land somewhere. Put it in assets/ and load it through stylesheet_tag, and you get a file always available on every page, immune to subsetting, and back under AssetSizeCSS's 100,000 byte scope,¹ a rule off by default but easy to turn on as a guardrail. Keep styles inside stylesheet tags instead, matched section by section, and you get subsetting's per-page savings but give up a single shared utility file, since that is the exact pattern the compatibility rule flags.

The real ceiling either way is not 100KB. It is 256 KB per Liquid file, a hard platform limit for sections, snippets, and layouts.⁸ Horizon's largest Liquid file today, snippets/icon.liquid, sits at 133,281 bytes, roughly half that limit.¹² Whether "256 KB" means 262,144 or 256,000 bytes is not specified, and whether it is rejected at upload or only documented is unconfirmed. Build with margin under it either way.

Frequently asked questions

What is Shopify Horizon theme?

Horizon is Shopify's current default theme, launched as the platform's new design foundation at the Summer 2025 Editions event.¹⁹ It is built from theme blocks and web components, ships with no build step, and its public repository was created July 18, 2025. Its current version, 4.2.0, shipped September 18, 2026.¹²

Does Shopify have a 100KB CSS limit?

Not as an enforced limit. Theme Check's AssetSizeCSS rule has a default threshold of 100,000 bytes for a single CSS file, but it is disabled by default for themes and can only see files reachable through a stylesheet link or the asset_url filter, not CSS inside Liquid's stylesheet or style tags, where most of Horizon's CSS lives.¹²¹⁰

Does Shopify use Tailwind CSS?

In three separate senses. Tailwind Labs is joining Shopify, announced September 9, 2026, with no disclosed terms and no use of the word acquisition.¹⁷ Hydrogen has offered Tailwind as a documented scaffolding option since 2024.¹⁸ The Horizon Liquid theme itself contains zero occurrences of the word Tailwind, and neither does Dawn.¹²¹⁵

Is the Shopify Horizon theme free?

Horizon is one of the free themes Shopify makes available to every store. It ships under a custom, non-MIT license, so it's free but not open source, and that license restricts what you can build with it and where you can distribute a derived version.¹³

Can I customize the Shopify Horizon theme?

Yes, within the license's terms. You can edit and extend a Horizon-based theme for a merchant's own store, including as part of a client engagement. You cannot turn a Horizon-derived theme into a resellable product or submit anything built from it to the Shopify Theme Store.¹³⁶

What replaced the Dawn theme on Shopify?

Dawn has not been deprecated or retired. It remains actively maintained, with version 16.0.0 shipping August 10, 2026.¹⁵ Horizon launched afterward and is now the default assigned to new stores, but Shopify has not published a specific date for that switch.

Figures checked on 21 September 2026.