Darba sākšana

Instalēšana

composer require tailwindphp/tailwindphp

TailwindPHP nepieciešams PHP 8.2 vai jaunāks ar ctype un mbstring paplašinājumiem, kā arī Composer. Abi paplašinājumi ir iekļauti lielākajā daļā PHP būvējumu un oficiālajos Docker attēlos; composer.json tos vēl nenorāda (#11), tāpēc būvējumā bez tiem pakotne tiek instalēta, bet izpildlaikā rodas kļūda. Nav atkarības no Node.js, nav būvēšanas posma un nav npm jūsu Docker attēlā vai CI. Vienkārši composer require un izsauciet API.

Ģenerējiet savu pirmo 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() pārmeklē marķējumu, izgūst atrastos klašu nosaukumus un ģenerē tikai tām nepieciešamo CSS — neko vairāk. Ja otrais arguments nav norādīts, tiek izmantots noklusētais @import "tailwindcss", kas iekļauj tēmu, Preflight un utilītu slāni.

Pielāgošana, izmantojot CSS virkni

Kā otro argumentu nododiet ievades CSS virkni, lai pievienotu @theme mainīgos, pielāgotus noteikumus vai direktīvas. Jaunas tēmas vērtības automātiski kļūst par utilītām:

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)

Pilnu tēmu nosaukumvietu sarakstu skatiet sadaļā Tēma.

Masīva ievade

Visam, kas pārsniedz vienu rindiņu, nododiet masīvu ar atslēgām content un css. Šeit definējiet komponentus ar @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;
        }
    ',
]);

Masīva formā tiek pieņemtas arī minify, importPaths, cache un cacheTtl. Ievades formātus skatiet sadaļā Lietošana, bet @apply, @theme, @utility un citas direktīvas — sadaļā Direktīvas.

Rakstīšana failā

generate() atgriež virkni, tāpēc stilu lapas ierakstīšana ir paveicama vienā rindiņā:

use TailwindPHP\tw;

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

Failos balstītiem būvējumiem, kas pārmeklē veidņu direktoriju, un uzraudzības režīmam izmantojiet CLI. Tas pieņem tos pašus @tailwindcss/cli būvēšanas parametrus, taču pašlaik tā satura skenēšana atšķiras no Tailwind; pārskatā CLI ir norādīts, ko tas skenē.

Minificēšana produkcijai

Nododiet minify => true, lai ģenerēšanas laikā saspiestu izvadi, vai izsauciet tw::minify() esošai virknei:

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

Minificētājs noņem komentārus, saplacina atstarpes, saīsina heksadecimālās krāsas (#ffffff uz #fff) un noņem mērvienības nulles vērtībām (0px uz 0). Kešošanas iespējas skatiet sadaļā Kešošana un minificēšana.

Nākamās darbības

• Lietošana — ģenerēšanas darbplūsma, satura skenēšana un ievades formāti.
• Klašu utilītas — cn(), merge(), join() un variants().
• Spraudņi — tipogrāfija, veidlapas un pielāgoti spraudņi.
• API — pilns tw interfeiss un atkārtoti izmantojamas kompilatora instances.
• CLI — failos balstīti būvējumi un uzraudzība bez Node.js.