# Importai ir virtualieji moduliai

TailwindPHP prieš kompiliavimą išsprendžia `@import` taisykles. Importai gali nurodyti integruotus virtualiuosius modulius (`tailwindcss` ir kitus), diske esančius failus per parinktį `importPaths` arba bet ką, ką grąžina tinkintas sprendiklis.

## Virtualieji moduliai

`@import "tailwindcss"` yra daugelio projektų naudojamas pradinis failas. Jis išplečiamas į keturias toliau pateiktas eilutes: pakopų sluoksnių tvarkos deklaraciją ir tris importus, kurių kiekvienas priskirtas savo pakopų sluoksniui:

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

Kiekvienas importas pats yra virtualusis modulis, kurį galima importuoti atskirai. Galimi virtualieji moduliai:

| Modulis | Turinys |
|--------|----------|
| `tailwindcss` | Visas rinkinys: tema + Preflight + paslaugos. |
| `tailwindcss/theme.css` | Tik temos kintamieji (spalvos, tarpai, bazinės reikšmės, lūžio taškai ir kt.). |
| `tailwindcss/preflight.css` | Pradinis Preflight nustatymas iš naujo. |
| `tailwindcss/utilities.css` | Paslaugų sluoksnis. |
| `tw-animate-css` | Animacijos paslaugos `tw-animate-css`. |

Importuodami dalis atskirai galite praleisti Preflight arba pakeisti sluoksnių tvarką (žr. toliau).

## Animacijos su tw-animate-css

[tw-animate-css](https://github.com/Wombosvideo/tw-animate-css) yra animacijų biblioteka TailwindCSS v4 – tiesiogiai pakeičiama biblioteka `tailwindcss-animate`. Ji pateikiama kaip integruotasis virtualusis modulis, todėl importavus ją kartu su paslaugų sluoksniu įėjimo ir išėjimo animacijų klasės kompiliuojamos kaip bet kuri kita paslauga:

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

Animacijos paslaugos apima:

- **Įėjimas / išėjimas** – `animate-in`, `animate-out`
- **Išnykimas / pasirodymas** – `fade-in`, `fade-out`
- **Priartinimas** – `zoom-in`, `zoom-out`
- **Sukimas** – `spin-in`, `spin-out`
- **Suliejimas** – `blur-in`, `blur-out`
- **Slinkimas** – `slide-in-from-top` / `-bottom` / `-left` / `-right` ir atitinkamas `slide-out-to-*`, taip pat RTL pritaikyti `-start` / `-end`
- **Laikas** – `duration-*`, `delay-*`, `repeat-1` / `repeat-infinite`, `direction-normal` / `-reverse` / `-alternate` ir `fill-mode-none` / `-forwards` / `-backwards` / `-both`
- **Atkūrimo būsena** – `running`, `paused`
- **Komponentų animacijos** – `accordion-down` / `accordion-up`, `collapsible-down` / `collapsible-up` ir `caret-blink`

Šias klases galima jungti su variantais Tailwind kaip ir bet kurią kitą paslaugą, todėl jos puikiai tinka shadcn/ui dialogų ir išskleidžiamųjų sąrašų šablonams.

## Parinktis `importPaths`

Kad `@import` būtų išspręstas pagal failų sistemą, perduokite `importPaths` masyvo formoje `generate()`. Priimamas vienas kelias, katalogas arba jų masyvas.

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

### Įdėtieji importai

Įkeliamame faile esančių importų keliai sprendžiami santykinai su tuo failu. Jei `/path/to/styles.css` yra `@import "./components/buttons.css"`, kelias sprendžiamas pagal `/path/to/`:

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

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

### Dublikatų pašalinimas

Tą patį failą ar virtualų modulį importuojant daugiau nei vieną kartą, po pirmo karto nieko nebedaroma — pasikartojančios `@import "tailwindcss"` eilutės arba du failai, importuojantys tą patį dalinį failą, automatiškai pašalinami kaip dublikatai. Taip pat apsaugoma nuo ciklinių importų.

## Pasirinktinis sprendiklis

Virtualioms failų sistemoms, duomenų bazėms ar bet kokiam ne failų sistemos šaltiniui kaip `importPaths` perduokite iškviečiamą funkciją. Jai pateikiamas importo URI ir bazinis katalogas, pagal kurį sprendžiamas importas; ji grąžina CSS arba `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
    },
]);
```

Kai `$uri` yra `null` (pirmasis iškvietimas, kurio antrasis argumentas taip pat yra `null`), grąžinkite įrašo CSS reikšmę. Bet kuriam kitam URI grąžinkite jo turinį CSS arba `null`, kad būtų ieškoma failų sistemoje; jei nieko nerandama, importas tyliai praleidžiamas.

## Išankstinis nustatymas

Preflight yra griežta Tailwind bazinių stilių atstata, sukurta remiantis [modern-normalize](https://github.com/sindresorhus/modern-normalize). Ji suvienodina naršyklių skirtumus, kad pagalbinės klasės veiktų nuspėjamai. Be kita ko, pašalina numatytąsias paraštes, panaikina antraščių ir sąrašų stilius, nustato blokinį vaizdų rodymą, atstato kraštinių stilius, kad kraštinę pieštų tik `border-width`, ir leidžia mygtukams paveldėti šriftus.

Preflight įtrauktas į `@import "tailwindcss"` — jei importuojate visą paketą, jį jau turite:

```php
use TailwindPHP\tw;

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

### Preflight plėtiniai

Pridėkite savo bazinius stilius ant Preflight stilių naudodami `@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; }
        }
    ',
]);
```

### Preflight išjungimas

Integruodami į esamą projektą, importuokite tik reikiamas dalis ir praleiskite Preflight eilutę:

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

## Importo modifikatoriai

Importuojant Tailwind failus atskirai, modifikatorius nurodykite prie importų, kuriems jie taikomi:

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

## Nuorodiniai importai

`@import "…" reference` įkelia failą tik jo apibrėžtims: jame esančias `@theme` reikšmes, `@utility` ir `@custom-variant` apibrėžtis galima naudoti, tačiau pats failas neišveda jokio CSS. Tai tas pats, kas failo turinį įterpti į `@media reference { … }`; galite tai užrašyti ir tiesiogiai:

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

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

`bg-brand` tada sukompiliuojamas į `background-color: var(--color-brand, #f00);`, o jokia `--color-brand` deklaracija neišvedama.

Du dabartinio leidimo apribojimai ([#14](https://github.com/inline0/tailwindphp/issues/14)):

- Nuorodinius importus ir `@media reference` blokus dėkite **po** `@import`, priklausančio `tailwindcss` arba `tailwindcss/utilities.css`. Jei jie įterpti prieš jį, visa išvestis būna tuščia.
- `reference` šiuo metu neveikia integruotuose virtualiuose moduliuose (`@import "tailwindcss" reference;`): tema, Preflight ir pagalbinės klasės vis tiek išvedamos.

Toliau skaitykite apie [Theme](https://tailwindphp.inline0.dev/lt/docs/usage/theme) temos kintamiesiems arba [@source](https://tailwindphp.inline0.dev/lt/docs/usage/source), kuriuo valdoma, kurie failai tikrinami ieškant klasių pavadinimų.