Magento 2 frontend was for too long too archaic. It relied on old and forgotten JavaScript libraries, resulting in slow performance and a poor user experience. Additionally, working with the default Magento themes was far from enjoyable. Then we had the PWA hype train. Everyone wanted to transform their Magento 2 stores into PWAs, even though not all the PWA features would be utilized to their full potential. Of course, using PWA on Magento 2 brought a new set of problems. Now the new hot topic in the Magento community is Hyvä Theme. The Hyvä Theme is an excellent solution that stands out for its architectural similarity to normal Magento, unlike other PWA solutions. It is really fast, and very easy for developers who have been working with normal Magento 2 themes and now it is accessible (thanks to Snowdog's contribution to Hyvä Theme). However, as expected with any new solution, it does come with some challenges. Nevertheless, compared to PWA solutions, the problems associated with Hyvä Theme are relatively minor. One such challenge is effectively managing content from CMS blocks and pages.

Hyvä magic with Alpine and Tailwind

Hyvä is ultra-fast, using lightweight solutions such as AlpineJs and TailwindCSS for best performance. AlpineJs handles all JavaScript functions, while TailwindCSS handles CSS styles. With powerful and really clever file scanning, TailwindCSS makes sure to create as small as possible CSS production styles.

TailwindCSS is a utility-first CSS framework that scans specified locations for utilized CSS classes, resulting in production styles that only include necessary CSS classes. While this concept may initially seem odd, I'll do my best to simplify its understanding for you.

In tailwind.config.js you can indicate which directories will be scanned by TailwindCSS

This utility-first framework utilizes low-level CSS classes that serve specific purposes. For instance, in TailwindCSS, the class "flex" contains only one property - "display: flex;". Similarly, the class "text-center" aligns your text to the center. This methodology eliminates the need to repeat CSS rules. Instead, by employing the utility class "flex", you can effortlessly implement the "display: flex;" property.

Scanning files by Tailwind CSS

TailwindCSS scans all specified files during the CSS build process. It automatically detects utility classes and adds them to the final styles. By doing so, it ensures that only the necessary utility classes are included in the final styles. As a result, there is no redundant repetition of CSS rules, resulting in a significantly smaller bundle of styles.

This approach is clever, but it doesn't work perfectly with CMS blocks and CMS pages used in Magento 2. As mentioned before, Tailwind scans for utility classes in identified directories, but our CMS blocks and pages are stored in the database rather than the repository. Consequently, Tailwind is unable to scan our CMS content, and if we were to use a TailwindCSS class that isn't used in the repository, we wouldn't be able to utilize it as it wouldn't be added to our final styles file. Simply said Talwinds classes that are not used in the repository won't work.

In addition, I believe that dealing with complex components can be challenging for non-technical people. It is extremely easy to make minor mistakes, such as typos or forgetting to close a class tag. As a result, I believe there is a major risk in providing the customer with complex code that is not human readable.

As you can see, there are a lot of places where someone can make some mistake and break this section of code.

There are a few solutions that can help you work with CMS’s. You can use:

  • CMS Tailwind JIT compiler prepared by Hyvä theme,
  • Magento Pagebuilder, which styles using TailwindCSS are also prepared by Hyva Theme,
  • Custom Widgets, which is my favorite solution. Widgets are a hidden gem that are not used as much as they should.

You will be able to read about these solutions in the next post.