Kom godt i gang

Installation

composer require tailwindphp/tailwindphp

TailwindPHP kræver PHP 8.2 eller nyere med udvidelserne ctype og mbstring samt Composer. Begge udvidelser følger med de fleste PHP-builds og officielle Docker-images; composer.json viser dem endnu ikke (#11), så en build uden dem installerer pakken, men fejler under kørsel. Der er ingen afhængighed af Node.js, intet buildtrin og ingen npm i dit Docker-image eller CI. Kør blot composer require, og kald API.

Generér din første 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() scanner markup, udtrækker de klassenavne, den finder, og udsender kun det CSS, som klasserne behøver — intet andet. Uden et ekstra argument bruger den et standard-@import "tailwindcss", som indlæser temaet, Preflight og utilities-laget.

Tilpas via en CSS-streng

Angiv en inputstreng CSS som det andet argument for at tilføje @theme-variabler, brugerdefinerede regler eller direktiver. Nye temaværdier bliver automatisk til 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 for den fulde liste over temanavneområder.

Array-input

Til alt ud over en enkelt linje skal du angive et array med nøglerne content og css. Her kan du definere 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;
        }
    ',
]);

Arrayformen accepterer også minify, importPaths, cache og cacheTtl. Se Brug for inputformater og Direktiver for @apply, @theme, @utility og lignende.

Skriv til en fil

generate() returnerer en streng, så det kræver kun én linje at skrive et stylesheet:

use TailwindPHP\tw;

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

Til filbaserede builds, der scanner et skabelonbibliotek, og til overvågningstilstand skal du i stedet bruge CLI. Den bruger de samme buildindstillinger @tailwindcss/cli, men indholdsscanningen adskiller sig i øjeblikket fra Tailwind; siden CLI beskriver, hvad den scanner.

Minimer til produktion

Angiv minify => true for at komprimere outputtet under genereringen, eller kald tw::minify() på en eksisterende streng:

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

Minimeringsværktøjet fjerner kommentarer, samler mellemrum, forkorter hex-farver (#ffffff til #fff) og fjerner enheder fra nulværdier (0px til 0). Se Caching og minimering for cacheindstillinger.

Næste trin

• Brug — genereringsworkflowet, indholdsscanning og inputformater.
• Klasseutilities — cn(), merge(), join() og variants().
• Plugins — typografi, formularer og brugerdefinerede plugins.
• API — hele tw-overfladen og genbrugelige compilerinstanser.
• CLI — filbaserede builds og overvågningsbuilds uden Node.js.