General

Hyva Tutorials
-
General
-
How to Convert Luma CSS to Tailwind?

How to Converting Luma CSS to Tailwind _

Apart from JavaScript, all Luma CSS must be transformed to Tailwind CSS to function with Hyvä.

There are various methods modules use to apply CSS styles in Luma, and therefore the appropriate method to convert them may vary.

First and foremost, developers must thoroughly understand the structure and design principles of the Luma CSS. It’s crucial to refer to the Tailwind documentation for guidance on class names, customization options, and best practices to ensure a seamless adaptation.

Once the analysis is complete, the focus shifts to integrating Tailwind CSS into the project.

Replacing Luma Styles

When migrating .phtml templates originally crafted for Luma to Hyvä, it is imperative to exchange all CSS styles with Tailwind CSS classes.

If you’re unfamiliar with this CSS utility class framework, please check out the “Working with TailwindCSS” guide to help you get started.

Example

Luma Code:

Copy Code

<button type="submit" title="Add to Cart" class="action tocart primary">
   <span>Add to Cart</span>
</button>

Hyva Code:

Copy Code

<button type="submit" title="Add to Cart" class="text-sm font-medium py-2 px-4 border bg-primary">
   <span>Add to Cart</span>
</button>

New to Hyvä?? Learn about the Hyvä Theme from scratch!

Remove additional .less styles

Some modules include additional CSS files compiled by the Magento LESS compiler.

These CSS files are usually included with layout XML. They need to be removed and replaced with inline Tailwind CSS classes.

Example removal of an additional LESS based CSS file with layout XML:

You can remove CSS in the below path:

app/design/frontend/Your_Vendor/Your_Theme/Magento_Theme/layout/default_head_blocks.xml

Copy Code

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
   <head>
       <remove src="Some_Module::css/styles.css"/>
       <remove src="Magetop_Brand::css/styles.css" />
       <remove src="MageArray_News::css/category_sidebar.css" />
       <remove src="Bss_SocialLogin::css/jquery.fancybox.min.css" />
       <remove src="Mageplaza_ShareCart::css/style.css" />
       <remove
src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css"/>
   </head>
</page>

External Non-Luma CSS

Certain extensions incorporate CSS files that operate independently of Magento and the Magento LESS system. Typically, these styles are packaged alongside JavaScript libraries.

When determining how to address them, various factors must be considered:

Is the file part of an external JavaScript library and the library will be removed by the compatibility module? If yes, remove the CSS file, too.

Copy Code

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

Is the CSS part of the Critical Rendering Path? If yes, consider removing the file and using inline Tailwind CSS classes instead.

Copy Code

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

Is the CSS NOT used in the Critical Rendering Path and independent of Magento Luma? In this case, we suggest using the external CSS inside of Hyvä but consider loading it when needed instead of always loading it automatically.

The following example loads the CSS file on demand on the first user interaction with the page.

Copy Code

<script>
   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/custom.css')) ?>';
       document.head.append(link);
   }
   document.body.addEventListener('touchstart', init, {once: true});
   document.body.addEventListener('mouseover', init, {once: true});
}, {once: true});
</script>

Useful extension/tools for Conversion of styles to Tailwind CSS:

CSS to Tailwind Converter tool:

CSS to TailwindCSS converter (VS Code extension):

https://github.com/Jackardios/vscode-css-to-tailwindcss?tab=readme-ov-file

Conclusion

The process of converting Luma CSS to Tailwind involves a systematic approach to replace existing styles with Tailwind CSS utility classes. Understanding the structure of Luma CSS is key, followed by integrating Tailwind and referring to its documentation for guidance.

Converting Luma CSS to Tailwind is not just a technical task but also a strategic decision to enhance maintainability and leverage the benefits of a utility-first CSS framework.

Read more resources on Hyva themes: