Zermatt.dev: Style it your Way with SASS or TailwindCSS

With Zermatt v1.1.0 comes a new major feature: the ability to style modular components or even a full Magento theme. With native support for SASS, seamless integration with TailwindCSS, and many customization options, Zermatt empowers developers to build modern, performant, and maintainable designs within Magento.

👉 Styling documentation
👉 Release notes
👉 Zermatt.dev landing page

---

A Look at the Architecture

At the heart of Zermatt’s styling lies a robust architecture that handles CSS compilation and hierarchy management. Here’s how it works:

1. File Discovery: Zermatt scans for all .scss files within web/zermatt/**/ directories across vendor, app/code, and the current theme.

2. Hierarchy Processing: The system processes these files to respect the hierarchy, ensuring that theme-level styles take precedence over app/code and vendor styles.

3. Centralized Compilation: A zermatt-lock.scss file is automatically and transparently generated, containing @use directives for all discovered .scss files.

4. ViteJS Integration: ViteJS compiles this all-in-one file via the SCSS preprocessor, producing the final optimized and tree-shaked dist/zermatt.css file for deployment.

For advanced use cases, the zermattLock() function allows developers to create custom SCSS entry points tailored to specific needs.

---

Hierarchy Management

Zermatt’s styling hierarchy ensures that styles are modular and predictable. The system applies styles in this order:

• vendor styles
• app/code module styles
• Theme-level styles

For example, a theme-level .scss file named the same as one in a module will completely override the module’s file (hard rewrite). Alternatively, new files can be added to extend or customize styles without overwriting existing ones (soft rewrite).

---

Writing SCSS the Zermatt Way

Zermatt allows developers to write SCSS in any web/zermatt/**/ directory, regardless of whether it resides in vendor, app/code, or the current theme. This modular approach ensures clarity and maintainability.

For instance, in app/code:

app/code/Vendor/Module/view/frontend/web/zermatt/[ANY_DIR]/vendor-module.scss

Or in a theme:

theme/Vendor/Theme/web/zermatt/[ANY_DIR]/custom-stuff.scss

---

Full Customization with SASS and TailwindCSS

Option 1: SASS Customization

For those seeking full control, Zermatt supports replacing its default SCSS processing with custom entry points.

Option 2: TailwindCSS Integration

Adding TailwindCSS to Zermatt is straightforward and opens up a world of utility-first styling.

---

Get Started Today

Zermatt’s styling capabilities provide developers with the tools to create modular, scalable, and customizable frontend components and themes. Whether leveraging SASS, integrating TailwindCSS, or building a completely bespoke theme, Zermatt ensures developers have the power and flexibility to match any styling need.

Explore the Documentation and start building with Zermatt today!