Začetek

Namestitev

composer require tailwindphp/tailwindphp

TailwindPHP potrebuje PHP 8.2 ali novejši z razširitvama ctype in mbstring ter Composer. Obe razširitvi sta del večine gradenj PHP in uradnih slik Docker; composer.json ju še ne navaja (#11), zato se paket v gradnji brez njiju namesti, a med izvajanjem odpove. Odvisnost od Node.js, korak gradnje ali npm v sliki Docker oziroma CI niso potrebni. Samo composer require in pokličite API.

Ustvarite svoj prvi 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() pregleda označevalni jezik, izlušči imena razredov, ki jih najde, in ustvari samo CSS, ki jih ti razredi potrebujejo — nič več. Če ne podate drugega argumenta, uporabi privzeti @import "tailwindcss", ki vključi temo, Preflight in plast pripomočkov.

Prilagajanje z nizom CSS

Kot drugi argument podajte vhodni niz CSS, da dodate spremenljivke @theme, pravila po meri ali direktive. Nove vrednosti teme samodejno postanejo pripomočki:

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)

Celoten nabor imenskih prostorov teme je opisan v razdelku Tema.

Vhod v obliki polja

Za vse, kar je obsežnejše od enovrstičnega zapisa, podajte polje s ključema content in css. Tukaj določite komponente z @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;
        }
    ',
]);

Oblika polja sprejema tudi minify, importPaths, cache in cacheTtl. Oblike vhodov so opisane v razdelku Uporaba, direktive, kot so @apply, @theme, @utility in druge, pa v razdelku Direktive.

Zapis v datoteko

generate() vrne niz, zato je zapis slogovne datoteke enovrstičen:

use TailwindPHP\tw;

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

Za gradnje na podlagi datotek, ki pregledujejo imenik predlog, in za način spremljanja raje uporabite CLI. Uporablja možnosti gradnje @tailwindcss/cli, vendar se njegovo pregledovanje vsebine trenutno razlikuje od pregledovanja pri Tailwind; na strani CLI je navedeno, kaj pregleduje.

Minifikacija za produkcijo

Podajte minify => true, da med ustvarjanjem stisnete izhod, ali pokličite tw::minify() za obstoječi niz:

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

Minifikator odstrani komentarje, strne presledke, skrajša šestnajstiške barve (#ffffff v #fff) in pri vrednostih nič odstrani enote (0px v 0). Možnosti predpomnjenja najdete v razdelku Predpomnjenje in minifikacija.

Naslednji koraki

• Uporaba — potek ustvarjanja, pregledovanje vsebine in oblike vhodov.
• Pripomočki razredov — cn(), merge(), join() in variants().
• Vtičniki — tipografija, obrazci in vtičniki po meri.
• API — celoten nabor tw in primerki prevajalnika za ponovno uporabo.
• CLI — gradnje na podlagi datotek in spremljane gradnje brez Node.js.