PHPackages genaker/theme-frontend-tailwind-luna - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. genaker/theme-frontend-tailwind-luna ActiveMagento2-theme[Utility & Helpers](/categories/utility) genaker/theme-frontend-tailwind-luna ==================================== Tailwind Luna — Genaker frontend child theme of Magento Luma (Composer-installable) 1.0.7(1mo ago)15252[1 issues](https://github.com/Genaker/Tailwind-Luna/issues)[1 PRs](https://github.com/Genaker/Tailwind-Luna/pulls)OSL-3.0HTMLPHP ~8.2.0||~8.3.0||~8.4.0CI failing Since Apr 21Pushed 1mo ago1 watchersCompare [ Source](https://github.com/Genaker/Tailwind-Luna)[ Packagist](https://packagist.org/packages/genaker/theme-frontend-tailwind-luna)[ Docs](https://github.com/Genaker/Tailwind-Luna)[ RSS](/packages/genaker-theme-frontend-tailwind-luna/feed)WikiDiscussions main Synced 1w ago READMEChangelog (8)Dependencies (2)Versions (7)Used By (0) Tailwind Luna ============= [](#tailwind-luna) [![LUMA powered by Tilewind CSS](docs/tilewind-luma-banner.png)](docs/tilewind-luma-banner.png) Composer-installable **Magento 2** theme: **`Genaker/tailwind_luna`** (`genaker/theme-frontend-tailwind-luna`), child of **`Magento/luma`**. **Source / issues:** [github.com/Genaker/Tailwind-Luna](https://github.com/Genaker/Tailwind-Luna). ### Story [](#story) **Tailwind Luna** is from the creators of [**React Luma**](https://github.com/Genaker/Luma-React-PWA-Magento-Theme) — a storefront theme built around speed. This project is the **Tailwind** take on **Magento Luma**: same **Open Source** foundation and **child-of-Luma** inheritance, **no Hyvä**, **no Alpine.js**, and **no magento compliance issue OSL 3.0 license with preservied magento copiryght** on top of Magento — just **Tailwind CSS** (plus small legacy CSS like `checkout.css` adn some native styles) on top of Magento’s own templates and **Knockout / RequireJS** where the core still relies on them. You can also disable Adobe JS by using React Luma module and use it with any JS. The goal is **Luma-level comaptability** with a **much leaner CSS payload** and a fast path to a modern utility-first stylesheet — performance you can measure on *your* stack (hosting, FPC, and deploy all matter). Sample **mobile** Lighthouse screenshots (**Tailwind Luna** vs **Hyvä**) are in **[Lighthouse: sample PDP](#lighthouse-tailwind-luna-vs-hyva-sample)** below (scores vary by hosting, CDN, and cache). ### Install Tailwind Luma Theme For Existing Magento Installation: [](#install-tailwind-luma-theme-for-existing-magento-installation) If you already have Magento 2.4.x running with demo data or not: ``` # 1. Install Tailwind Luna theme via Composer composer require genaker/theme-frontend-tailwind-luna --ignore-platform-reqs # 2. Enable the theme module bin/magento module:enable Genaker_ThemeTailwindLuna # 3. Run setup upgrade to register the theme bin/magento setup:upgrade --no-interaction # 4. Set as default theme (choose one method) **First, find the Tailwind Luna theme ID:** ```bash # List all available themes and their IDs bin/magento theme:list ``` **Example output:** ``` Themes: Magento/blank - ID: 2 Magento/luma - ID: 1 Genaker/tailwind_luna - ID: 4 ← Use this ID ``` **Now set Tailwind Luma as default:** ``` # Method A: CLI (recommended) - replace 4 with your theme ID if different bin/magento config:set design/theme/theme_id 4 # Method B: Direct database - replace 4 with your theme ID mysql -umagento -pmagento123 magento -e \ "INSERT INTO core_config_data (scope, scope_id, path, value) VALUES ('default', 0, 'design/theme/theme_id', 4) ON DUPLICATE KEY UPDATE value=4;" # 5. Deploy static content bin/magento setup:static-content:deploy -f n_US # 6. Clear caches bin/magento cache:flush ``` ### Tailwind Luna vs Hyvä [](#tailwind-luna-vs-hyvä) Dimension**Tailwind Luna** (Luma + Tailwind)**Hyvä****Relationship to Magento Luma****Child of `Magento/luma`**: incremental CSS modernization, reuse Luma layout and behavior where it still fits.**Throws away** the classic Luma storefront theme stack — you **re-platform** the theme, not a light touch-up.**Templates****Keep** core `.phtml` patterns; migrate classes and partials **gradually** (Tailwind utilities + optional SCSS merge).**Big-bang rewrites**: new markup conventions; most of the storefront must be **re-authored** to Hyvä’s template style.**JavaScript****Knockout / RequireJS** stay where Magento core still depends on them; you can pair with **React Luma** or other strategies separately.**Alpine-first** stack **does not** map 1:1 to legacy Knockout flows — **more rework**, not a drop-in swap.**Third-party themes & extensions****Luma-compatible** extensions and layouts often work with **targeted** template work — closer to “classic” Magento expectations.**Extra spend and glue**: Hyvä-only modules, compatibility shims, and vendor-specific upgrades **pile on** cost and maintenance.**Checkout****Standard Magento checkout** path (`checkout.css` + core flow) stays familiar; you optimize CSS around it.**Stock checkout story is gone** unless you pay and integrate **Hyvä Checkout** — another product, another budget line, **drift from core Magento**.**Licensing & compliance****OSL 3.0**-friendly path: **child of Luma**, preserve Magento copyright and extension compatibility expectations as usually understood for Luma children.**Vendor lock-in**: proprietary theme + ecosystem; **ongoing fees** and **dependence** on Hyvä’s roadmap — **not** open-source Luma economics.**Magento Open Source / OSL expectations**Stays inside the **same** model as other **Luma child** themes: you ship theme code under the **Magento ecosystem rules** you already use for extensions and storefronts.**We do not treat** Hyvä’s **commercial** theme stack as meeting the **same OSL / source-distribution expectations** as working **on top of** Magento Open Source the way a normal Luma-based theme does — **not legal advice**; verify with counsel.**Proprietary vs “the Magento fork”****No** alternate “Magento”; you use **real** Magento Open Source + Luma + this theme’s CSS pipeline.**Closed commercial product**: Hyvä is sold as **proprietary** software — **not** a gratis, fully open fork of Magento. Historically, **closed** commercial storefront packages have been **sold** in this ecosystem **without** the **same obligations** as the **Magento Open Source** distribution itself; **we are not lawyers** — confirm facts for your org.**Learning curve for Magento teams****HTML/CSS + Tailwind** on top of **known** Luma structure — less “new platform” training.**Steep retraining**: Tailwind + Alpine + Hyvä rules — **wasted** if your team already knows Luma/Knockout.**Migration risk****Low blast radius**: ship utility CSS, tighten templates over time; roll back by CSS.**High blast radius**: full theme swap, template mass-rewrite, extension matrix — **hard to roll back**; slipped timelines **hurt** badly.**Build pipeline****Node** builds **Tailwind** in this theme package; **no** replacement of Magento’s PHP theme layer.**Heavy opinionation**: you **must** adopt Hyvä’s spagetti code mindset — **not** “just swap CSS.”**Vendor / stack lock-in****Magento + Luma + Tailwind** — boring, **portable** skills; swap Tailwind build or child theme without buying a storefront platform.**Trapped in the stack**: hard to **exit** Hyvä without **another** expensive migration; frontend decisions **orbit** the vendor.**Fit for Luma shops****Incremental wins**: lean CSS, same extension model, **no** mandate to replace the whole theme vendor.**All-in bet**: pay for theme, checkout story, modules — **ill-suited** if you only wanted **better CSS** on Luma. #### Lighthouse: sample PDP (Tailwind Luna vs Hyvä) [](#lighthouse-sample-pdp-tailwind-luna-vs-hyvä) Mobile emulation, **Radiant Tee** product page — same product for a like-for-like check. **Tailwind Luna** screenshots are from **our** storefront stack; **Hyvä** screenshots are from the public demo **[demo.hyva.io](https://demo.hyva.io/default/radiant-tee.html)**. **Tailwind Luna** (this theme): [![Lighthouse: Tailwind Luna — summary scores (mobile PDP sample)](docs/lighthouse-tailwind-luna-pdp-mobile-scores.png)](docs/lighthouse-tailwind-luna-pdp-mobile-scores.png) [![Lighthouse: Tailwind Luna — metrics (mobile PDP sample)](docs/lighthouse-tailwind-luna-pdp-mobile-metrics.png)](docs/lighthouse-tailwind-luna-pdp-mobile-metrics.png) **Hyvä** (official demo, same PDP URL path): [![Lighthouse: Hyvä demo — summary scores (mobile PDP sample)](docs/lighthouse-hyva-demo-pdp-mobile-scores.png)](docs/lighthouse-hyva-demo-pdp-mobile-scores.png) [![Lighthouse: Hyvä demo — metrics (mobile PDP sample)](docs/lighthouse-hyva-demo-pdp-mobile-metrics.png)](docs/lighthouse-hyva-demo-pdp-mobile-metrics.png) **How to read these runs** - **Tailwind Luna (sample):** **Performance 100** with strong paint timing in this capture (e.g. sub‑~1.5s LCP band in the metrics panel — exact numbers are on the screenshot). That lines up with the theme’s goal: **lean CSS on Luma** without a full storefront rewrite. - **Hyvä demo (sample):** **Performance 95**; **Accessibility / Best Practices / SEO** at **100** in this run. The detailed metrics show **FCP and LCP around ~2.4s** on mobile here, with Lighthouse flagging **FCP** as the main drag toward a perfect Performance score — **TBT** stays low and **CLS** is excellent (0 in this capture), so the gap is mostly **early paint / perceived speed**, not JS blocking time. - **Takeaway:** Both stacks can score **well**. In these samples, **Tailwind Luna** is **about twice as fast** on **FCP/LCP** as the **Hyvä demo** (exact figures are on the screenshots). **Tailwind Luna** still has **headroom**: you stay on **Luma + extensions** and add customization **incrementally** — every module shifts Lighthouse, but you avoid a **full theme replatform** just to ship styling. **Hyvä** are **already tuned to the edge**; in real projects, **extra customization, Alpine-heavy templates, and Hyvä-specific modules** often **pile on** until performance **drops hard** — the demo is **not** where most merchants end up. #### Note on Magento license, OSL, and Hyvä [](#note-on-magento-license-osl-and-hyvä) **Tailwind Luna** is built as a **child of Magento Luma** and is intended to align with the **same kind of OSL 3.0 / Magento ecosystem** expectations as other community themes that **extend** Magento Open Source **without** replacing it. **Hyvä** is a historically **commercial, proprietary** storefront stack. **We maintain** (our opinion only) that it **does not** occupy the **same license-compliance posture** as shipping a **Luma-derived** theme under Magento’s established open-source model — and that **historically**, **closed** commercial offerings tied to this space have been **sold** that are **not** equivalent to **distributing** or **forking** **Magento Open Source** under its **OSL** terms. **Adobe**, **Hyvä**, and **your counsel** should be consulted before you rely on any third-party stack for **trademark**, **copyright**, or **license** decisions. #### Magento JS vs CSS [](#magento-js-vs-css) A common **oversimplified** story is that “Magento’s JavaScript is the main performance villain.” In practice, **CSS weight, blocking assets, and layout work** usually dominate what shoppers feel on classic Luma — **not** a universal law that **RequireJS / Knockout** are inherently slower than every alternative. Hyvä’s stack leans on **Alpine.js** with a lot of **behavior inlined next to markup**; that is a **different** tradeoff (and one we find **harder to reuse, test, and evolve**) than Magento’s **module-bound JS** patterns — not an automatic upgrade for every team. **Tailwind Luna** attacks the problem where this theme believes it matters most: **modern CSS** (Tailwind + merged SCSS) while **staying compatible with Magento’s extension and layout model**. You can still add **JS-side** improvements separately — for example **[React-Luma (`reactmagento2`)](https://github.com/Genaker/reactmagento2)**, a Composer module that optimizes the existing storefront **without** forcing a Hyvä-style theme migration: optional React/Vue, deferral, CSS tooling, and a path to **reduce reliance on default Magento JS** if that is your goal — **without** throwing away Luma compatibility for CSS. For **microfrontend-style** boundaries (incremental React/Vue islands, when legacy Knockout can stay, and fast optional backends **gogento** / **nodegento** / **pygento** beside Magento APIs), see **[docs/MICROFRONTEND\_REACT\_LUMA.md](docs/MICROFRONTEND_REACT_LUMA.md)**. For **CDN edge full-page cache** on Cloudflare (Worker + KV, high hit rates without replacing Luma), see **[docs/CLOUDFLARE\_FPC\_WORKER.md](docs/CLOUDFLARE_FPC_WORKER.md)** and the upstream repo **[CloudFlare\_FPC\_Worker](https://github.com/Genaker/CloudFlare_FPC_Worker)** — a complementary **frontend performance** path that does **not** require a Hyvä-style theme migration. Today, much front-end code is **assisted or generated** (IDEs, LLMs). Whether a snippet is **RequireJS** or **Alpine** matters less for “who types it by hand” than for **architecture**: **separation of concerns**, reuse across templates, and how easily **extensions** can hook in — areas where **Tailwind Luna + classic Magento** stay closer to **stock Magento** than an **Alpine-everywhere-in-phtml** style. **Summary:** **Tailwind Luna + Luma** — stay on Magento’s theme model, utility-first CSS, gradual changes, low risk, OSL-friendly, standard checkout, portable skills. **Hyvä** (why we steer away): full theme replacement, vendor lock-in, paid/proprietary ecosystem, big-bang migration, Alpine/template churn, hard exit cost; **we do not** equate its commercial model with **Magento OSL / Luma-child** compliance — see **Note on Magento license** above. Hyvä has happy users too — this section is **not** neutral; read **their** materials if you want the selling points. --- ### Documentation [](#documentation) DocTopic**[docs/CSS\_BUILD\_ARCHITECTURE.md](docs/CSS_BUILD_ARCHITECTURE.md)**End-to-end CSS pipeline: merge → Sass → **`_merged.css`** → Tailwind → PostCSS (Autoprefixer + **Browserslist**, optional **cssnano**) → `pub/static`, scripts, prod vs dev builds.**[docs/CSS\_MERGE.md](docs/CSS_MERGE.md)**SCSS merge: globs, layered **`scss.config.json`**, **`styles.yaml`** module-root config, tiers, **`--minify` / `--list` / `--verbose` / `--source-map`**, `input.css` import order, content vs merge.**[docs/WARDEN.md](docs/WARDEN.md)****Warden (Docker):** `.env` / `.warden` at Magento root, tracked templates in **`warden/`**, `warden shell`, storefront URL, Tailwind + E2E; optional **[WardenGUI](https://github.com/Genaker/WardenGUI)** (`pip install wardengui`).**[docs/TAILWIND\_EXTENSION\_DEVELOPMENT.md](docs/TAILWIND_EXTENSION_DEVELOPMENT.md)****Extensions:** new vs legacy modules, migration phases, utilities + module SCSS, raw CSS via layout, inline escape hatches.**[docs/TAILWIND\_CSS\_SAFELIST.md](docs/TAILWIND_CSS_SAFELIST.md)**Safelist for classes the JIT scanner cannot see.**[docs/TEMPLATE\_REWRITE\_STATUS.md](docs/TEMPLATE_REWRITE_STATUS.md)**Template rewrite tracking (maintainer tooling).**[docs/MICROFRONTEND\_REACT\_LUMA.md](docs/MICROFRONTEND_REACT_LUMA.md)**Microfrontend-style storefront with **[React Luma](https://github.com/Genaker/reactmagento2)**; incremental JS strategy; **gogento** (Go), **nodegento** (Node), **pygento** (Python) patterns for fast backends next to Magento.**[docs/CLOUDFLARE\_FPC\_WORKER.md](docs/CLOUDFLARE_FPC_WORKER.md)****[Cloudflare Worker FPC](https://github.com/Genaker/CloudFlare_FPC_Worker)** — edge CDN full-page cache for Magento; pairs with Tailwind Luna + origin FPC; avoids Hyvä-only migration for global TTFB gains.**E2E (Playwright):** `npm run test:e2e` — shopping + account specs. **`npm run test:e2e:with-user`** runs **`e2e/scripts/ensure-e2e-user.php`**: uses **`E2E_USER_*`** if set, else **`roni_cost@example.com`** when sample data is installed, else creates **`e2e_playwright@example.test`**. **`npm run e2e:create-user`** prints the resolved JSON. Details: **`e2e/README.md`**. Set `PLAYWRIGHT_BASE_URL` if not using `https://app.luma.test`; use `SKIP_E2E_MAGENTO_USER=1` when PHP/Magento is unavailable. ### Warden (Docker) [](#warden-docker) If you use **[Warden](https://warden.dev/)**, configuration is at the **Magento project root** (`.env`, `.warden/`). **Tracked templates** live in this package under **`warden/`** — copy them to the project root so they stay in sync with git. Full steps: **[docs/WARDEN.md](docs/WARDEN.md)** (storefront URL, `warden shell`, Tailwind, Playwright). Optional **[WardenGUI](https://github.com/Genaker/WardenGUI)** CLI/TUI (`pip install wardengui`): install and usage are documented there. ### Refresh CSS [](#refresh-css) From the theme directory (paths relative to your Magento project): ``` cd packages/theme-frontend-win-luna # adjust if needed npm install npm run build:tailwind # emit utilities → web/css/tailwind.css ``` Then in Magento: `bin/magento setup:static-content:deploy` (and flush cache) as you normally would — often from **`warden shell`** if you develop in Docker. **What `maintainer:sync` does:** reads `vendor/magento/module-*/view/frontend/templates`, writes mirrors here, maps **static** `class=""` tokens to Tailwind where rules exist, **leaves** attributes that contain `