Θέμα και προσαρμογή

Το θέμα του Tailwind είναι ένα επίπεδο σύνολο μεταβλητών CSS. Το επεκτείνετε ή το αντικαθιστάτε με ένα block @theme { … } στο CSS εισόδου σας, αναφέρεστε σε αυτές τις τιμές μέσα στο CSS μέσω των συναρτήσεων θέματος και διαβάζετε τις επιλυμένες τιμές από το PHP. Δεν υπάρχει αρχείο ρυθμίσεων JavaScript — το θέμα βρίσκεται εξ ολοκλήρου στο CSS.

Το block @theme

Ένα block @theme δηλώνει διακριτικά σχεδίασης ως προσαρμοσμένες ιδιότητες CSS. Το πρόθεμα χώρου ονομάτων κάθε μεταβλητής (--color-*, --font-*, --breakpoint-*, --spacing-*, …) υποδεικνύει στο Tailwind ποια βοηθητικά εργαλεία και ποιες παραλλαγές χρησιμοποιούν αυτό το διακριτικό.

use TailwindPHP\tw;

$css = tw::generate('<div class="bg-brand text-brand xs:flex">', '
    @import "tailwindcss";

    @theme {
        --color-brand: #3b82f6;
        --font-heading: "Inter", sans-serif;
        --breakpoint-xs: 20rem;
        --spacing-huge: 10rem;
    }
');

Κάθε διακριτικό καταχωρίζει βοηθητικά εργαλεία στον χώρο ονομάτων του. Το παραπάνω παράδειγμα καθιστά διαθέσιμα τα bg-brand, text-brand, border-brand, την οικογένεια font-heading, μια προσαρμοστική παραλλαγή xs: και τα p-huge/m-huge διαστημάτων — δημιουργούνται μόνο όταν η κλάση εμφανίζεται στο περιεχόμενό σας.

/* bg-brand resolves to the theme variable */
:root, :host {
  --color-brand: #3b82f6;
}
.bg-brand {
  background-color: var(--color-brand);
}

Το διακριτικό --breakpoint-xs καταχωρίζει απευθείας την παραλλαγή xs::

@media (min-width: 20rem) {
  .xs\:flex {
    display: flex;
  }
}

Συνήθεις χώροι ονομάτων

Εκκαθάριση χώρου ονομάτων

Η ρύθμιση ενός καθολικού χαρακτήρα χώρου ονομάτων σε initial αφαιρεί τις προεπιλεγμένες τιμές του Tailwind για αυτόν τον χώρο πριν προστεθούν τα δικά σας διακριτικά. Έτσι ξεκινάτε από μια καθαρή παλέτα:

@theme {
    /* Drop every default color, then define only what you need */
    --color-*: initial;
    --color-brand: #3b82f6;
    --color-ink: #111827;
}

Το --*: initial; εκκαθαρίζει ολόκληρο το θέμα. Μια μεμονωμένη τιμή initial σε κλειδί χωρίς καθολικό χαρακτήρα (--color-red-500: initial;) αφαιρεί μόνο αυτό το διακριτικό. Για καθολικό χαρακτήρα -* γίνεται δεκτό μόνο το initial ως τιμή — οποιαδήποτε άλλη τιμή προκαλεί σφάλμα.

Ανάγνωση τιμών θέματος στο CSS

theme()

Η παλαιού τύπου συνάρτηση theme() διαβάζει μια τιμή με σημειογραφία τελείας από τους χώρους ονομάτων τύπου v3. Επιλύεται στην τιμή του διακριτικού κατά τη μεταγλώττιση, επομένως μπορεί να χρησιμοποιηθεί οπουδήποτε αναμένεται μια τιμή — ακόμη και σε προσαρμοσμένους κανόνες και άλλες δηλώσεις.

$css = tw::generate('<div class="callout">', '
    @import "tailwindcss";
    .callout { color: theme(colors.red.500); }
');

.callout {
  color: oklch(63.7% .237 25.331);
}

Οι διαδρομές με τελείες αντιστοιχούν στις υποκείμενες μεταβλητές (colors.red.500 → --color-red-500, fontFamily.sans → την οικογένεια sans). Υποστηρίζεται τροποποιητής αδιαφάνειας: theme(colors.red.500 / 50%). Μπορεί να δοθεί εναλλακτική τιμή ως δεύτερο όρισμα: theme(colors.brand, #000). Αν δεν είναι δυνατή η επίλυση μιας διαδρομής και δεν έχει δοθεί εναλλακτική τιμή, η υποψήφια τιμή που τη χρησιμοποιεί απορρίπτεται.

--theme()

Το --theme() διαβάζει μια μεταβλητή θέματος με βάση το όνομα προσαρμοσμένης ιδιότητας CSS και επιστρέφει από προεπιλογή μια αναφορά var(), ώστε η τιμή να παραμένει παρακάμψιμη κατά τον χρόνο εκτέλεσης:

.btn { color: --theme(--color-brand); }
/* → color: var(--color-brand); */

Προσθέστε inline για να αντικαταστήσετε την αναφορά var() με την επιλυμένη τιμή: --theme(--color-brand inline). Το δεύτερο όρισμα είναι μια εναλλακτική τιμή (--theme(--color-brand, #000)), ενώ η εναλλακτική τιμή initial αντιμετωπίζεται ειδικά — εισάγεται σε ένθετες αναφορές var() που επιλύονται και αυτές σε initial. Μέσα σε κανόνα at-rule (@media, @container), το --theme() επιλύεται πάντα ενσωματωμένα, επειδή το var() δεν είναι έγκυρο σε αυτές τις προοιμιακές δηλώσεις.

--spacing()

Το --spacing(n) πολλαπλασιάζει τη βασική μονάδα διαστημάτων του θέματος (--spacing) επί n:

@utility my-gap { gap: --spacing(4); }
/* → gap: calc(var(--spacing) * 4); */

Ο πολλαπλασιαστής 1 επιλύεται στην ίδια τη βασική μεταβλητή (--spacing(1) → var(--spacing), όπως ακριβώς αποδίδει και το p-1), ενώ το 0 σε μήκος μηδενικού πλάτους.

Πρόκειται για τον ίδιο υπολογισμό που χρησιμοποιούν τα ενσωματωμένα εργαλεία διαστημάτων, επομένως οι προσαρμοσμένες τιμές παραμένουν συνεπείς με τα p-4, m-4 και τα αντίστοιχα.

--alpha()

Το --alpha(color / opacity) εφαρμόζει αδιαφάνεια σε ένα χρώμα χρησιμοποιώντας ένα color-mix() στον χρωματικό χώρο oklab:

@utility tint { color: --alpha(var(--color-red-500) / 50%); }

.tint {
  color: #fb2c3680;
}
@supports (color: color-mix(in lab, red, red)) {
  .tint {
    color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
  }
}

Η μορφή color-mix() παραμένει παρακάμψιμη κατά τον χρόνο εκτέλεσης· η στατική εναλλακτική τιμή που προηγείται, υπολογισμένη από την τιμή του θέματος, καλύπτει προγράμματα περιήγησης χωρίς color-mix(). Απενεργοποιήστε την εναλλακτική τιμή με την επιλογή polyfills του tw::compile().

Συνδυασμός αδιαφάνειας και color-mix() → oklab()

Οι τροποποιητές αδιαφάνειας συνδυάζονται. Η εφαρμογή αδιαφάνειας 50% σε μια τιμή που έχει ήδη αδιαφάνεια 50% δίνει 25%, με υπολογισμό στον χρωματικό χώρο oklab. Όταν ένας τροποποιητής αδιαφάνειας εφαρμόζεται σε στατικό χρώμα, το TailwindPHP απλοποιεί την έκφραση color-mix(in oklab, …) σε μια συγκεκριμένη τιμή oklab() — με την ίδια μετατροπή που εκτελεί το lightningcss στην αρχική αλυσίδα εργαλείων Tailwind — ενώ τα δυναμικά χρώματα (όσα εξακολουθούν να περικλείονται σε var()) διατηρούν τη μορφή color-mix(), ώστε να παραμένουν παρακάμψιμα κατά τον χρόνο εκτέλεσης.

Ανάγνωση τιμών θέματος από PHP

Τρεις προσπελαστές επιστρέφουν επιλυμένες τιμές θέματος ως πίνακες PHP. Καθένας δέχεται μια προαιρετική συμβολοσειρά εισόδου CSS (προεπιλογή @import "tailwindcss";) και είναι επίσης διαθέσιμος σε μια περίπτωση μεταγλωττιστή.

use TailwindPHP\tw;

tw::colors();
// ['red-500' => 'oklch(63.7% .237 25.331)', 'blue-500' => 'oklch(62.3% .214 259.815)', ...]

tw::breakpoints();
// ['sm' => '40rem', 'md' => '48rem', 'lg' => '64rem', 'xl' => '80rem', '2xl' => '96rem']

tw::spacing('@import "tailwindcss"; @theme { --spacing-huge: 10rem; }');
// ['huge' => '10rem']

Περάστε μια συμβολοσειρά CSS για ανάγνωση με βάση ένα προσαρμοσμένο θέμα:

tw::colors('@import "tailwindcss"; @theme { --color-brand: #3b82f6; }');
// [..., 'brand' => '#3b82f6']

tw::breakpoints('@import "tailwindcss"; @theme { --breakpoint-xs: 20rem; }');
// ['sm' => '40rem', ..., '2xl' => '96rem', 'xs' => '20rem']

Το TailwindCSS 4 χρησιμοποιεί μία βασική τιμή --spacing αντί για κλίμακα --spacing-*, επομένως το tw::spacing() επιστρέφει μόνο τα προσαρμοσμένα διακριτικά --spacing-* που ορίζετε. Οι ίδιες μέθοδοι είναι διαθέσιμες και σε περίπτωση μεταγλωττιστή: $compiler->colors(), $compiler->breakpoints(), $compiler->spacing(). Δείτε το API για τις πλήρεις υπογραφές.

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

• Οδηγίες — @apply, @utility, @custom-variant, @layer.
• Εισαγωγές — @import, εικονικές μονάδες και Preflight.
• API — κάθε μέθοδος πρόσβασης και επιθεώρησης.