Kom igång

Installation

composer require tailwindphp/tailwindphp

TailwindPHP kräver PHP 8.2 eller senare med tilläggen ctype och mbstring samt Composer. Båda tilläggen medföljer i de flesta PHP-byggen och officiella Docker-avbildningar; composer.json listar dem inte ännu (#11), så ett bygge utan dem installerar paketet men misslyckas vid körning. Det finns inget beroende av Node.js, inget byggsteg och ingen npm i din Docker-avbildning eller CI. Kör bara composer require och anropa API.

Generera din första 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() genomsöker markupen, extraherar klassnamnen den hittar och genererar bara den CSS som klasserna behöver — inget mer. Om inget andra argument anges används ett standardvärde för @import "tailwindcss", som tar med temat, Preflight och utilities-lagret.

Anpassa via en CSS-sträng

Skicka en indatasträng för CSS som andra argument för att lägga till @theme-variabler, anpassade regler eller direktiv. Nya temavärden blir automatiskt utilities:

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)

Se Tema för hela uppsättningen av temautrymmen.

Indata som array

För allt som är mer omfattande än en enrading skickar du en array med nycklarna content och css. Här definierar du komponenter med @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;
        }
    ',
]);

Arrayformatet godtar också minify, importPaths, cache och cacheTtl. Se Användning för indatformaten och Direktiv för @apply, @theme, @utility och liknande.

Skriv till en fil

generate() returnerar en sträng, så att skriva en stilmall är en enrading:

use TailwindPHP\tw;

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

För filbaserade byggen som genomsöker en mallkatalog och för övervakningsläget använder du i stället CLI. Den tar samma byggalternativ som @tailwindcss/cli, men innehållsskanningen skiljer sig för närvarande från Tailwind; på CLI-sidan listas vad den genomsöker.

Minimera för produktion

Skicka med minify => true för att komprimera utdata vid generering, eller anropa tw::minify() på en befintlig sträng:

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

Minimeraren tar bort kommentarer, komprimerar blanksteg, förkortar hexadecimala färger (#ffffff till #fff) och tar bort enheter från nollvärden (0px till 0). Se Cachelagring och minimering för cachealternativ.

Nästa steg

• Användning — arbetsflödet för generering, innehållsskanning och indataformat.
• Klassverktyg — cn(), merge(), join() och variants().
• Insticksprogram — typografi, formulär och anpassade insticksprogram.
• API — hela tw-ytan och återanvändbara kompilatorinstanser.
• CLI — filbaserade byggen och övervakningsbyggen utan Node.js.