DEV Community

Cover image for Zermatt.dev: Style it your Way with SASS or TailwindCSS
Hervé Guétin
Hervé Guétin

Posted on

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
Enter fullscreen mode Exit fullscreen mode

Or in a theme:

theme/Vendor/Theme/web/zermatt/[ANY_DIR]/custom-stuff.scss
Enter fullscreen mode Exit fullscreen mode

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!

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay