Understanding Hyva and Tailwind

Oct 13, 2025 by pinkandtrash.com 122 views

Introduction

Are you experiencing difficulties in seeing styling changes on your local environment when working with Hyva and Tailwind in Magento 2? You're not alone. Many developers face this issue, especially when trying to customize the styling of their Magento 2 store. In this article, we'll explore the possible reasons behind this issue and provide you with step-by-step solutions to resolve it.

Understanding Hyva and Tailwind

Before we dive into the solutions, let's quickly understand what Hyva and Tailwind are. Hyva is a popular Magento 2 theme that provides a modern and responsive design for your store. It's built on top of Tailwind CSS, a utility-first CSS framework that allows you to write more efficient and customizable CSS code.

Creating a Child Theme

To customize the styling of your Magento 2 store, you need to create a child theme. A child theme is a theme that inherits the styles and layout of a parent theme, allowing you to make changes without modifying the original theme files.

To create a child theme, follow these steps:

Create a new folder in the app/design/frontend directory of your Magento 2 project.
Create a new file called theme.xml in the new folder.
Add the following code to the theme.xml file:

<?xml version="1.0"?>
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>My Child Theme</title>
    <parent>Hyva_Theme</parent>
</theme>

Create a new file called composer.json in the new folder.
Add the following code to the composer.json file:

{
    "name": "my-child-theme",
    "description": "My Child Theme",
    "type": "magento2-theme",
    "version": "1.0.0",
    "license": "OSL-3.0",
    "autoload": {
        "psr-4": {
            "My\\Child\\Theme\\": "src/"
        }
    },
    "require": {
        "magento/hyva-theme": "^2.0.0"
    }
}

Run the following command in your terminal to install the child theme:

composer install

Moving Hyva Default Theme Files

To customize the styling of your Magento 2 store, you need to move the Hyva default theme files to your child theme folder. To do this, follow these steps:

Copy the hyva folder from the app/design/frontend/Hyva/Theme directory to your child theme folder.
Copy the tailwind.config.js file from the app/design/frontend/Hyva/Theme/tailwind directory to your child theme folder.
Copy the css folder from the app/design/frontend/Hyva/Theme/tailwind directory to your child theme folder.

Configuring Tailwind

To configure Tailwind, you need to update the tailwind.config.js file in your child theme folder. To do this, follow these steps:

Open the tailwind.config.js file in your child theme folder.
Update the content section to include the following code:

module.exports = {
    content: [
        './app/design/frontend/My/ChildTheme/**/*.html',
        './app/design/frontend/My/ChildTheme/**/*.phtml',
        './app/design/frontend/My/ChildTheme/**/*.php',
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

Update the theme section to include the following code:

module.exports = {
    theme: {
        extend: {
            colors: {
                primary: '#333',
                secondary: '#666',
            },
            spacing: {
                px: '1px',
                py: '2px',
                pt: '3px',
                pr: '4px',
                pb: '5px',
                pl: '6px',
            },
        },
    },
    plugins: [],
}

Updating CSS Files

To update the CSS files, you need to update the css folder in your child theme folder. To do this, follow these steps:

Open the css folder in your child theme folder.
Update the tailwind.css file to include the following code:

@tailwind base;
@tailwind components;
@tailwind utilities;

Update the app.css file to include the following code:

body {
    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
}

Testing Your Changes

To test your changes, follow these steps:

Run the following command in your terminal to compile the CSS files:

npx tailwindcss -i tailwind.css -o app.css

Open your Magento 2 store in a web browser.
Check if the styling changes are reflected in your store.

Conclusion

In this article, we've explored the possible reasons behind the issue of not seeing styling changes on your local environment when working with Hyva and Tailwind in Magento 2. We've also provided step-by-step solutions to resolve this issue, including creating a child theme, moving Hyva default theme files, configuring Tailwind, updating CSS files, and testing your changes.

Q: I've created a child theme and moved the Hyva default theme files, but I still can't see the styling changes. What's going on?

A: There could be several reasons why you're not seeing the styling changes. Here are a few possible causes:

Make sure you've updated the tailwind.config.js file correctly.
Check if you've updated the css folder correctly.
Ensure that you've compiled the CSS files correctly using the npx tailwindcss command.
Try clearing the cache by running the following command in your terminal: php bin/magento cache:clean

Q: I've updated the `tailwind.config.js` file, but I'm still not seeing the styling changes. What's wrong?

A: Here are a few possible causes:

Make sure you've updated the content section correctly to include the necessary files.
Check if you've updated the theme section correctly to include the necessary styles.
Ensure that you've updated the plugins section correctly to include any necessary plugins.
Try updating the tailwind.config.js file again and see if that resolves the issue.

Q: I've updated the `css` folder, but I'm still not seeing the styling changes. What's wrong?

A: Here are a few possible causes:

Make sure you've updated the tailwind.css file correctly to include the necessary styles.
Check if you've updated the app.css file correctly to include the necessary styles.
Ensure that you've compiled the CSS files correctly using the npx tailwindcss command.
Try updating the css folder again and see if that resolves the issue.

Q: I've compiled the CSS files, but I'm still not seeing the styling changes. What's wrong?

A: Here are a few possible causes:

Make sure you've updated the tailwind.config.js file correctly.
Check if you've updated the css folder correctly.
Ensure that you've compiled the CSS files correctly using the npx tailwindcss command.
Try clearing the cache by running the following command in your terminal: php bin/magento cache:clean

Q: I've tried all of the above, but I'm still not seeing the styling changes. What's next?

A: If you've tried all of the above and you're still not seeing the styling changes, here are a few additional steps you can take:

Check the browser console for any errors.
Try using a different browser to see if the issue is browser-specific.
Check the Magento 2 logs for any errors.
Try disabling any extensions or plugins that may be interfering with the styling.

Q: I've resolved the issue, but I want to make sure it doesn't happen again. What can I do?

A: Here are a few steps you can take to prevent the issue from happening again:

Make sure you're using the latest version of Tailwind CSS.
Keep your tailwind.config.js file up to date with the latest styles.
Regularly update your css folder to ensure that the latest styles are being applied.
Use a version control system like Git to track changes to your code.
Regularly test your code to ensure that it's working as expected.

Q: I have a custom theme that's not using Hyva, but I want to use Tailwind CSS. Can I still use this guide?

A: Yes, you can still use this guide even if you're not using Hyva. The steps outlined in this guide are general and can be applied to any Magento 2 theme that's using Tailwind CSS.

Q: I have a custom theme that's using a different CSS framework, but I want to switch to Tailwind CSS. Can I still use this guide?

A: Yes, you can still use this guide even if you're not using Tailwind CSS. The steps outlined in this guide are general and can be applied to any Magento 2 theme that's using a different CSS framework.

Q: I have a question that's not answered in this guide. What can I do?

A: If you have a question that's not answered in this guide, you can try the following:

Check the Magento 2 documentation for more information.
Search online for more information.
Ask a question on a Magento 2 forum or community.
Contact a Magento 2 expert or developer for help.