Premiers pas

Installation

composer require tailwindphp/tailwindphp

TailwindPHP nécessite PHP 8.2 ou une version ultérieure, avec les extensions ctype et mbstring, ainsi que Composer. La plupart des builds PHP et les images officielles Docker incluent ces deux extensions ; composer.json ne les répertorie pas encore (#11), si bien qu'un build qui en est dépourvu installe le package, puis échoue à l'exécution. Aucune dépendance Node.js, aucune étape de compilation ni aucun npm dans votre image Docker ou votre CI. Il suffit de composer require puis d'appeler API.

Générez votre premier 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() analyse le balisage, extrait les noms de classes trouvés et génère uniquement le CSS nécessaire à ces classes — rien de plus. Sans second argument, il utilise un @import "tailwindcss" par défaut qui inclut le thème, Preflight et la couche des utilitaires.

Personnaliser avec une chaîne CSS

Passez une chaîne d'entrée CSS comme second argument pour ajouter des variables @theme, des règles personnalisées ou des directives. Les nouvelles valeurs du thème deviennent automatiquement des utilitaires :

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)

Consultez Thème pour la liste complète des espaces de noms du thème.

Entrée sous forme de tableau

Pour tout ce qui dépasse une seule ligne, passez un tableau avec les clés content et css. C'est ici que vous pouvez définir des composants avec @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;
        }
    ',
]);

La forme tableau accepte également minify, importPaths, cache et cacheTtl. Consultez Utilisation pour les formats d'entrée et Directives pour @apply, @theme, @utility et les autres directives.

Écrire dans un fichier

generate() renvoie une chaîne ; écrire une feuille de style se fait donc en une ligne :

use TailwindPHP\tw;

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

Pour les compilations basées sur des fichiers qui analysent un répertoire de templates, ainsi que pour le mode surveillance, utilisez plutôt CLI. Il accepte les options de compilation @tailwindcss/cli, mais son analyse du contenu diffère actuellement de celle de Tailwind ; la page CLI indique ce qu'il analyse.

Minifier pour la production

Passez minify => true pour compresser le résultat pendant la génération, ou appelez tw::minify() sur une chaîne existante :

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

Le minificateur supprime les commentaires, réduit les espaces, raccourcit les couleurs hexadécimales (#ffffff en #fff) et retire les unités des valeurs nulles (0px en 0). Consultez Mise en cache et minification pour les options de mise en cache.

Étapes suivantes

• Utilisation — le processus de génération, l'analyse du contenu et les formats d'entrée.
• Utilitaires de classes — cn(), merge(), join() et variants().
• Plugins — typographie, formulaires et plugins personnalisés.
• API — toute l'API tw et des instances de compilateur réutilisables.
• CLI — compilation à partir de fichiers et surveillance, sans Node.js.