Replacing Luma Styles

When converting .phtml templates written for Luma to Hyvä, all CSS styles need to be replaced with Tailwind CSS classes.

Please refer to Working with Tailwind CSS for resources to get you started if you are new to this CSS utility class framework.

Example

Luma Code:

<ul class="compare wrapper">
  <li class="item link compare">
    <a class="action compare no-display" title="Compare products">

Hyvä Code:

<div class="flex items-center order-3">
    <a id="compare-link"
        class="relative invisible inline-block mx-1 no-underline sm:ml-3 hover:text-black"
        title="Compare Products">