# Importi un virtuālie moduļi

TailwindPHP pirms kompilēšanas atrisina `@import` noteikumus. Importi var norādīt uz iebūvētiem virtuāliem moduļiem (`tailwindcss` un citiem), diska failiem, izmantojot opciju `importPaths`, vai jebkuru resursu, ko atgriež pielāgots atrisinātājs.

## Virtuālie moduļi

`@import "tailwindcss"` ir sākumpunkts, ko izmanto lielākā daļa projektu. Tas izvēršas četrās tālāk redzamajās rindās — slāņu secības deklarācijā un trīs apakšimportos, no kuriem katrs piešķirts savam kaskādes slānim:

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

Katrs apakšimports pats par sevi ir virtuāls modulis, ko var importēt atsevišķi. Pieejamie virtuālie moduļi:

| Modulis | Saturs |
|--------|----------|
| `tailwindcss` | Pilna pakotne: motīvs + Preflight + utilītas. |
| `tailwindcss/theme.css` | Tikai motīva mainīgie (krāsas, atstarpju pamatvērtības, pārtraukumpunkti u.c.). |
| `tailwindcss/preflight.css` | Preflight pamata atiestatījums. |
| `tailwindcss/utilities.css` | Utilītu slānis. |
| `tw-animate-css` | `tw-animate-css` animāciju utilītas. |

Importējot daļas atsevišķi, var izlaist Preflight vai mainīt slāņu secību (skatiet tālāk).

## Animācijas ar tw-animate-css

[tw-animate-css](https://github.com/Wombosvideo/tw-animate-css) ir TailwindCSS v4 animāciju bibliotēka — tūlītēji izmantojama alternatīva `tailwindcss-animate`. Tā ir pieejama kā iebūvēts virtuālais modulis, tāpēc, importējot to kopā ar utilītu slāni, tās ienākšanas un iziešanas animāciju klases tiek kompilētas tāpat kā jebkura cita utilīta:

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

Animāciju utilītas ietver:

- **Ienākšana / iziešana** — `animate-in`, `animate-out`
- **Pakāpeniska parādīšanās** — `fade-in`, `fade-out`
- **Tālummaiņa** — `zoom-in`, `zoom-out`
- **Griešanās** — `spin-in`, `spin-out`
- **Aizmiglojums** — `blur-in`, `blur-out`
- **Slīdēšana** — `slide-in-from-top` / `-bottom` / `-left` / `-right` un atbilstošais `slide-out-to-*`, kā arī rakstīšanas virzienam pielāgotie `-start` / `-end`
- **Laika iestatījumi** — `duration-*`, `delay-*`, `repeat-1` / `repeat-infinite`, `direction-normal` / `-reverse` / `-alternate` un `fill-mode-none` / `-forwards` / `-backwards` / `-both`
- **Atskaņošanas stāvoklis** — `running`, `paused`
- **Komponentu animācijas** — `accordion-down` / `accordion-up`, `collapsible-down` / `collapsible-up` un `caret-blink`

Šīs klases var kombinēt ar Tailwind variantiem tāpat kā jebkuru citu utilītu, tāpēc tās ir uzreiz piemērotas shadcn/ui dialoga un nolaižamo izvēļņu modeļiem.

## Opcija `importPaths`

Lai atrisinātu `@import`, izmantojot failu sistēmu, padodiet `importPaths` masīva formā `generate()`. Tā pieņem vienu ceļu, direktoriju vai to masīvu.

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

### Ligzdoti importi

Importi ielādētā failā tiek atrisināti attiecībā pret šo failu. Ja `/path/to/styles.css` satur `@import "./components/buttons.css"`, ceļš tiek atrisināts attiecībā pret `/path/to/`:

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

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

### Dublikātu novēršana

Pēc pirmās importēšanas atkārtota tā paša faila vai virtuālā moduļa importēšana neko nedara — atkārtotas `@import "tailwindcss"` rindas vai divi faili, kas importē vienu un to pašu daļfailu, tiek automātiski apvienoti. Tas arī novērš cikliskus importus.

## Pielāgots atrisinātājs

Virtuālām failu sistēmām, datubāzēm vai citiem avotiem, kas nav failu sistēmas, padodiet izsaucamu funkciju kā `importPaths`. Tā saņem importa URI un pamata direktoriju, attiecībā pret kuru imports tiek atrisināts, un atgriež CSS vai `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
    },
]);
```

Ja `$uri` ir `null` (pirmais izsaukums, arī otrais arguments ir `null`), atgrieziet sākuma CSS. Jebkuram citam URI atgrieziet tā saturu CSS vai `null`, lai izmantotu failu sistēmas meklēšanu; ja nekas netiek atrasts, imports tiek klusi izlaists.

## Preflight

Preflight ir Tailwind izteikts pamata atiestatījums, kas veidots uz [modern-normalize](https://github.com/sindresorhus/modern-normalize). Tas izlīdzina pārlūkprogrammu atšķirības, lai utilītas darbotos paredzami. Cita starpā tas noņem noklusējuma ārējās atkāpes, atceļ virsrakstu un sarakstu stilu, attēlus attēlo kā bloka elementus, atiestata apmaļu stilus, lai apmali zīmētu tikai `border-width`, un ļauj pogām mantot fontus.

Preflight ir iekļauts `@import "tailwindcss"` — ja importējat visu pakotni, tas jau ir pieejams:

```php
use TailwindPHP\tw;

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

### Preflight paplašināšana

Pievienojiet savus pamata stilus virs Preflight, izmantojot `@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 atspējošana

Integrējot esošā projektā, importējiet tikai nepieciešamās daļas un izlaidiet Preflight rindu:

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

## Importu modifikatori

Importējot Tailwind failus atsevišķi, modifikatorus pievienojiet importiem, uz kuriem tie attiecas:

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

## Atsauces importi

`@import "…" reference` ielādē failu tikai definīcijām: tajā esošās `@theme` vērtības, `@utility` un `@custom-variant` definīcijas ir izmantojamas, taču pats fails neģenerē nekādu CSS. Tas ir tas pats, kas ietvert faila saturu `@media reference { … }`, ko varat arī uzrakstīt tieši:

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

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

`bg-brand` pēc tam tiek kompilēts uz `background-color: var(--color-brand, #f00);`, un netiek ģenerēta nekāda deklarācija `--color-brand`.

Divi ierobežojumi pašreizējā laidienā ([#14](https://github.com/inline0/tailwindphp/issues/14)):

- Atsauces importus un `@media reference` blokus ievietojiet **pēc** `@import` elementa `tailwindcss` vai `tailwindcss/utilities.css`. Ja tie ievietoti pirms tā, visa izvade ir tukša.
- `reference` iebūvētajiem virtuālajiem moduļiem (`@import "tailwindcss" reference;`) pagaidām neko nemaina: motīvs, Preflight un utilītas joprojām tiek ģenerēti.

Turpiniet sadaļā [Motīvs](https://tailwindphp.inline0.dev/lv/docs/usage/theme), lai uzzinātu par motīva mainīgajiem, vai sadaļā [@source](https://tailwindphp.inline0.dev/lv/docs/usage/source), lai noteiktu, kuros failos tiek meklēti klašu nosaukumi.