Converting Luma CSS to Tailwind

For Hyvä compatibility, convert all Luma CSS to Tailwind CSS (JavaScript also requires conversion).

Luma modules implement CSS styles in various ways, requiring different conversion approaches. This guide outlines the best method for each scenario.

Replacing Luma Styles

When converting Luma .phtml templates to Hyvä, replace all CSS styles with Tailwind CSS classes.

If you're new to Tailwind CSS, refer to Working with Tailwind CSS for introductory resources.

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">
    <a
        id="compare-link"
        class="relative hidden md:inline-flex btn bg-transparent border-transparent p-1 invisible"
        aria-label="Compare Products"
    >

Additional .less styles

Modules often include additional CSS files compiled by the Magento LESS compiler, typically via layout XML. Remove these files and replace their styles with inline Tailwind CSS classes.

Example of removing a LESS-based CSS file via layout XML:

<remove src="Some_Module::css/styles.css"/>

External Non-Luma CSS

Some modules include CSS files independent of Magento and its LESS system, often bundled with JavaScript libraries.

Consider these factors when deciding how to handle them:

• If the file is part of an external JavaScript library that the compatibility module will remove, remove the CSS file as well.

  <remove src="Some_Module::css/some.css"/>
  

• If the CSS is part of the Critical Rendering Path, consider removing the file and using inline Tailwind CSS classes instead.

  <remove src="Some_Module::css/some.min.css"/>
  

• If the CSS is not critical for rendering and is independent of Magento Luma, we suggest using the external CSS within Hyvä. Consider loading it on demand instead of automatically. The example below loads the CSS file on the first user interaction.

  document.addEventListener('DOMContentLoaded', function () {
      function init() {
          const link = document.createElement('link')
          link.rel = 'stylesheet';
          link.type = 'text/css';
          link.href = '<?= $escaper->escapeUrl($block->getViewFileUrl('Some_Module::css/some.css')) ?>';
          document.head.append(link);
      }
      document.body.addEventListener('touchstart', init, {once: true});
      document.body.addEventListener('mouseover', init, {once: true});
  }, {once: true});
  

Automatic Conversion of styles to Tailwind CSS

While manual conversion of styles to Tailwind CSS is possible, BeyondCode offers a utility to significantly speed up the process.

This browser plugin, Windy, costs 49 EUR (at the time of writing) and works with Chrome or Firefox-based browsers.

While not perfect, it significantly accelerates the conversion process.

Watch this 4-minute video to see it in action:

A useful Windy feature not covered in the video: holding Shift while clicking a DOM section copies only the Tailwind styles for that element, not the full HTML with classes.