# Kezdő lépések

## Telepítés

```bash
composer require tailwindphp/tailwindphp
```

A TailwindPHP használatához PHP 8.2 vagy újabb verziója, valamint a `ctype` és a `mbstring` bővítmény szükséges, továbbá Composer. Mindkét bővítmény megtalálható a legtöbb PHP összeállításban és a hivatalos Docker képekben; a `composer.json` még nem sorolja fel őket ([#11](https://github.com/inline0/tailwindphp/issues/11)), ezért nélkülük a csomag települ, de futáskor hibát jelez. Nincs Node.js függőség, összeállítási lépés vagy npm a Docker képben vagy CI-környezetben. Csak `composer require`, majd hívja meg a API függvényt.

## Készítse el első CSS értékét

```php
<?php

require __DIR__ . '/vendor/autoload.php';

use TailwindPHP\tw;

$css = tw::generate('<div class="flex items-center p-4 bg-blue-500">Hello</div>');
```

A `generate()` átvizsgálja a jelölőnyelvet, kinyeri a talált osztályneveket, majd csak az ezekhez szükséges CSS értékeket állítja elő — semmi mást. Ha nincs második argumentum, alapértelmezett `@import "tailwindcss"` értéket használ, amely betölti a témát, a [Preflight](https://tailwindphp.inline0.dev/hu/docs/usage/imports) elemet és a segédosztályok rétegét.

## Testreszabás CSS karakterlánccal

Adjon meg második argumentumként egy bemeneti CSS karakterláncot, hogy `@theme` változókat, egyéni szabályokat vagy direktívákat adjon hozzá. Az új témabeállítások automatikusan segédosztályokká válnak:

```php
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)
```

A témanévterek teljes listájáért lásd a [Téma](https://tailwindphp.inline0.dev/hu/docs/usage/theme) oldalt.

## Tömbös bemenet

Ha nem egysoros bemenetet ad meg, használjon tömböt `content` és `css` kulcsokkal. Itt definiálhatók a komponensek a `@apply` segítségével:

```php
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;
        }
    ',
]);
```

A tömbös forma a `minify`, `importPaths`, `cache` és `cacheTtl` értékeket is elfogadja. A bemeneti formátumokért lásd a [Használat](https://tailwindphp.inline0.dev/hu/docs/usage) oldalt, a `@apply`, `@theme`, `@utility` és más direktívákért pedig a [Direktívák](https://tailwindphp.inline0.dev/hu/docs/usage/directives) oldalt.

## Fájlba írás

A `generate()` karakterláncot ad vissza, ezért a stíluslap írása egyetlen sor:

```php
use TailwindPHP\tw;

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

Sablonkönyvtárat átvizsgáló, fájlalapú összeállításokhoz és figyelő módhoz használja inkább a [CLI](https://tailwindphp.inline0.dev/hu/docs/cli) megoldást. Ugyanazokat a `@tailwindcss/cli` összeállítási beállításokat fogadja, de jelenleg másképp vizsgálja át a tartalmat, mint a(z) Tailwind; az CLI oldalon találja a beolvasott fájlok listáját.

## Tömörítés éles környezethez

Adja meg a `minify => true` értéket, hogy a generálás tömörítse a kimenetet, vagy hívja meg a `tw::minify()` függvényt egy meglévő karakterláncon:

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

A tömörítő eltávolítja a megjegyzéseket, összevonja a szóközöket, lerövidíti a hexadecimális színkódokat (`#ffffff`-ről `#fff`-re), és elhagyja a nullaértékek mértékegységeit (`0px` helyett `0`). A gyorsítótárazási beállításokért lásd a [Gyorsítótárazás és tömörítés](https://tailwindphp.inline0.dev/hu/docs/advanced/caching) oldalt.

## Következő lépések

- [Használat](https://tailwindphp.inline0.dev/hu/docs/usage) — a generálási munkafolyamat, a tartalom átvizsgálása és a bemeneti formátumok.
- [Osztálysegédek](https://tailwindphp.inline0.dev/hu/docs/class-utilities) — `cn()`, `merge()`, `join()` és `variants()`.
- [Bővítmények](https://tailwindphp.inline0.dev/hu/docs/plugins) — tipográfia, űrlapok és egyéni bővítmények.
- [API](https://tailwindphp.inline0.dev/hu/docs/api) — a teljes `tw` felület és az újrafelhasználható fordítópéldányok.
- [CLI](https://tailwindphp.inline0.dev/hu/docs/cli) — fájlalapú és figyelő összeállítások Node.js nélkül.