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!