# Οδηγίες

Οι οδηγίες είναι κανόνες at-rule με πρόθεμα `@` που γράφετε στο αρχείο εισόδου CSS για να συνθέσετε, να επεκτείνετε και να καθορίσετε τη σειρά της εξόδου του Tailwind. Αυτή η σελίδα καλύπτει τα `@apply`, `@utility`, `@variant`, `@custom-variant` και `@layer`. Το `@theme` καλύπτεται στην ενότητα [Θέμα](https://tailwindphp.inline0.dev/el/docs/usage/theme)· το `@plugin` στην ενότητα [Πρόσθετα](https://tailwindphp.inline0.dev/el/docs/plugins)· και το `@source` στην ενότητα [@source](https://tailwindphp.inline0.dev/el/docs/usage/source).

## `@apply`

Το `@apply` ενσωματώνει τις δηλώσεις υπαρχουσών βοηθητικών κλάσεων στον δικό σας επιλογέα. Χρησιμοποιήστε το για να προσθέσετε στυλ βοηθητικών κλάσεων σε μια σημασιολογική κλάση, ακόμη και μέσα σε ένθετους επιλογείς και ερωτήματα πολυμέσων.

```php
use TailwindPHP\tw;

$css = tw::generate('<div class="btn">', '
    @import "tailwindcss";

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

    .btn {
        @apply px-4 py-2 rounded-lg bg-brand text-white;
    }
');
```

Οι παραλλαγές λειτουργούν μέσα σε λίστα `@apply` — το `@apply bg-blue-500 hover:bg-blue-600;` επεκτείνει την κατάσταση `:hover`, ενώ προθέματα προσαρμοστικού σχεδιασμού όπως το `@apply px-4 md:px-6 lg:px-8;` παράγουν τους αντίστοιχους κανόνες `@media`. Υποστηρίζεται επίσης ο τροποποιητής important (`@apply !flex;`). Υποστηρίζονται ένθετοι επιλογείς, επομένως ένας κανόνας όπως ο `.card { h2 { @apply text-xl font-bold; } }` εφαρμόζει βοηθητικές κλάσεις στο ένθετο `h2`.

Το `@apply` είναι δήλωση: `@apply px-4 { … }` με σώμα προκαλεί σφάλμα. Ένα `@apply` που περιέχει μόνο παυλοειδή αναγνωριστικά (`@apply --my-mixin;`) είναι ένα CSS mixin από το προσχέδιο mixins [CSS](https://drafts.csswg.org/css-mixins-1/#apply-rule), όχι λίστα βοηθητικών κλάσεων, οπότε το TailwindPHP δεν το επιλύει· η τοποθέτηση ενός mixin και βοηθητικών κλάσεων στο ίδιο `@apply` προκαλεί σφάλμα (`You cannot use @apply with both mixins and utilities…`). Οι κανόνες mixin προς το παρόν παραλείπονται από το αποτέλεσμα αντί να μεταφέρονται αυτούσιοι ([#12](https://github.com/inline0/tailwindphp/issues/12)).

## `@utility`

Το `@utility` καταχωρίζει μια προσαρμοσμένη βοηθητική κλάση που συμμετέχει στη μηχανή του Tailwind — ταξινομείται στο επίπεδο `utilities` και δέχεται παραλλαγές όπως κάθε ενσωματωμένη κλάση. Μια στατική βοηθητική κλάση έχει σταθερό σώμα:

```css
@utility content-auto {
    content-visibility: auto;
}
```

Επειδή είναι κανονική βοηθητική κλάση, οι παραλλαγές συνδυάζονται αυτόματα (`hover:content-auto`, `md:content-auto`). Το σώμα μπορεί να χρησιμοποιεί και το `@apply` και ένθετους επιλογείς:

```css
@utility btn-primary {
    @apply px-4 py-2 bg-blue-500 text-white rounded;
}

@utility card {
    color: red;
    &:hover { color: blue; }
}
```

Μια λειτουργική βοηθητική κλάση χρησιμοποιεί επίθημα `-*` στο όνομά της και διαβάζει την αντιστοιχισμένη τιμή με το `--value()`:

```css
@theme {
    --gutter-wide: 3rem;
}

@utility gutter-* {
    padding-inline: --value(--gutter-*, [length]);
    padding-inline: --spacing(--value(integer));
}
```

Το `--value()` επιλύει την τιμή του υποψηφίου με τη σειρά, αντιπαραβάλλοντάς τη με κάθε πηγή: έναν χώρο ονομάτων θέματος (`--gutter-*`), μια αυθαίρετη τιμή με τύπο δεδομένων (`[length]`) ή έναν απλό τύπο τιμής (`integer`, `number`, `percentage`, `ratio`). Οι δηλώσεις των οποίων το `--value()` δεν επιλύεται απορρίπτονται, οπότε αν στοιβάξετε δηλώσεις δημιουργείται αλυσίδα εφεδρικών τιμών:

| Κλάση | Έξοδος |
|---|---|
| `gutter-wide` | `padding-inline: var(--gutter-wide);` |
| `gutter-[5px]` | `padding-inline: 5px;` |
| `gutter-4` | `padding-inline: calc(var(--spacing) * 4);` |

Το `--modifier()` επιλύει το τμήμα μετά από ένα `/` με τον ίδιο τρόπο: με `line-height: --modifier(integer);` στο σώμα, το `gutter-4/7` εκπέμπει επίσης `line-height: 7`. Τα ονόματα των βοηθητικών εργαλείων ακολουθούν τους κανόνες TailwindCSS v4.3.3: το πολύ ένα `/`, το `%` μόνο στο τέλος μετά από ψηφίο και τελείες μόνο ανάμεσα σε ψηφία.

## `@variant`

Το `@variant` εφαρμόζει μια παραλλαγή στις δηλώσεις μέσα στο δικό σας CSS, χωρίς να ορίζει βοηθητικό εργαλείο:

```css
.card {
    color: red;

    @variant hover {
        color: blue;
    }

    @variant dark {
        color: white;
    }
}
```

```css
.card {
  color: red;
}
@media (hover: hover) {
  .card:hover {
    color: #00f;
  }
}
@media (prefers-color-scheme: dark) {
  .card {
    color: #fff;
  }
}
```

Οι παραλλαγές μπορούν να συνδυαστούν (`@variant hover:focus`), να παρατεθούν με κόμματα, να εμφωλευτούν η μία μέσα στην άλλη και να ονομάζουν τα δικά σας `@custom-variant`. Ένα ανώτατου επιπέδου `@variant` χωρίς σώμα ή με `@slot` αντιμετωπίζεται ως `@custom-variant` για λόγους συμβατότητας προς τα πίσω.

## `@custom-variant`

Το `@custom-variant` ορίζει μια νέα παραλλαγή που μπορείτε να προσθέσετε ως πρόθεμα σε οποιοδήποτε βοηθητικό εργαλείο. Η συνοπτική μορφή ονομάζει την παραλλαγή και δίνει έναν επιλογέα ή έναν κανόνα at-rule μέσα σε παρενθέσεις.

Μια παραλλαγή λίστας επιλογέων χρησιμοποιεί το `&` για το στοιχείο:

```css
@custom-variant hocus (&:hover, &:focus);
```

Το `hocus:bg-blue-500` εκπέμπει έπειτα και τους κανόνες `:hover` και `:focus`. Η μορφή χαρακτηριστικού λειτουργεί με τον ίδιο τρόπο:

```css
@custom-variant loading (&[data-loading="true"]);
```

Μια παραλλαγή at-rule περικλείει τα βοηθητικά εργαλεία που ταιριάζουν μέσα σε αυτό το at-rule:

```css
@custom-variant tablet (@media (min-width: 600px));
```

Οι προσαρμοσμένες παραλλαγές συνδυάζονται με τις ενσωματωμένες — το `sm:hocus:bg-blue-500` εμφωλεύει τον επιλογέα `hocus` μέσα στο ερώτημα πολυμέσων `sm`. Για πιο σύνθετες περιπτώσεις, χρησιμοποιήστε τη μορφή block, όπου το `@slot` υποδεικνύει το σημείο εισαγωγής των δηλώσεων του βοηθητικού εργαλείου:

```css
@custom-variant child {
    & > * {
        @slot;
    }
}

@custom-variant sidebar-open {
    .sidebar-open & {
        @slot;
    }
}
```

## `@layer`

Το `@layer` ελέγχει τη σειρά του cascade με τα εγγενή επίπεδα cascade του CSS. Μια δήλωση `@layer` χωρίς περιεχόμενο ορίζει τη σειρά των επιπέδων· τα μεταγενέστερα επίπεδα υπερισχύουν ανεξάρτητα από την ειδικότητα του επιλογέα. Η κανονική σειρά του Tailwind είναι:

```css
@layer theme, base, components, utilities;
```

Αυτό ακριβώς ρυθμίζει εσωτερικά το `@import "tailwindcss"`. Μπορείτε να δηλώσετε τη δική σας σειρά ή να τη μοιράσετε σε πολλές δηλώσεις (`@layer reset, base;` και μετά `@layer components, utilities;`) και να αντιστοιχίσετε κανόνες σε ένα επώνυμο επίπεδο με ένα block:

```php
use TailwindPHP\tw;

$css = tw::generate('<article><h1>Title</h1></article>', '
    @import "tailwindcss";

    @layer base {
        h1 { font-size: var(--text-2xl); }
        a  { color: var(--color-blue-600); text-decoration-line: underline; }
    }
');
```

Η προσθήκη βασικών στυλ μέσω του `@layer base` τα διατηρεί κάτω από τα `components` και `utilities`, ώστε μια κλάση βοηθητικού εργαλείου να υπερισχύει πάντα των προεπιλογών του στοιχείου σας. Το ίδιο ισχύει για το `@layer components { … }`, για κλάσεις στοιχείων που πρέπει να βρίσκονται κάτω από τα βοηθητικά εργαλεία. Τα ανώνυμα επίπεδα και οι τροποποιητές `layer()` στο `@import` καλύπτονται στην ενότητα [Εισαγωγές](https://tailwindphp.inline0.dev/el/docs/usage/imports).

## Επόμενα βήματα

- [Θέμα](https://tailwindphp.inline0.dev/el/docs/usage/theme) — `@theme`, μεταβλητές και συναρτήσεις θέματος.
- [Εισαγωγές](https://tailwindphp.inline0.dev/el/docs/usage/imports) — `@import`, εικονικές μονάδες και τροποποιητές `layer()`.
- [Πρόσθετα](https://tailwindphp.inline0.dev/el/docs/plugins) — η οδηγία `@plugin` και το API του πρόσθετου.
- [@source](https://tailwindphp.inline0.dev/el/docs/usage/source) — ελέγξτε ποια αρχεία και ποιες κλάσεις σαρώνονται.