Tech & Web

Tailwind CSS utility-first CSS framework

12-08-22
Το Tailwind CSS είναι ένα utility-first CSS framework που έχει σχεδιαστεί για να επιτρέπει στους χρήστες να δημιουργούν εφαρμογές πιο γρήγορα και εύκολα. Μπορείτε να χρησιμοποιήσετε κατηγορίες βοηθητικών προγραμμάτων για να ελέγξετε τη διάταξη, το χρώμα, τα κενά, την τυπογραφία, τις σκιές και πολλά άλλα για να δημιουργήσετε ένα εντελώς προσαρμοσμένο σχέδιο στοιχείων σας χωρίς να γράψετε ούτε μια γραμμή  CSS.

Πλεονεκτήματα του Tailwind CSS

Με το Tailwind, δημιουργείτε στυλ εφαρμόζοντας προϋπάρχουσες Classes απευθείας στο HTML σας. Χρησιμοποιώντας τις κατηγορίες βοηθητικών προγραμμάτων με αυτόν τον τρόπο, μπορείτε να δημιουργήσετε τα δικα σας μοναδικά προσαρμοσμένα σχέδια χωρίς να γράφετε CSS.

Χωρίς ένα framework όπως το Tailwind, πρέπει να συνεχίσετε να γράφετε CSS καθώς προσθέτετε νέες δυνατότητες και στοιχεία. Ως αποτέλεσμα, τα αρχεία σας CSS συνεχίζουν να αυξάνονται και να γίνονται βαρύτερα. Χρησιμοποιώντας βοηθητικά προγράμματα όπως τα βοηθητικά προγράμματα flexbox και padding της Tailwind, τα περισσότερα στυλ είναι επαναχρησιμοποιήσιμα, επομένως σπάνια χρειάζεται να γράψετε νέα CSS.

Δεν χρειάζεται να εφεύρετε ονόματα class, δεν χρειάζεται να αγωνιείτε για την επιλογή των «τέλειων» ονομάτων κλάσεων για ορισμένα στυλ και στοιχεία ή να θυμάστε περίπλοκα όπως sidebar-inner-wrapper, κλπ.

Μπορείτε να κάνετε πιο ασφαλείς αλλαγές.  Με την παραδοσιακή προσέγγιση, εάν κάνετε αλλαγές στο CSS, μπορεί να «σπάσετε» κάτι στον ιστότοπο σας. Σε αντίθεση με το CSS, οι τάξεις βοηθητικών προγραμμάτων στο HTML σας είναι τοπικές. Αυτό σημαίνει ότι μπορείτε να τα αλλάξετε χωρίς να ανησυχείτε μήπως σπάσετε κάτι άλλο στην  ιστοσελίδα σας.

Διατηρείτε μικρά αρχεία CSS

Το Tailwind CSS είναι ένα framework low-level. Αυτό σημαίνει ότι, σε αντίθεση με άλλα framework CSS όπως το Bootstrap και το Materialize,  Foundation, κλπ, το Tailwind δεν προσφέρει πλήρως σχεδιασμένα στοιχεία όπως κουμπιά, αναπτυσσόμενα μενού και γραμμές πλοήγησης. Αντίθετα, προσφέρει Utility classes, ώστε να μπορείτε να δημιουργήσετε τα δικά σας επαναχρησιμοποιήσιμα στοιχεία.
Για αυτόν τον λόγο, παρέχει πολύ μεγαλύτερη ευελιξία και έλεγχο σχετικά με την εμφάνιση της εφαρμογής σε σχέση με άλλα CSS frameworks. Αυτό μπορεί να σας επιτρέψει να ξεφύγετε από τα συνηθισμένα μοτίβα  και να δημιουργήσετε έναν μοναδικό ιστότοπο και ταυτόχρονα  αποφεύγουμε  τον βραχνά του αχρησιμοποίητου κώδικα css που βαραίνει  την ιστοσελίδα μας, το Tailwind αφαιρεί αυτόματα όλα τα αχρησιμοποίητα CSS κατά την κατασκευή για παραγωγή, πράγμα που σημαίνει ότι το τελικό πακέτο CSS σας είναι το μικρότερο που θα μπορούσε να είναι. Στην πραγματικότητα, τα περισσότερα έργα Tailwind αποστέλλουν λιγότερο από 10 kB CSS.

Το Bootstrap έχει κυκλοφορήσει πριν από περίπου δέκα χρόνια και χρησιμοποιείται ως το πιο δημοφιλές CSS framework. Γι' αυτό έχει μια μεγαλύτερη κοινότητα εκατομμυρίων προγραμματιστών με εργαλεία και φόρουμ.
Αν μιλάμε για το Tailwind, παρουσιάστηκε πριν απο μερικά χρόνια και άρχισε να αναπτύσσεται σταδιακά. Αυτός είναι ο λόγος που υπάρχει ακόμα πολύς χώρος για την Tailwind να έχει μια ισχυρή κοινότητα προγραμματιστών και εργαλείων

Μπορείτε να μάθετε περισσότερα σχετικά εδώ  https://tailwindcss.com/

Tags Web Design

Χρήσιμα εργαλεία online για web developers & more.