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

Αυτό το άρθρο θα εξηγήσει τη μέθοδο χρήσης αυθαίρετων τιμών στο Tailwind CSS.

Πώς να χρησιμοποιήσετε τις αυθαίρετες αξίες στο Tailwind;

Οι αυθαίρετες τιμές είναι οι προσαρμοσμένες τιμές που μπορούν να γραφτούν απευθείας στο χαρακτηριστικό κλάσης HTML χωρίς να οριστούν στο αρχείο διαμόρφωσης Tailwind. Έχουν ένα πρόθεμα με συμβολισμό αγκύλης, όπως [24px], [2,5rem], κ.λπ. Για να χρησιμοποιήσετε τις αυθαίρετες τιμές στο Tailwind, χρησιμοποιήστε μια σημείωση αγκύλων και καθορίστε οποιαδήποτε προσαρμοσμένη τιμή για να δημιουργήσετε δυναμικά κλάσεις βοηθητικών προγραμμάτων.

Δείτε τα παρακάτω βήματα για καλύτερη κατανόηση:

Βήμα 1: Χρήση αυθαίρετων τιμών στο πρόγραμμα HTML

Φτιάξτε ένα πρόγραμμα HTML και χρησιμοποιήστε τη σημειογραφία σε αγκύλες με οποιαδήποτε προσαρμοσμένη τιμή για να δημιουργήσετε τις επιθυμητές κλάσεις. Για παράδειγμα, χρησιμοποιήσαμε το 'bg-[#e9e516]', 'w-[600px]', 'h-[400px]', 'p-[13px]', και άλλες τάξεις:

Εδώ:

• 'bg-[#e9e516]' Η τάξη ορίζει το χρώμα φόντου του
  σε “#e9e516” (κίτρινος).
• 'w-[600px]' Η class ορίζει το πλάτος του
  στα 600 pixel.
• 'h-[400px]' class εφαρμόζει το ύψος των 400 pixel στο στοιχείο
  .
• 'p-[13px]' Η class ορίζει το padding του
  σε 13 pixel.
• 'm-[19px]' Η class ορίζει το περιθώριο του
  στα 19 pixel.

• 'κείμενο-[30px]' Η class ορίζει το μέγεθος γραμματοσειράς του στοιχείου

  σε 30 pixel.

• 'κείμενο-[#7405ab]' η τάξη ορίζει το χρώμα κειμένου του στοιχείου

  σε μωβ (#7405ab).

• “Tracking-[0,5rem]” class εφαρμόζει το διάστιχο γραμμάτων σε 0,5 rem έως στοιχείο

  .

Βήμα 2: Επαληθεύστε την έξοδο

Για να βεβαιωθείτε ότι οι αυθαίρετες τιμές λειτουργούν σωστά, προβάλετε την ιστοσελίδα HTML:

Η παραπάνω έξοδος δείχνει ότι οι αυθαίρετες τιμές λειτουργούν σωστά όπως ορίστηκαν.

συμπέρασμα

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