# Impordid ja virtuaalmoodulid

TailwindPHP lahendab `@import` reeglid enne kompileerimist. Impordid võivad viidata sisseehitatud virtuaalmoodulitele (`tailwindcss` ja teised), kettal asuvatele failidele valiku `importPaths` kaudu või mis tahes sisule, mille tagastab kohandatud lahendaja.

## Virtuaalmoodulid

`@import "tailwindcss"` on enamiku projektide lähtekoht. See laieneb neljaks alltoodud reaks: kihi järjekorra deklaratsiooniks ja kolmeks alamimpordiks, millest igaüks määratakse oma kaskaadikihti:

```css
@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css" layer(utilities);
```

Iga alamimport on samuti virtuaalmoodul, mida saab eraldi importida. Saadaolevad virtuaalmoodulid on järgmised:

| Moodul | Sisu |
|--------|----------|
| `tailwindcss` | Täielik komplekt: teema + Preflight + utiliidid. |
| `tailwindcss/theme.css` | Ainult teemamuutujad (värvid, vahekauguste alusväärtus, murdepunktid jne). |
| `tailwindcss/preflight.css` | Preflighti baastasemel lähtestus. |
| `tailwindcss/utilities.css` | Utiliitide kiht. |
| `tw-animate-css` | `tw-animate-css` animatsiooniutiliidid. |

Osade eraldi importimine võimaldab Preflighti vahele jätta või kihtide järjekorda muuta (vt allpool).

## Animatsioonid mooduliga tw-animate-css

