Aan de slag

Installeren

composer require tailwindphp/tailwindphp

TailwindPHP vereist PHP 8.2 of hoger met de extensies ctype en mbstring, plus Composer. Beide extensies zijn opgenomen in de meeste PHP-builds en officiële Docker-images; composer.json vermeldt ze nog niet (#11), dus een build zonder deze extensies installeert het pakket, maar geeft tijdens runtime een fout. Er is geen afhankelijkheid van Node.js, geen buildstap en geen npm nodig in je Docker-image of CI. Voer gewoon composer require uit en roep API aan.

Genereer je eerste 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() scant de markup, haalt de gevonden klassennamen eruit en genereert alleen de CSS die deze classes nodig hebben — verder niets. Zonder tweede argument gebruikt het een standaard-@import "tailwindcss", die het thema, Preflight en de hulpfunctielaag toevoegt.

Aanpassen met een CSS-string

Geef een invoer-CSS-string door als tweede argument om @theme-variabelen, aangepaste regels of directives toe te voegen. Nieuwe themawaarden worden automatisch hulpfuncties:

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)

Zie Thema voor de volledige lijst met themanamespaces.

Array-invoer

Geef voor alles wat uitgebreider is dan één regel een array met de sleutels content en css door. Hier definieer je componenten met @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;
        }
    ',
]);

De arrayvorm accepteert ook minify, importPaths, cache en cacheTtl. Zie Gebruik voor de invoerformaten en Directives voor @apply, @theme, @utility en meer.

Naar een bestand schrijven

generate() geeft een string terug, dus een stylesheet schrijven kan in één regel:

use TailwindPHP\tw;

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

Gebruik voor builds op basis van bestanden die een templatemap scannen, en voor de watchmodus, in plaats daarvan CLI. Deze functie neemt de @tailwindcss/cli-buildopties over, maar scant inhoud momenteel anders dan Tailwind; op de CLI-pagina staat wat er wordt gescand.

Verkleinen voor productie

Geef minify => true door om de uitvoer tijdens het genereren te comprimeren, of roep tw::minify() aan op een bestaande string:

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);

De verkleiner verwijdert opmerkingen, vouwt witruimte samen, verkort hexkleuren (#ffffff naar #fff) en verwijdert eenheden bij nulwaarden (0px naar 0). Zie Caching en verkleinen voor cacheopties.

Volgende stappen

• Gebruik — de workflow voor genereren, contentscanning en invoerformaten.
• Klassehulpfuncties — cn(), merge(), join() en variants().
• Plugins — typografie, formulieren en aangepaste plugins.
• API — de volledige tw-interface en herbruikbare compilerinstanties.
• CLI — builds op basis van bestanden en builds met watchmodus, zonder Node.js.