Einstieg

TailwindCSS einrichten

Lernen Sie die Starter-Erweiterung mit TailwindCSS zu nutzen und im Handumdrehen Vorlagen zu erstellen.

Vorraussetzungen

NodeJS (latest)
NPM or Yarn (latest)

Die Pagedoctor Starter-Erweiterung wird mit vorkonfiguriertem TailwindCSS geliefert. TailwindCSS ist ein CSS-Framework zum schnellen formatieren von HTML, ohne sich mit tatsächlichen Stylesheet-Dateien befassen zu müssen. Damit können HTML-Vorlagen noch schneller geschrieben werden, indem das benötigte CSS direkt in den HTML-Code geschrieben wird. Daher waren wir der Meinung, dass es am besten zu Pagedoctor passt. Natürlich kann mit Pagedoctor jedes beliebige CSS-Framework verwenden werden. Erfahren Sie hier vom Erfinder Adam Wathan, warum „funktionales CSS“ gut zu Ihrem nächsten Projekt passt. Schaue Sie hier die offizielle TailwindCSS-Dokumentation an. TailwindCSS bietet sogar fertige Vorlagen und Komponenten. Sie werden es lieben!

Welche Aufgabe erledigt das Build-Tool?

Das Buildtool ist ein NodeJS-Paket, das alle Abhängigkeiten verknüpft, die für die Entwicklung von Frontend-Vorlagen mit TailwindCSS erforderlich sind. Wenn der Build-Prozess ausgeführt wird, werden HTML- und JS-Dateien aller Pagedoctor-Erweiterungen in dem Ordner „local_packages“ auf TailwindCSS-Klassen überprüft. Anschließend werden nur die verwendeten CSS-Klassen in eine Datei „styles.css“ kompiliert, die dann vom TYPO3 CMS ausgegeben wird.

Wie führt man das Build-Tool aus?

Das Build-Tool verwendet vier Ordnerpfade innerhalb der Starter-Erweiterung, namentlich:

                local_packages/t3-starter/Resources/Private/Css/Content
local_packages/t3-starter/Resources/Private/Css/Preview
local_packages/t3-starter/Resources/Public/Css/Content
local_packages/t3-starter/Resources/Public/Css/Preview

Das Build-Tool unterteilt die Stylesheets jeweils in Content und Preview CSS-Klassen. Content steht für CSS-Klassen die nur für das Frontend (in Vorlagen) verwendet werden und Preview steht für CSS-Klassen die nur für das Backend (in Content-Element-Vorschau) verwendet werden.

Nachdem die verwendeten CSS-Klassen vom Build-Tool erfasst wurden werden diese in die Datei styles.css in den jeweiligen Public-Ordner verschoben.
Die Starter-Erweiterung verlinkt bereits die jeweiligen Style-Dateien weshalb keine weitere Einrichtung erforderlich ist.

Um das Build-Tool auszuführen muss in das jeweilige Verzeichnis in der Konsole gewechselt werden und die folgenden Befehle ausgeführt werden:

                cd local_packages/t3-starter/Resources/Private/Css/Content
npm install
npm run-script build
cd ../Preview
npm install
npm run-script build

Entwicklungsserver starten (watcher)

Der Entwicklungsserver erkennt Änderungen und startet erneut die Kompilierung sobald eine Datei verändert wurde.

                npm run-script dev