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

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

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

Tailwind CSS arbeitet auf zwei verschiedene Arten. Man kann entweder eine (teilweise sehr lange) Liste an vordefinierten Klassen dem gewünschten Element zuweisen – oder man erstellt, insbesondere in wiederholten Fällen, eigene Komponenten.

[weiterlesen]Genesis Child Theme auf Basis von Tailwind CSS erstellen (Teil 3)

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

Dieses Tutorial beschreibt, wie ein Genesis Child Theme in Kombination mit Tailwind CSS, einer sehr modernen CSS-Bibliothek, erstellt wird. Tailwind beschreibt sich selbst als:

Tailwind is a utility-first CSS framework for rapidly building custom user interfaces.

In diesem Teil des Tutorials wird die benötigte Entwicklungsumgebung eingerichtet.

[weiterlesen]Genesis Child Theme auf Basis von Tailwind CSS erstellen (Teil 1)