Χρήση
Η βασική ροή εργασίας είναι μία κλήση: δώστε στο TailwindPHP το περιεχόμενό σας και προαιρετικές ρυθμίσεις CSS και θα επιστρέψει το CSS για τις κλάσεις που εντοπίζει. Τα ονόματα κλάσεων εξάγονται από τη σήμανση, μεταγλωττίζονται με βάση το επιλυμένο θέμα και το αποτέλεσμα περιλαμβάνει μόνο τα βοηθητικά εργαλεία που χρησιμοποιείτε.
use TailwindPHP\tw;
$css = tw::generate('<div class="flex items-center p-4 bg-blue-500">Hello</div>');
Χωρίς δεύτερο όρισμα, το generate() χρησιμοποιεί μια προεπιλεγμένη ρύθμιση @import "tailwindcss" (θέμα + Preflight + βοηθητικά εργαλεία). Περάστε μια συμβολοσειρά CSS ή έναν πίνακα για προσαρμογή.
Σάρωση περιεχομένου
Το TailwindPHP εντοπίζει ονόματα κλάσεων διαβάζοντας τα χαρακτηριστικά class και className στο περιεχόμενό σας. Για να ελέγξετε τι εξάγεται, χρησιμοποιήστε το tw::extractCandidates():
use TailwindPHP\tw;
tw::extractCandidates('<div class="flex p-4" className="bg-blue-500">');
// ['flex', 'p-4', 'bg-blue-500']
Σαρώνονται και τα δύο χαρακτηριστικά class και className και η λίστα που επιστρέφεται δεν περιέχει διπλότυπα. Αυθαίρετες υποψήφιες τιμές (όπως [mask-type:luminance] ή bg-[#1da1f2]) εξάγονται με τον ίδιο τρόπο και μεταγλωττίζονται αν είναι έγκυρες. Ό,τι εμφανίζεται εδώ είναι ακριβώς αυτό που θα μεταγλωττίσει το generate().
Μορφές εισόδου
Κάθε στατική μέθοδος δέχεται τις ίδιες τρεις μορφές εισόδου:
| Μορφή | Υπογραφή | Χρήση |
|---|---|---|
| Μόνο συμβολοσειρά | tw::generate($content) |
Προεπιλεγμένο θέμα, χωρίς προσαρμογή. |
| Συμβολοσειρά + συμβολοσειρά CSS | tw::generate($content, $css) |
Γρήγορες προσαρμογές θέματος ή ενσωματωμένες οδηγίες. |
| Πίνακας | tw::generate(['content' => ..., 'css' => ...]) |
Όταν χρειάζεστε minify, importPaths ή cache. |
use TailwindPHP\tw;
// Format 1: String only
tw::generate('<div class="flex">');
// Format 2: String + CSS string
tw::generate('<div class="flex">', '@import "tailwindcss"; @theme { --color-brand: #3b82f6; }');
// Format 3: Array with content, css, and options
tw::generate([
'content' => '<div class="flex p-4">',
'css' => '@import "tailwindcss";',
'minify' => true,
]);
Μόνο η μορφή πίνακα δέχεται επιλογές. Εκτός από τα css και minify, δέχεται τα importPaths (δείτε Εισαγωγές), cache και cacheTtl (δείτε Προσωρινή αποθήκευση).
Επαναχρησιμοποιήσιμος μεταγλωττιστής
Η μεταγλώττιση πολλών αποσπασμάτων με την ίδια ρύθμιση — ένας βρόχος αιτημάτων, μια ομάδα προτύπων ή μια βιβλιοθήκη στοιχείων — είναι πιο αποδοτική με ένα μόνο στιγμιότυπο μεταγλωττιστή. Το tw::compile() επιλύει το θέμα και το σύστημα σχεδίασης μία φορά και έπειτα τα επαναχρησιμοποιεί:
use TailwindPHP\tw;
$compiler = tw::compile('@import "tailwindcss"; @theme { --color-brand: #3b82f6; }');
$css = $compiler->generate('<div class="flex p-4 bg-brand">');
$candidates = $compiler->extractCandidates('<div class="flex p-4 bg-brand">');
$minified = $compiler->minify($css);
Ο compiler παρέχει επίσης επιθεώρηση ιδιοτήτων (properties(), computedProperties(), value(), computedValue()) και προσβάσεις θέματος (colors(), breakpoints(), spacing()). Για όλες τις μεθόδους, δείτε την πλήρη API.
Ρύθμιση της εισόδου CSS
Οι περισσότερες δυνατότητες του TailwindPHP βρίσκονται στη συμβολοσειρά CSS που περνάτε ως ρύθμιση. Συνεχίστε με: