Genesis Child Theme auf Basis von Tailwind CSS erstellen (Teil 4)

Kann man die vorgegebenen Klassen aufgrund fehlender Filter nicht direkt dem gewünschten Element zuweisen (siehe Teil 3), muss man direkt über die src/main.css-Datei arbeiten. Dort können eigene Klassen oder auch Komponenten definiert werden. Nach jeder Änderung in der src/main.css-Datei muss PostCSS ausgeführt werden, um den CSS-Code in ein für den Browser lesbares Format umzuwandeln. Dies geschieht über folgenden Befehl:

./node_modules/postcss-cli/bin/postcss src/main.css -o main.css

Um zu vermeiden, dass dieser Befehl nach jeder Änderung manuell ausgeführt werden muss, kann man auch den Parameter -w anhängen. Dieser steht für „watch“ und beobachtet die Datei selbstständig. Ändert sich etwas an der Datei, wird die Konvertierung automatisch gestartet:

./node_modules/postcss-cli/bin/postcss src/main.css -o main.css -w

Zurück zu den Komponenten. Existiert ein Filter nicht, der für Änderungen an einem gewünschten Element erforderlich wäre, kann man sich über eigene Klassen und Komponenten helfen. In folgendem Beispiel wird site-header in der src/main.css angepasst:

.site-header {
    @apply text-xl text-blue-dark shadow-lg
}

Arbeitet man in der src/main.css-Datei gibt es ein paar Besonderheiten. So können einige Prefixes wie die Responsive-Prefixes sm:, md: oder lg: nicht genutzt werden, genau wie auch die Zustands-Prefixes wie beispielsweise hover:. Als Lösung für die Responsive-Prefixes müssen einfach eigene Media Queries geschrieben werden. Dies geschieht in folgender Art und Weise für kleine Bildschirme:

@screen sm {
    .entry-meta {
        @apply text-red
    }
}

… und für große Bildschirme:

@screen lg {
    .entry-meta {
        @apply text-green
    }
}

Da das Paket css-mqpacker in unserem node-Setup vorhanden ist, werden alle separaten Media Queries gleichen Typs zu einem einzelnen Media Query zusammengefasst. So kann man hinter jeder Klasse die passenden Änderungen für andere Bildschirmtypen anfügen, ohne diese alle in komplett separate Media Queries auslagern zu müssen.

Das Problem mit den Zustands-Prefixes wie hover: kann ‚in klassischem Sinne‘ gelöst werden. Möchte man beispielsweise einen Hover-Link unterstreichen, sähe der Code wie folgt aus:

a {
  @apply no-underline
}

a:hover {
  @apply underline
}

Diese Punkte haben jedoch nichts mit dem Genesis Framework zu tun, sondern sind Eigenschaften von Tailwind CSS direkt. Daher sind all diese Punkte auch ausführlich in der Dokumentation von Tailwind CSS beschrieben.

Auf Basis der bis hier beschriebenen Informationen sollte es nun möglich sein, ein Genesis Child Theme mit Hilfe von Tailwind CSS zu erstellen. Die nächsten Schritte, die jetzt folgen könnten, wären:

  • main.css und style.css kombinieren
  • Nicht benötigte Tailwind CSS Klassen entfernen
  • Custom Fonts nutzen

Vielleicht werde ich dieses Tutorial eines Tages fortsetzen, wenn sich die Gelegenheit dazu bietet.

Schreibe einen Kommentar