🐛 Compatibility error with Hyva Theme 1.4 + Tailwind CSS 4

[rhoerr]

I have a fresh install with Hyva Theme 1.4.0 (released today), Snowdog Menu 2.29.0, and PHP 8.4. The new Hyva version adds Tailwind 4 support, and that appears to have a compatibility issues with this module:

$ npm run watch --prefix=app/design/frontend/vendor/theme/web/tailwind/

> @hyva-themes/magento2-default-theme@3.0.0 prewatch
> npm run generate


> @hyva-themes/magento2-default-theme@3.0.0 generate
> npx hyva-sources && npx hyva-tokens


> @hyva-themes/magento2-default-theme@3.0.0 watch
> npx tailwindcss -i tailwind-source.css -o ../css/styles.css --watch

≈ tailwindcss v4.1.12

Error: Cannot apply unknown utility class `hover:snowdog-menu-text-hover`

[rhoerr]

I worked around the build error temporarily by adding this to my theme/web/tailwind/hyva.config.json. Not a real solution, but it gets the CSS generator working again.

    "exclude": [
      {
        "src": "vendor/snowdog/module-menu"
      }
    ]

[andrzejborkowski]

Hi,
thank you for reporting the issue. I've created an internal ticket SMM-64 and our dev team will check it soon

[RetroChaos]

I believe all that needs to occur is in view/frontend/web/tailwind/tailwind-source.css

@layer utilities {
    .snowdog-menu-text-hover {
        @apply text-blue-700;
    }
}

needs to change to

@utility snowdog-menu-text-hover {
    @apply text-blue-700;
}

If you're creating a new Hyva theme like I am, all you need to do in the child theme is add that new line to the bottom of web/tailwind/tailwind-source.css and that'll take precedence.

However there could be over things I'm overlooking. I can open a PR for this unless someone is already on it?

[yuriy-boyko]

I created a patch for this issue snowdog_tailwindcss_v4.patch

As previously said in the comments, I just changed from @layer utilities to @utility as described in the official tailwind documentation https://tailwindcss.com/docs/upgrade-guide#adding-custom-utilities

I think this change is incompatible with tailwind v3, so the patch should be used only if you have tailwind v4