Kezdő lépések

Telepítés

composer require tailwindphp/tailwindphp

A TailwindPHP használatához PHP 8.2 vagy újabb verziója, valamint a ctype és a mbstring bővítmény szükséges, továbbá Composer. Mindkét bővítmény megtalálható a legtöbb PHP összeállításban és a hivatalos Docker képekben; a composer.json még nem sorolja fel őket (#11), ezért nélkülük a csomag települ, de futáskor hibát jelez. Nincs Node.js függőség, összeállítási lépés vagy npm a Docker képben vagy CI-környezetben. Csak composer require, majd hívja meg a API függvényt.

Készítse el első CSS értékét

<?php

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

use TailwindPHP\tw;

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

A generate() átvizsgálja a jelölőnyelvet, kinyeri a talált osztályneveket, majd csak az ezekhez szükséges CSS értékeket állítja elő — semmi mást. Ha nincs második argumentum, alapértelmezett @import "tailwindcss" értéket használ, amely betölti a témát, a Preflight elemet és a segédosztályok rétegét.

Testreszabás CSS karakterlánccal

Adjon meg második argumentumként egy bemeneti CSS karakterláncot, hogy @theme változókat, egyéni szabályokat vagy direktívákat adjon hozzá. Az új témabeállítások automatikusan segédosztályokká válnak:

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)

A témanévterek teljes listájáért lásd a Téma oldalt.

Tömbös bemenet

Ha nem egysoros bemenetet ad meg, használjon tömböt content és css kulcsokkal. Itt definiálhatók a komponensek a @apply segítségével:

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;
        }
    ',
]);

A tömbös forma a minify, importPaths, cache és cacheTtl értékeket is elfogadja. A bemeneti formátumokért lásd a Használat oldalt, a @apply, @theme, @utility és más direktívákért pedig a Direktívák oldalt.

Fájlba írás

A generate() karakterláncot ad vissza, ezért a stíluslap írása egyetlen sor:

use TailwindPHP\tw;

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

Sablonkönyvtárat átvizsgáló, fájlalapú összeállításokhoz és figyelő módhoz használja inkább a CLI megoldást. Ugyanazokat a @tailwindcss/cli összeállítási beállításokat fogadja, de jelenleg másképp vizsgálja át a tartalmat, mint a(z) Tailwind; az CLI oldalon találja a beolvasott fájlok listáját.

Tömörítés éles környezethez

Adja meg a minify => true értéket, hogy a generálás tömörítse a kimenetet, vagy hívja meg a tw::minify() függvényt egy meglévő karakterláncon:

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

A tömörítő eltávolítja a megjegyzéseket, összevonja a szóközöket, lerövidíti a hexadecimális színkódokat (#ffffff-ről #fff-re), és elhagyja a nullaértékek mértékegységeit (0px helyett 0). A gyorsítótárazási beállításokért lásd a Gyorsítótárazás és tömörítés oldalt.

Következő lépések

• Használat — a generálási munkafolyamat, a tartalom átvizsgálása és a bemeneti formátumok.
• Osztálysegédek — cn(), merge(), join() és variants().
• Bővítmények — tipográfia, űrlapok és egyéni bővítmények.
• API — a teljes tw felület és az újrafelhasználható fordítópéldányok.
• CLI — fájlalapú és figyelő összeállítások Node.js nélkül.