Πρόσθετο τυπογραφίας

Το @tailwindcss/typography είναι μια πιστή, 1:1 PHP μεταφορά του επίσημου πρόσθετου τυπογραφίας. Προσθέτει την κλάση prose και τους τροποποιητές της, που εφαρμόζουν ευανάγνωστες προεπιλεγμένες ρυθμίσεις τυπογραφίας σε ένα τμήμα αποδοσμένου HTML — επικεφαλίδες, παραγράφους, λίστες, παραθέματα, κώδικα, πίνακες και άλλα — χωρίς να χρειάζεται να μορφοποιείτε κάθε στοιχείο ξεχωριστά.

Χρήση

Φορτώστε το πρόσθετο με το @plugin και εισαγάγετε το επίπεδο βοηθητικών κλάσεων. Στη συνέχεια, εφαρμόστε το prose στο περίβλημα του περιεχομένου σας:

use TailwindPHP\tw;

$css = tw::generate(
    '<article class="prose prose-lg"><h1>Title</h1><p>Body text…</p></article>',
    '@plugin "@tailwindcss/typography"; @import "tailwindcss/utilities.css";'
);

Ο παραγόμενος κανόνας .prose ορίζει προσαρμοσμένες ιδιότητες --tw-prose-* (--tw-prose-body, --tw-prose-headings, --tw-prose-links, --tw-prose-code, --tw-prose-quotes και άλλες) και μορφοποιεί μέσω αυτών τα θυγατρικά στοιχεία.

Κλάσεις

Μεγέθη

Οι τροποποιητές μεγέθους κλιμακώνουν ολόκληρη την κλίμακα τυπογραφίας. Εφαρμόζονται μαζί με τη βασική κλάση prose:

<article class="prose prose-xl">…</article>

Θέματα χρωμάτων

Οι τροποποιητές χρώματος αλλάζουν την κλίμακα του γκρι που χρησιμοποιείται για το κυρίως κείμενο, τις επικεφαλίδες και τα περιγράμματα:

Αντιστροφή

Το prose-invert αντιστρέφει την παλέτα χρωμάτων για χρήση σε σκούρα φόντα. Συνδυάστε το ελεύθερα με τροποποιητές μεγέθους και χρώματος:

<article class="prose prose-lg prose-slate prose-invert">…</article>

Επιλογές

className

Από προεπιλογή, το πρόσθετο δημιουργεί την κλάση prose. Ορίστε το className για να τη μετονομάσετε — οι τροποποιητές ακολουθούν το νέο όνομα (markdown, markdown-lg, markdown-invert, …). Όταν οριστεί, οι κλάσεις prose δεν δημιουργούνται:

$css = tw::generate(
    '<article class="markdown markdown-lg">…</article>',
    '
        @plugin "@tailwindcss/typography" {
            className: "markdown";
        }
        @import "tailwindcss/utilities.css";
    '
);

Σημειώσεις

Οι τροποποιητές στοιχείων όπως τα prose-headings:underline ή prose-a:text-blue-600 καταχωρίζονται, αλλά στην τρέχουσα έκδοση μεταγλωττίζονται χωρίς τον επιλογέα του στοιχείου. Έτσι, η βοηθητική κλάση εφαρμόζεται σε ολόκληρο το περίβλημα prose αντί στις επικεφαλίδες ή τους συνδέσμους που περιέχει (#10). Μέχρι να διορθωθεί, μορφοποιήστε αυτά τα στοιχεία με δικό σας CSS.

Αυτή είναι θύρα TailwindCSS v4. Ορισμένες συμπεριφορές του αρχικού πρόσθετου που αφορούν ειδικά το v3 — η σκοτεινή λειτουργία με επιλογέα .dark και ορισμένες μορφές ρύθμισης παραλλαγών στοιχείων — λειτουργούν διαφορετικά στο v4 και δεν υποστηρίζονται εδώ· χρησιμοποιήστε τον τροποποιητή prose-invert και τις παραλλαγές v4.

Δείτε τα Πρόσθετα για την οδηγία @plugin και λεπτομέρειες φόρτωσης.