# Aloitus

## Asennus

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

TailwindPHP vaatii PHP-version 8.2 tai uudemman sekä laajennukset `ctype` ja `mbstring` ja lisäksi Composer. Molemmat laajennukset sisältyvät useimpiin PHP-koontiversioihin ja virallisiin Docker-kuviin; `composer.json` ei vielä luettele niitä ([#11](https://github.com/inline0/tailwindphp/issues/11)), joten ilman niitä paketin asennus onnistuu, mutta se ei toimi ajonaikana. Riippuvuutta Node.js-ohjelmaan, build-vaihetta tai npm-asennusta Docker-kuvaasi tai CI-ympäristöösi ei tarvita. Suorita vain `composer require` ja kutsu API-toimintoa.

## Luo ensimmäinen CSS

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

`generate()` skannaa merkinnät, poimii niistä löytyvät luokkien nimet ja tuottaa vain kyseisten luokkien tarvitsemat CSS-tyylit — ei mitään ylimääräistä. Jos toista argumenttia ei anneta, käytössä on oletusarvoinen `@import "tailwindcss"`, joka tuo mukaan teeman, [Preflight](https://tailwindphp.inline0.dev/fi/docs/usage/imports)-toiminnon ja apuluokkakerroksen.

## Mukauta CSS-merkkijonolla

Anna toisena argumenttina syöte-CSS-merkkijono, jolla lisäät `@theme`-muuttujia, omia sääntöjä tai direktiivejä. Uusista teema-arvoista tulee automaattisesti apuluokkia:

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

Katso [Teema](https://tailwindphp.inline0.dev/fi/docs/usage/theme), josta löydät kaikki teeman nimiavaruudet.

## Taulukkosyöte

Jos tarvitset enemmän kuin yhden rivin, anna taulukko, jossa on avaimet `content` ja `css`. Tässä voit määrittää komponentteja `@apply`-toiminnolla:

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

Taulukkomuotoinen versio hyväksyy myös `minify`, `importPaths`, `cache` ja `cacheTtl`. Katso [Käyttö](https://tailwindphp.inline0.dev/fi/docs/usage) syötemuodoista ja [Direktiivit](https://tailwindphp.inline0.dev/fi/docs/usage/directives): `@apply`, `@theme`, `@utility` ja muut.

## Kirjoita tiedostoon

`generate()` palauttaa merkkijonon, joten tyylitiedoston kirjoittaminen käy yhdellä rivillä:

```php
use TailwindPHP\tw;

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

Kun build luetaan tiedostosta ja se skannaa mallihakemiston tai käytössä on tarkkailutila, käytä sen sijaan [CLI](https://tailwindphp.inline0.dev/fi/docs/cli)-komentoa. Se hyväksyy `@tailwindcss/cli`-build-asetukset, mutta sen sisällön skannaus eroaa tällä hetkellä toiminnon Tailwind sisällön skannauksesta; CLI-sivulla kerrotaan, mitä se skannaa.

## Pienennä tuotantokäyttöä varten

Anna `minify => true`, niin tuloste pakataan muodostuksen aikana, tai kutsu `tw::minify()`-toimintoa olemassa olevalle merkkijonolle:

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

Pienennin poistaa kommentit, tiivistää välilyönnit, lyhentää heksavärit (`#ffffff` muotoon `#fff`) ja poistaa yksiköt nolla-arvoista (`0px` muotoon `0`). Katso [Välimuisti ja pienennys](https://tailwindphp.inline0.dev/fi/docs/advanced/caching) välimuistiasetuksista.

## Seuraavat vaiheet

- [Käyttö](https://tailwindphp.inline0.dev/fi/docs/usage) — luontityönkulku, sisällön skannaus ja syötemuodot.
- [Luokka-apufunktiot](https://tailwindphp.inline0.dev/fi/docs/class-utilities) — `cn()`, `merge()`, `join()` ja `variants()`.
- [Liitännäiset](https://tailwindphp.inline0.dev/fi/docs/plugins) — typografia, lomakkeet ja omat liitännäiset.
- [API](https://tailwindphp.inline0.dev/fi/docs/api) — koko `tw`-rajapinta ja uudelleenkäytettävät kääntäjäinstanssit.
- [CLI](https://tailwindphp.inline0.dev/fi/docs/cli) — tiedostopohjaiset buildit ja tarkkailutila ilman Node.js-työkalua.