# Typografialaajennus

`@tailwindcss/typography` on virallisen typografialaajennuksen 1:1-porttaus PHPlle. Se lisää `prose`-luokan ja sen muokkaimet, jotka määrittävät luettavat typografiset oletustyylit näytetylle HTML-sisällölle — otsikoille, kappaleille, listoille, lainauksille, koodille, taulukoille ja muulle — ilman, että jokaista elementtiä tarvitsee tyylitellä käsin.

## Käyttö

Lataa laajennus komennolla `@plugin` ja tuo apuohjelmakerros. Käytä sitten `prose`-luokkaa sisältöä ympäröivässä säiliössä:

```php
use TailwindPHP\tw;

$css = tw::generate(
    '<article class="prose prose-lg"><h1>Title</h1><p>Body text…</p></article>',
    '@plugin "@tailwindcss/typography"; @import "tailwindcss/utilities.css";'
);
```

Luotu `.prose`-sääntö määrittää `--tw-prose-*` mukautettua ominaisuutta (`--tw-prose-body`, `--tw-prose-headings`, `--tw-prose-links`, `--tw-prose-code`, `--tw-prose-quotes` ja muita) ja tyylittelee niiden avulla jälkeläiselementit.

## Luokat

### Koot

Kokomääritteet skaalaavat koko typografisen asteikon. Ne lisätään perusluokan `prose` rinnalle:

| Luokka | Tarkoitus |
|-------|---------|
| `prose` | Oletuskoko |
| `prose-sm` | Pieni |
| `prose-base` | Peruskoko |
| `prose-lg` | Suuri |
| `prose-xl` | Erittäin suuri |
| `prose-2xl` | 2× erittäin suuri |

```html
<article class="prose prose-xl">…</article>
```

### Väriteemat

Värimääritteet vaihtavat leipätekstissä, otsikoissa ja reunuksissa käytettävän harmaasävyn:

| Luokka | Teema |
|-------|-------|
| `prose-slate` | Liuske |
| `prose-gray` | Harmaa |
| `prose-zinc` | Sinkki |
| `prose-neutral` | Neutraali |
| `prose-stone` | Kivi |

### Käänteinen

`prose-invert` kääntää väripaletin käytettäväksi tummilla taustoilla. Yhdistä se vapaasti koko- ja värimääritteisiin:

```html
<article class="prose prose-lg prose-slate prose-invert">…</article>
```

## Asetukset

### `className`

Oletuksena laajennus luo luokan `prose`. Voit nimetä sen uudelleen asetuksella `className` — myös muokkaimet saavat uuden nimen (`markdown`, `markdown-lg`, `markdown-invert`, …). Kun asetus on määritetty, luokkia `prose` ei luoda:

```php
$css = tw::generate(
    '<article class="markdown markdown-lg">…</article>',
    '
        @plugin "@tailwindcss/typography" {
            className: "markdown";
        }
        @import "tailwindcss/utilities.css";
    '
);
```

## Huomioita

Elementtimuokkaimet, kuten `prose-headings:underline` ja `prose-a:text-blue-600`, rekisteröidään, mutta nykyisessä julkaisussa ne kääntyvät ilman elementtivalitsintaan. Siksi apuohjelma vaikuttaa koko `prose`-säiliöön sen sijaan, että se vaikuttaisi säiliön otsikoihin tai linkkeihin ([#10](https://github.com/inline0/tailwindphp/issues/10)). Tyylittele nämä elementit omilla CSS-säännöilläsi, kunnes korjaus julkaistaan.

Tämä on TailwindCSS-pohjainen v4-siirros. Jotkin alkuperäisen lisäosan v3-kohtaiset toiminnot, kuten `.dark`-valitsimeen perustuva tumma tila ja tietyt elementtivarianttien asetukset, toimivat v4-versiossa eri tavoin, eikä niitä tueta tässä. Käytä sen sijaan `prose-invert`-muunninta ja v4-variantteja.

Katso sivulta [Laajennukset](https://tailwindphp.inline0.dev/fi/docs/plugins) tiedot `@plugin`-direktiivistä ja lataamisesta.