Οδηγίες

Οι οδηγίες είναι κανόνες at-rule με πρόθεμα @ που γράφετε στο αρχείο εισόδου CSS για να συνθέσετε, να επεκτείνετε και να καθορίσετε τη σειρά της εξόδου του Tailwind. Αυτή η σελίδα καλύπτει τα @apply, @utility, @variant, @custom-variant και @layer. Το @theme καλύπτεται στην ενότητα Θέμα· το @plugin στην ενότητα Πρόσθετα· και το @source στην ενότητα @source.

@apply

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

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, όχι λίστα βοηθητικών κλάσεων, οπότε το TailwindPHP δεν το επιλύει· η τοποθέτηση ενός mixin και βοηθητικών κλάσεων στο ίδιο @apply προκαλεί σφάλμα (You cannot use @apply with both mixins and utilities…). Οι κανόνες mixin προς το παρόν παραλείπονται από το αποτέλεσμα αντί να μεταφέρονται αυτούσιοι (#12).

@utility

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

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

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

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

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

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

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

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

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

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

@variant

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

.card {
    color: red;

    @variant hover {
        color: blue;
    }

    @variant dark {
        color: white;
    }
}

.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 μέσα σε παρενθέσεις.

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

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

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

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

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

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

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

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

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

@layer

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

@layer theme, base, components, utilities;

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

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 καλύπτονται στην ενότητα Εισαγωγές.

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

• Θέμα — @theme, μεταβλητές και συναρτήσεις θέματος.
• Εισαγωγές — @import, εικονικές μονάδες και τροποποιητές layer().
• Πρόσθετα — η οδηγία @plugin και το API του πρόσθετου.
• @source — ελέγξτε ποια αρχεία και ποιες κλάσεις σαρώνονται.