[tw-animate-css](https://github.com/Wombosvideo/tw-animate-css) on TailwindCSS v4 animatsiooniteek — vahetu asendus paketile `tailwindcss-animate`. See on saadaval sisseehitatud virtuaalmoodulina, nii et selle importimisel koos utiliitide kihiga kompileeritakse sisenemis- ja väljumisanimatsiooni klassid nagu kõik muudki utiliidid:

```css
@import "tw-animate-css";
@import "tailwindcss/utilities.css";
```

Animatsiooniutiliidid hõlmavad järgmist:

- **Sisenemine / väljumine** — `animate-in`, `animate-out`
- **Hajumine** — `fade-in`, `fade-out`
- **Suum** — `zoom-in`, `zoom-out`
- **Pöörlemine** — `spin-in`, `spin-out`
- **Hägu** — `blur-in`, `blur-out`
- **Liug** — `slide-in-from-top` / `-bottom` / `-left` / `-right` ja vastavad `slide-out-to-*`-klassid, lisaks RTL-i arvestavad `-start` / `-end`
- **Ajastus** — `duration-*`, `delay-*`, `repeat-1` / `repeat-infinite`, `direction-normal` / `-reverse` / `-alternate` ja `fill-mode-none` / `-forwards` / `-backwards` / `-both`
- **Esituse olek** — `running`, `paused`
- **Komponentide animatsioonid** — `accordion-down` / `accordion-up`, `collapsible-down` / `collapsible-up` ja `caret-blink`

Need klassid toimivad koos Tailwind-variantidega nagu teisedki utiliidid ning sobivad hästi shadcn/ui-dialoogide ja rippmenüüde kujundusmustritega.

## Valik `importPaths`

Et lahendada `@import` failisüsteemi põhjal, anna valik `importPaths` massiivikujulisele `generate()`-ile. See võtab vastu ühe tee, kataloogi või nende massiivi.

```php
use TailwindPHP\tw;

// Single file
$css = tw::generate([
    'content'     => '<div class="flex btn">Hello</div>',
    'importPaths' => '/path/to/styles.css',
]);

// Directory (loads all .css files alphabetically)
$css = tw::generate([
    'content'     => '<div class="flex btn">Hello</div>',
    'importPaths' => '/path/to/css/',
]);

// Multiple paths — files and directories
$css = tw::generate([
    'content'     => '<div class="flex btn card">Hello</div>',
    'importPaths' => [
        '/path/to/base.css',
        '/path/to/components/',
    ],
]);

// Combine with inline css
$css = tw::generate([
    'content'     => '<div class="flex btn custom">Hello</div>',
    'css'         => '.custom { color: red; }',
    'importPaths' => '/path/to/styles.css',
]);
```

### Pesastatud impordid

Laaditud failis olevad impordid lahendatakse selle faili asukoha suhtes. Kui `/path/to/styles.css` sisaldab `@import "./components/buttons.css"`, lahendatakse tee asukohas `/path/to/`:

```css
/* /path/to/styles.css */
@import "tailwindcss";
@import "./components/buttons.css";
@import "./components/cards.css";

@theme {
    --color-brand: #3b82f6;
}
```

### Duplikaatide eemaldamine

Sama faili või virtuaalmooduli korduv importimine ei tee pärast esimest korda midagi — korduvad read `@import "tailwindcss"` või kaks faili, mis impordivad sama osafaili, eemaldatakse automaatselt duplikaatidena. See aitab vältida ka ringimporditud faile.

## Kohandatud lahendaja

Virtuaalsete failisüsteemide, andmebaaside või mis tahes muu kui failisüsteemi allika korral anna kutsutav funktsioon argumendiks `importPaths`. See saab impordi URI ja baaskataloogi, mille suhtes importi lahendatakse, ning tagastab CSS või `null`:

```php
use TailwindPHP\tw;

$css = tw::generate([
    'content'     => '<div class="flex virtual-class">Hello</div>',
    'importPaths' => function (?string $uri, ?string $fromFile): ?string {
        if ($uri === null) {
            // Entry CSS — returned when no file is supplied
            return '@import "tailwindcss"; @import "custom.css";';
        }
        if ($uri === 'custom.css') {
            return '.virtual-class { color: purple; }';
        }
        return null; // Unknown imports are silently skipped
    },
]);
```

Kui `$uri` on `null` (esimene väljakutse, mille teine argument on samuti `null`), tagasta alguspunkti CSS. Mis tahes muu URI korral tagasta selle sisu kujul CSS või tagasta `null`, et jätkata otsingut failisüsteemist. Kui midagi ei leita, jäetakse import vaikselt vahele.

## Preflight

Preflight on Tailwind-i arvamuslik baastasemel lähtestus, mis põhineb teegil [modern-normalize](https://github.com/sindresorhus/modern-normalize). See ühtlustab brauserite erinevusi, et utiliidid toimiksid etteaimatavalt. Muu hulgas eemaldab see vaikimisi veerised, eemaldab pealkirjade ja loendite erikujunduse, muudab pildid plokielementideks, lähtestab ääriste stiilid nii, et äärise joonistab ainult `border-width`, ning paneb nupud pärima fondi.

Preflight sisaldub paketis `@import "tailwindcss"` — kui impordid kogu komplekti, on see juba kasutusel:

```php
use TailwindPHP\tw;

$css = tw::generate([
    'content' => '<div class="flex p-4">Hello</div>',
    'css'     => '@import "tailwindcss";',
]);
```

### Preflighti laiendamine

Lisa Preflighti peale oma baastaseme stiilid valikuga `@layer base`:

```php
use TailwindPHP\tw;

$css = tw::generate([
    'content' => '<article><h1>Title</h1><p>Content</p></article>',
    'css'     => '
        @import "tailwindcss";
        @layer base {
            h1 { font-size: var(--text-2xl); }
            h2 { font-size: var(--text-xl); }
            a  { color: var(--color-blue-600); text-decoration-line: underline; }
        }
    ',
]);
```

### Preflighti väljalülitamine

Olemasolevasse projekti integreerimisel impordi ainult vajalikud osad ja jäta Preflighti rida välja:

```php
use TailwindPHP\tw;

$css = tw::generate([
    'content' => '<div class="flex p-4">Hello</div>',
    'css'     => '
        @layer theme, base, components, utilities;
        @import "tailwindcss/theme.css" layer(theme);
        @import "tailwindcss/utilities.css" layer(utilities);
    ',
]);
```

## Impordimodifikaatorid

Kui impordid Tailwind-i faile ükshaaval, lisa modifikaatorid importidele, mida need mõjutavad:

```css
/* Assign the import to a cascade layer */
@import "tailwindcss/utilities.css" layer(utilities);

/* prefix affects both theme variables and utilities */
@import "tailwindcss/theme.css" layer(theme) prefix(tw);
@import "tailwindcss/utilities.css" layer(utilities) prefix(tw);

/* important affects utilities */
@import "tailwindcss/utilities.css" layer(utilities) important;

/* theme(static) or theme(inline) affects theme variables */
@import "tailwindcss/theme.css" layer(theme) theme(static);

/* theme(reference): utilities use the variables with a fallback, no :root block */
@import "tailwindcss/theme.css" layer(theme) theme(reference);
```

## Viiteimpordid

`@import "…" reference` laadib faili ainult selle definitsioonide jaoks: `@theme` väärtused ning selles määratletud `@utility` ja `@custom-variant` on kasutatavad, kuid fail ei väljasta oma CSS. See on sama, mis faili sisu ümbritsemine märgendiga `@media reference { … }`, mille saad ka otse kirjutada:

```css
@import "tailwindcss/utilities.css";

@media reference {
    @theme {
        --color-brand: #f00;
    }
}
```

`bg-brand` kompileeritakse seejärel kujule `background-color: var(--color-brand, #f00);` ja deklaratsiooni `--color-brand` ei väljastata.

Käesolevas versioonis on kaks piirangut ([#14](https://github.com/inline0/tailwindphp/issues/14)):

- Paiguta viiteimpordid ja `@media reference`-plokid **pärast** `@import`-i `tailwindcss` või `tailwindcss/utilities.css` sees. Kui need paiknevad enne, jääb kogu väljund tühjaks.
- `reference`-il sisseehitatud virtuaalmoodulite (`@import "tailwindcss" reference;`) puhul veel mõju pole: teema, Preflight ja utiliidid väljastatakse ikkagi.

Jätka teemamuutujate kohta lehelt [Theme](https://tailwindphp.inline0.dev/et/docs/usage/theme) või vaata, kuidas määrata skannitavaid klassinimesid lehelt [@source](https://tailwindphp.inline0.dev/et/docs/usage/source).