Παιδική Χαρά Tailwind

Πώς να χρησιμοποιήσετε το Παιδική Χαρά Tailwind

Αυτή η παιδική χαρά εκτελεί εξ ολοκλήρου στη μηχανή σου τον επίσημο μεταγλωττιστή browser του Tailwind CSS v4. Γράφεις αριστερά απλό HTML με κλάσεις εργαλείων, ο μεταγλωττιστής παράγει το αντίστοιχο CSS μέσα σε απομονωμένο iframe προεπισκόπησης, και ένα πάνελ από κάτω δείχνει το ακριβές παραχθέν stylesheet. Τίποτα δεν ανεβαίνει: ο μεταγλωττιστής, η σήμανσή σου και τα προσχέδιά σου μένουν όλοι στον browser.

1. Διάλεξε σημείο εκκίνησης από τον επιλογέα Πρότυπο: Hero, πλέγμα καρτών, πίνακας τιμών ή Κενό· το κείμενό σου επαναφέρεται αυτόματα και μεταξύ επισκέψεων.
2. Επεξεργάσου το HTML στον αριστερό editor. Το Tab εισάγει δύο κενά, και η προεπισκόπηση μεταγλωττίζεται ξανά περίπου 500 ms αφού σταματήσεις να πληκτρολογείς.
3. Εναλλάξτε Απαλή αναδίπλωση για έλεγχο των αλλαγών γραμμής, και τον επιλογέα μεγέθους γραμματοσειράς για να ορίσεις το μέγεθος κειμένου του editor.
4. Ενεργοποίησε Σκοτεινή προεπισκόπηση για να προστεθεί η κλάση "dark" στο έγγραφο προεπισκόπησης· εργαλεία όπως dark:bg-slate-900 ανταποκρίνονται άμεσα.
5. Διάβασε τους παραγόμενους κανόνες στο πάνελ Μεταγλωττισμένο CSS και αντίγραψέ τους με Αντιγραφή CSS όταν τους χρειάζεσαι.
6. Χρησιμοποίησε Αντιγραφή HTML για την ακατέργαστη σήμανση, ή Λήψη HTML για να πάρεις αυτόνομο αρχείο με ενσωματωμένο το μεταγλωττισμένο CSS, έτοιμο να ανοίξει offline.

Η λήψη έχει πραγματικά styles μόνο μετά από τουλάχιστον μία μεταγλώττιση, άφησε λοιπόν την προεπισκόπηση να αποδοθεί μία φορά πριν την εξαγωγή. Για να μικρύνεις το παραγόμενο CSS, σβήσε αχρησιμοποίητα στοιχεία από το πρότυπο — το πάνελ αντικατοπτρίζει πάντα ακριβώς τι χρειάζεται η τρέχουσα σήμανσή σου.