Wer ein Hyvä Child Theme von einer Version < 1.4 aktualisiert, sollte sich die Tailwind Struktur im Theme ansehen. Mit Hyvä 1.4.x arbeitet das Theme nicht mehr mit einer zentralen tailwind.config.js. Stattdessen kommen jetzt hyva.config.json, tailwind-source.css und die generierten Dateien im generated-Verzeichnis zum Einsatz.

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.

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.

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

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.

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.

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:

6. Pakete im Tailwind Ordner aktualisieren

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

7. Build ausführen

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

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

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.