Gerade bei bestehenden Child Themes ist es deshalb sinnvoll, die vorhandene Tailwind Konfiguration gezielt in die neue Struktur zu überführen, da es sonst zu Layoutfehlern kommen kann.

1. Upgrade Helper installieren

Damit der Befehl update-to-tailwind-v4.js zur Verfügung steht, müssen die Hyvä Upgrade Helper Tools zuerst per Composer installiert werden.

composer require --dev hyva-themes/upgrade-helper-tools:dev-main

2. Neue Tailwind Struktur ins Theme übernehmen

Nach der Installation steht das Script nun zur Verfügung. Damit wird der bisherige Tailwind Ordner gesichert und die neue Struktur ins Theme kopiert.

./vendor/bin/update-to-tailwind-v4.js app/design/frontend/Vendor/theme

Falls der Wrapper unter vendor/bin nicht vorhanden ist, kann das Script auch direkt aus dem Paket aufgerufen werden:

./vendor/hyva-themes/upgrade-helper-tools/bin/update-to-tailwind-v4.js app/design/frontend/Vendor/theme

Danach liegt im Theme ein neuer web/tailwind-Ordner vor. Der bisherige Stand wird zusätzlich als Backup abgelegt.

3. hyva.config.json prüfen

In der hyva.config.json wird unter anderem festgelegt, welche Quellen für Tailwind berücksichtigt werden. Bei einem Child Theme sollte dort auch das Parent Theme eingebunden sein.

{
  "tailwind": {
    "include": [
      {
        "src": "vendor/hyva-themes/magento2-default-theme"
      }
    ],
    "exclude": []
  }
}

Wenn dort noch ein Beispielwert wie example_src steht, muss dieser durch src ersetzt werden.

4. tailwind-source.css als zentrale Datei verwenden

Die eigentliche Build Datei ist jetzt tailwind-source.css. Dort werden die Tailwind Basis, die Theme Quellen und die generierten Dateien eingebunden.

@import "@hyva-themes/hyva-modules/css";
@import "tailwindcss" source(none);

@source "../../**/*.phtml";
@source "../../**/*.xml";

@import "./generated/hyva-source.css";
@import "./generated/hyva-tokens.css";

Zusätzliche Theme Werte wie Fonts, Container oder eigene Utilities können ebenfalls dort ergänzt werden.

5. Eigene Werte aus dem bisherigen Theme übernehmen

Bestehende Child Themes enthalten oft eigene Farben, Fonts, Container Abstände oder Hilfsklassen. Diese Werte müssen nach dem Update an die neue Struktur angepasst werden.

Je nach Inhalt landen sie entweder in der hyva.config.json oder direkt in der tailwind-source.css.

Ein einfaches Beispiel für eigene Ergänzungen in der CSS Datei:

@theme {
    --font-sans: "Segoe UI", "Helvetica Neue", "Arial", "sans-serif";
}

@utility container {
    margin-inline: auto;
    padding-inline: 1.5rem;
}

6. Pakete im Tailwind Ordner aktualisieren

Im Theme Ordner unter web/tailwind sollten die aktuellen Pakete für Hyvä und Tailwind 4 installiert sein.

cd app/design/frontend/Vendor/theme/web/tailwind
npm install
npm install @hyva-themes/hyva-modules@latest tailwindcss@latest @tailwindcss/cli@latest

7. Build ausführen

Danach kann der Build wie gewohnt über den Tailwind Ordner des Themes laufen.

npm --prefix app/design/frontend/Vendor/theme/web/tailwind run build

Je nach Setup kann es zusätzlich sinnvoll sein, die Hyvä Dateien einmal neu zu generieren:

bin/magento hyva:config:generate
cd app/design/frontend/Vendor/theme/web/tailwind
npx hyva-sources
npx hyva-tokens
npm run build

Fazit

Für das Update eines Hyvä Themes von einer Version < 1.4 sind vor allem diese Punkte wichtig:

• die neue Tailwind Struktur ins Child Theme übernehmen
• hyva.config.json korrekt setzen
• tailwind-source.css als zentrale Build Datei nutzen
• bestehende Theme Werte sauber in die neue Struktur übertragen

Wer bereits ein eigenes Child Theme mit angepasster Tailwind Konfiguration im Einsatz hat, sollte diese Umstellung bewusst durchführen und nicht nur die neuen Dateien kopieren. Dann lässt sich das Theme sauber unter Hyvä 1.4.x weiterführen.

Der folgende Code kann direkt in z.B. eine CMS Seite oder einen Block eingefügt werden:

