Το Tailwind CSS παρέχει ' περιθώριο Κλάσεις χρησιμότητας που επιτρέπουν στους χρήστες να ελέγχουν την απόσταση γύρω από τα στοιχεία. ο οριζόντιο περιθώριο προσθέτει χώρο στην αριστερή και δεξιά πλευρά ενός στοιχείου, ενώ α κατακόρυφο περιθώριο προσθέτει χώρο στο επάνω και στο κάτω μέρος ενός στοιχείου. Το Tailwind προσφέρει διάφορες κατηγορίες χρησιμότητας για να προσθέσετε οριζόντια ή κάθετα περιθώρια στα επιθυμητά στοιχεία.
Αυτό το άρθρο θα δώσει παράδειγμα:
Πώς να προσθέσετε ένα οριζόντιο περιθώριο στο Tailwind;
Για να προσθέσετε ένα οριζόντιο περιθώριο σε ένα στοιχείο στο Tailwind, το ' mx-<τιμή> Η κλάση χρησιμοποιείται με το επιθυμητό στοιχείο στο πρόγραμμα HTML. Οι χρήστες μπορούν να καθορίσουν διαφορετικές τιμές για το μέγεθος του περιθωρίου. Αυτή η κλάση προσθέτει ένα περιθώριο κατά μήκος του άξονα x (δεξιά και αριστερή πλευρά).
Σύνταξη
< στοιχείο τάξη = 'mx-<τιμή> ...' > ... στοιχείο >
Εδώ, το 'mx' αντιπροσωπεύει τον 'άξονα x' ή το 'οριζόντιο περιθώριο'. Φροντίστε να αντικαταστήσετε το '<τιμή>' με οποιαδήποτε έγκυρη τιμή, όπως '5', '14' κ.λπ.
Παράδειγμα: Εφαρμογή οριζόντιου περιθωρίου σε ένα στοιχείο HTML
Σε αυτό το παράδειγμα, θα χρησιμοποιήσουμε το ' mx-10 ' τάξη χρησιμότητας με το ' Για να προσθέσετε ένα κατακόρυφο περιθώριο σε ένα στοιχείο στο Tailwind, χρησιμοποιήστε το ' my-<τιμή> ” κλάση βοηθητικού προγράμματος με το συγκεκριμένο στοιχείο στο πρόγραμμα HTML. Αυτή η κλάση προσθέτει ένα περιθώριο κατά μήκος του άξονα y (πάνω και κάτω πλευρά). Σύνταξη Παράδειγμα: Εφαρμογή κατακόρυφου περιθωρίου σε ένα στοιχείο HTML Σε αυτό το παράδειγμα, θα χρησιμοποιήσουμε το ' μου-10 ' τάξη χρησιμότητας με το ' Για να προσθέσετε το οριζόντιο και κάθετο περιθώριο στο Tailwind, το ' mx-<τιμή> ' και ' my-<τιμή> Οι κλάσεις βοηθητικών προγραμμάτων χρησιμοποιούνται με τα επιθυμητά στοιχεία στο πρόγραμμα HTML αντίστοιχα. Οι χρήστες μπορούν να καθορίσουν διαφορετικές τιμές για να εφαρμόσουν περιθώριο στα αριστερά και δεξιά ή πάνω και κάτω ενός στοιχείου. Αυτή η καταγραφή αποτελεί παράδειγμα της μεθόδου εφαρμογής οριζόντιων και κάθετων περιθωρίων στο Tailwind.
< σώμα >
< div τάξη = 'h-screen mx-10 bg-purple-500' >
< Π τάξη = 'text-5xl text-center' > Περιθώριο σε Tailwind CSS Π >
div >
σώμα >
Παραγωγή 
Η παραπάνω έξοδος δείχνει το περιθώριο στην αριστερή και δεξιά πλευρά του δοχείου. Αυτό υποδηλώνει ότι το οριζόντιο περιθώριο εφαρμόστηκε με επιτυχία στο στοιχείο κοντέινερ. Πώς να προσθέσετε ένα κατακόρυφο περιθώριο στο Tailwind;
Εδώ, το 'my' αντιπροσωπεύει τον 'άξονα y' ή το 'κάθετο περιθώριο'. Φροντίστε να αντικαταστήσετε το '<τιμή>' με οποιαδήποτε έγκυρη τιμή, όπως '6', '12' κ.λπ.
< div τάξη = 'h-96 my-10 bg-purple-500' >
< Π τάξη = 'text-5xl text-center' > Περιθώριο σε Tailwind CSS Π >
div >
σώμα >
Παραγωγή 
Η παραπάνω έξοδος δείχνει το περιθώριο στην επάνω και κάτω πλευρά του δοχείου. Αυτό δείχνει ότι το κατακόρυφο περιθώριο έχει εφαρμοστεί αποτελεσματικά στο στοιχείο του δοχείου. συμπέρασμα