Tailwind CSS: A Utility-First CSS Framework and API for Rapid, Responsive Design

Tailwind CSS Framework

Ενώ είμαι βαθιά στην τεχνολογία σε καθημερινή βάση, δεν έχω τόσο χρόνο όσο θα ήθελα να μοιραστώ τις περίπλοκες ενοποιήσεις και αυτοματισμούς που εφαρμόζει η εταιρεία μου για τους πελάτες. Επίσης, δεν έχω πολύ χρόνο ανακάλυψης. Το μεγαλύτερο μέρος της τεχνολογίας για την οποία γράφω είναι εταιρείες που αναζητούν Martech Zone καλύπτοντάς τα, αλλά κάθε τόσο - ειδικά μέσω Twitter - βλέπω κάποιον θόρυβο γύρω από μια νέα τεχνολογία που πρέπει να μοιραστώ.

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

CSS πλαίσια

Τα τελευταία χρόνια, οι σχεδιαστές έχουν κάνει μια εκπληκτική δουλειά κυκλοφορώντας συλλογές στυλ που είναι προετοιμασμένα και έτοιμα για χρήση. Αυτά τα φύλλα στυλ CSS είναι πιο γνωστά ως CSS Frameworks, προσπαθώντας να προσαρμόσουν όλα τα διαφορετικά στυλ και τις δυνατότητες απόκρισης, έτσι ώστε οι προγραμματιστές να μπορούν απλώς να αναφέρουν ένα πλαίσιο παρά να δημιουργήσουν ένα αρχείο CSS από την αρχή. Μερικά δημοφιλή πλαίσια είναι:

  • Bootstrap - ένα πλαίσιο που εξελίχθηκε μέσα σε μια δεκαετία, που παρουσιάστηκε για πρώτη φορά από το Twitter. Προσφέρει αμέτρητα χαρακτηριστικά. Έχει μειονεκτήματα, απαιτώντας SASS, δύσκολο να υπερφορτωθεί, εξαρτάται από το JQquery και είναι αρκετά βαρύ για φόρτωση.
  • βρίσκω -ένα καθαρό πλαίσιο που είναι φιλικό προς τους προγραμματιστές και δεν εξαρτάται από την JavaScript.
  • Θεμέλιο - ένα πιο γενικό και εύχρηστο πλαίσιο CSS που έχει τόνους συστατικών που είναι εύκολα προσαρμόσιμα. Επιπλέον, υπάρχει Foundationδρυμα για το ηλεκτρονικό ταχυδρομείο Κίνηση UI για κινούμενα σχέδια.
  • Κιτ UI -ένας συνδυασμός HTML, JavaScript και CSS για να αναπτύξετε το front-end σας γρήγορα και εύκολα.

Tailwind CSS Framework

Ενώ άλλα πλαίσια κάνουν εξαιρετική δουλειά για να προσαρμόσουν δημοφιλή στοιχεία διεπαφής χρήστη, το Tailwind χρησιμοποιεί μια μεθοδολογία γνωστή ως Ατομικό CSSΤο Εν ολίγοις, η Tailwind οργάνωσε έξυπνα τα ονόματα των τάξεων χρησιμοποιώντας τη φυσική γλώσσα για να κάνει αυτό που λένε ότι κάνει. Έτσι, ενώ το Tailwind δεν διαθέτει βιβλιοθήκη στοιχείων, η δυνατότητα να δημιουργήσετε εύκολα μια ισχυρή, αποκριτική διεπαφή μόνο με αναφορά στα ονόματα της κλάσης CSS είναι κομψή, γρήγορη και ασύγκριτη.

Εδώ είναι μερικά πραγματικά υπέροχα παραδείγματα:

Πλέγματα CSS

css στήλη έναρξη πλεγμάτων στηλών

Διαβαθμίσεις CSS

κλίσεις css

Υποστήριξη CSS για σκοτεινή λειτουργία

css σκοτεινή λειτουργία

Το Tailwind έχει επίσης ένα φανταστικό διαθέσιμη επέκταση για κώδικα VS, ώστε να μπορείτε εύκολα να εντοπίσετε και να εισαγάγετε κλάσεις από τον επεξεργαστή κώδικα της Microsoft.

Ακόμα πιο έξυπνο, το Tailwind αφαιρεί αυτόματα όλα τα αχρησιμοποίητα CSS κατά την κατασκευή για παραγωγή, πράγμα που σημαίνει ότι το τελευταίο σας πακέτο CSS είναι το μικρότερο που θα μπορούσε να είναι. Στην πραγματικότητα, τα περισσότερα έργα Tailwind στέλνουν λιγότερο από 10kB CSS στον πελάτη.

Ποια είναι η γνώμη σας;

Αυτός ο ιστότοπος χρησιμοποιεί το Akismet για να μειώσει το spam. Μάθετε πώς επεξεργάζονται τα δεδομένα των σχολίων σας.