<div class="relative max-w-screen-lg mx-auto">
  <!-- Slider Container -->
  <div id="videoSlider" class="snap-x snap-mandatory flex overflow-x-auto space-x-6 py-6 scroll-smooth">
    
    <div class="snap-start flex-shrink-0 w-full grid grid-cols-1 gap-6 lg:grid-cols-3">
      <!-- Video 1 -->
		<div>
			<div class="aspect-video mb-2">
			<iframe src="https://www.youtube-nocookie.com/embed/12345678" allowfullscreen class="w-full h-full"></iframe>
        </div>
        <h3 class="text-lg font-semibold text-white">Video 1 Titel</h3>
        <p class="text-sm text-white">Kurze Beschreibung zu Video 1</p>
      </div>
		<!-- Wiederholen Sie diesen Bereich so oft wie gewuenscht -->
    </div>
	
	<!-- Slide 2 -->
    <div class="snap-start flex-shrink-0 w-full grid grid-cols-1 gap-6 lg:grid-cols-3">...</div>
	
	<!-- Slide 3 -->
    <div class="snap-start flex-shrink-0 w-full grid grid-cols-1 gap-6 lg:grid-cols-3">...</div>
	
	<!-- Slide 4 -->
    <div class="snap-start flex-shrink-0 w-full grid grid-cols-1 gap-6 lg:grid-cols-3">...</div>
  </div>

  <!-- Navigations Buttons -->
  <div class="flex justify-between mt-4">
    <button onclick="moveSlide(-1)" class="bg-orange text-white px-4 py-2 rounded">Zurück</button>
    <button onclick="moveSlide(1)" class="bg-orange text-white px-4 py-2 rounded">Weiter</button>
  </div>
</div>

<!-- JS -->
<script>
  const slider = document.getElementById('videoSlider');
  const slides = slider.children;
  let currentSlide = 0;

  function moveSlide(direction) {
    const totalSlides = slides.length;
    currentSlide += direction;

    if (currentSlide < 0) currentSlide = 0;
    if (currentSlide >= totalSlides) currentSlide = totalSlides - 1;

    const target = slides[currentSlide];
    target.scrollIntoView({ behavior: 'smooth', inline: 'start' });
  }
</script>

php bin/magento hyva:config:generate

Durch diesen Befehl werden die Styles nun berücksichtigt (in app/etc/hyva-themes.json) und nach erneutem Deployment und Ausführen des npm build Befehls sollten die Styles nun korrekt verwendet werden.

npm --prefix app/design/frontend/Theme/hyva/web/tailwind run build-prod

input[type='radio'] {
    @apply text-emerald-500 focus:ring-emerald-500
}

Wenn Sie eine eigene Farbe definiert haben, sieht es ähnlich aus:

Ohne Shades:

input[type='radio'] {
    @apply text-thecolor focus:ring-thecolor
}

Mit Shades:

input[type='radio'] {
    @apply text-thecolor-500 focus:ring-thecolor-500
}

1. Öffnen Sie die Datei app/design/frontend/Theme/hyva/web/tailwind/postcss.config.js Ihres Hyvä Child Themes
2. Fügen Sie den folgenden Code ein, um das Layout der Snowdog Menü Extension zu exkludieren:
   

   postcssImportHyvaModules({
       excludeDirs: ["vendor/snowdog/module-menu"],
   }),

3. Kopieren Sie nun die Datei vendor/snowdog/module-menu/view/frontend/tailwind/tailwind-source.css in Ihr Hyvä Child Theme an die Stelle app/design/frontend/Theme/hyva/Snowdog_Menu/tailwind/tailwind-source.css
4. Öffnen Sie die soeben kopierte Datei und passen Sie den Inhalt nach Ihren Wünschen an.
5. Führen Sie nun den

   npm --prefix app/design/frontend/Theme/hyva/web/tailwind run build-prod

   aus dem Rootverzeichnis Ihres Magento 2 Shops aus und deployen Sie die Inhalte erneut

Fertig, laden Sie das Frontend Ihres Magento 2 Shops erneut und prüfen Sie, ob Ihre CSS Anpassungen zu sehen sind.

...
theme: {
    extend: {
        ringColor: {
            'thecolor': '#123456'
        },
    }
}
...

Zugriff auf die Farbe haben Sie dann z.B. mit dem Code:

class="... focus:ring-thecolor ..."

. Wenn Sie eine bereits vorhandene Tailwind CSS Farbe verwenden möchten, geht das z.B. so:

class="... focus:ring-yellow-500 ..."

.