Erste Schritte

Installation

composer require tailwindphp/tailwindphp

TailwindPHP benötigt PHP 8.2 oder neuer mit den Erweiterungen ctype und mbstring sowie Composer. Beide Erweiterungen sind in den meisten PHP-Builds und offiziellen Docker-Images enthalten; composer.json führt sie noch nicht auf (#11). Ein Build ohne diese Erweiterungen installiert daher das Paket, das dann zur Laufzeit fehlschlägt. Es gibt keine Abhängigkeit von Node.js, keinen Build-Schritt und kein npm in deinem Docker-Image oder deiner CI. Führe einfach composer require aus und rufe API auf.

Erstelle dein erstes CSS

<?php

require __DIR__ . '/vendor/autoload.php';

use TailwindPHP\tw;

$css = tw::generate('<div class="flex items-center p-4 bg-blue-500">Hello</div>');

generate() durchsucht das Markup, extrahiert darin gefundene Klassennamen und gibt nur das CSS aus, das diese Klassen benötigen – nicht mehr. Ohne zweites Argument verwendet es ein Standard-@import "tailwindcss", das das Theme, Preflight und die Utilities-Ebene einbindet.

Über eine CSS-Zeichenfolge anpassen

Übergib als zweites Argument eine Eingabe-CSS-Zeichenfolge, um @theme-Variablen, benutzerdefinierte Regeln oder Direktiven hinzuzufügen. Neue Theme-Werte werden automatisch zu Utilities:

use TailwindPHP\tw;

$css = tw::generate(
    '<div class="bg-brand p-4">Hello</div>',
    '@import "tailwindcss"; @theme { --color-brand: #3b82f6; }'
);
// .bg-brand now resolves to var(--color-brand)

Unter Theme findest du alle Theme-Namensräume.

Array-Eingabe

Für alles, was über eine einzelne Zeile hinausgeht, übergib ein Array mit den Schlüsseln content und css. Hier definierst du Komponenten mit @apply:

use TailwindPHP\tw;

$css = tw::generate([
    'content' => '<div class="flex p-4 btn">Hello</div>',
    'css' => '
        @import "tailwindcss";

        @theme {
            --color-brand: #3b82f6;
            --font-heading: "Inter", sans-serif;
        }

        .btn {
            @apply px-4 py-2 rounded-lg bg-brand text-white;
        }
    ',
]);

Die Array-Form akzeptiert auch minify, importPaths, cache und cacheTtl. Unter Verwendung findest du Eingabeformate, unter Direktiven @apply, @theme, @utility und mehr.

In eine Datei schreiben

generate() gibt eine Zeichenfolge zurück; ein Stylesheet zu schreiben ist daher ein Einzeiler:

use TailwindPHP\tw;

file_put_contents('dist/styles.css', tw::generate([
    'content' => file_get_contents('templates/page.html'),
    'css' => '@import "tailwindcss";',
]));

Für dateibasierte Builds, die ein Vorlagenverzeichnis durchsuchen, und für den Überwachungsmodus verwende stattdessen CLI. Es bietet dieselben Build-Optionen wie @tailwindcss/cli, aber die Inhaltssuche unterscheidet sich derzeit von Tailwind. Auf der Seite CLI steht, was durchsucht wird.

Für die Produktion minimieren

Übergib minify => true, um die Ausgabe während der Generierung zu komprimieren, oder rufe tw::minify() für eine vorhandene Zeichenfolge auf:

use TailwindPHP\tw;

// Minify during generation
$css = tw::generate([
    'content' => '<div class="flex p-4">Hello</div>',
    'minify' => true,
]);

// Or minify separately
$css = tw::generate('<div class="flex p-4">Hello</div>');
$minified = tw::minify($css);

Der Minifizierer entfernt Kommentare, fasst Leerzeichen zusammen, verkürzt Hex-Farben (#ffffff zu #fff) und entfernt Einheiten von Nullwerten (0px zu 0). Unter Caching und Minifizierung findest du die Cache-Optionen.

Nächste Schritte

• Verwendung – der generate-Ablauf, die Inhaltssuche und die Eingabeformate.
• Klassen-Utilities – cn(), merge(), join() und variants().
• Plugins – Typografie, Formulare und benutzerdefinierte Plugins.
• API – die vollständige tw-Oberfläche und wiederverwendbare Compiler-Instanzen.
• CLI – dateibasierte Builds und Überwachungsmodus ohne Node.js.