Alustamine

Paigaldamine

composer require tailwindphp/tailwindphp

TailwindPHP vajab versiooni PHP 8.2 või uuemat koos laiendustega ctype ja mbstring ning paketti Composer. Mõlemad laiendused on kaasas enamiku PHP versioonide ja ametlike Docker-kujutistega; composer.json pole neid veel loetlenud (#11), mistõttu ilma nendeta installib koostis paketi, kuid käitusajal tekib tõrge. Sõltuvust Node.js-ist, ehitusetappi ega npm-i pole sinu Docker-kujutises ega CI-s. Lihtsalt composer require ja kutsu API.

Loo oma esimene 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() skannib märgenduse, eraldab leitud klassinimed ja väljastab ainult nende klasside jaoks vajalikud CSS-d — ei midagi enamat. Kui teist argumenti pole, kasutatakse vaikimisi @import "tailwindcss"-i, mis kaasab teema, Preflight ja utiliitide kihi.

Kohandamine CSS-stringi kaudu

Edasta teise argumendina sisendi CSS-string, et lisada @theme-muutujaid, kohandatud reegleid või direktiive. Uued teemaväärtused muutuvad automaatselt utiliitideks:

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)

Kõigi teemade nimeruumide loendi leiad jaotisest Teema.

Massiivisisend

Üherealisest koodist keerukama puhul edasta massiiv võtmetega content ja css. Siin saab määratleda komponente märksõnaga @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;
        }
    ',
]);

Massiivivorm aktsepteerib ka võtmeid minify, importPaths, cache ja cacheTtl. Sisendvormingute kohta vaata Kasutus ning käskude @apply, @theme, @utility ja teiste kohta vaata Direktiivid.

Faili kirjutamine

generate() tagastab stringi, seega saab laaditabeli kirjutada ühe koodireaga:

use TailwindPHP\tw;

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

Kataloogi skannivate failipõhiste koostamiste ja jälgimisrežiimi jaoks kasuta selle asemel CLI. See kasutab samu @tailwindcss/cli koostamisvalikuid, kuid selle sisuskannimine erineb praegu Tailwind omast; skannitavate failide loendi leiad lehelt CLI.

Minimeerimine tootmiskeskkonna jaoks

Väljundi tihendamiseks genereerimise ajal edasta minify => true või kutsu olemasoleval stringil välja tw::minify():

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

Minimeerija eemaldab kommentaarid, koondab tühikud, lühendab kuueteistkümnendvärve (#ffffff kujule #fff) ja eemaldab nullväärtustelt ühikud (0px kujule 0). Vahemälustamise valikute kohta vaata jaotist Vahemällu salvestamine ja minimeerimine.

Järgmised sammud

• Kasutus — genereerimise töövoog, sisu skannimine ja sisendvormingud.
• Klassiutiliidid — cn(), merge(), join() ja variants().
• Pluginad — tüpograafia, vormid ja kohandatud pluginad.
• API — kogu tw-liides ja korduskasutatavad kompilaatoriinstantsid.
• CLI — failipõhised koostamised ja jälgimine ilma Node.js-ita.