How to Convert Luma CSS to Tailwind?
Chapters Close

How to Convert 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:

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

Hyva 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

<?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.
<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.   
<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. 

<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):

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:

  1. Check out the InstaBuild for Hyvä Themes: Ready-made Hyva theme templates for faster storefront development!
  2. Hyva Themes Development – For Online Merchants
  3. Hyvä Theme Benefits that your store needs
  4. 10 Best Hyva Compatibility Extension Providers For Magento 2 Stores
  5. Hyvä VS PWA: Where to Invest?
  6. How a Slow Magento Website Can Cost You Advertising Dollars
  7. Mobile Commerce: How Hyva Themes Boost Mobile Conversions
Speak your Mind

Post a Comment

Got a question? Have a feedback? Please feel free to leave your ideas, opinions, and questions in the comments section of our post! ❤️

* This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Grow your online business like 2,481 subscribers

    * This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.
    envelope

    Thank You!

    We are reviewing your submission, and will be in touch shortly.