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

Γιατί να χρησιμοποιήσετε το Tailwind CSS;

Υπάρχουν ήδη πολλά CSS πλαίσια που απλοποιούν τον τρόπο με τον οποίο οι προγραμματιστές σχεδιάζουν ιστοσελίδες. Γιατί λοιπόν να χρησιμοποιήσετε το Tailwind CSS;

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

Tailwind CSS, ωστόσο, είναι ένα πλαίσιο πρώτης χρήσης που σας δίνει τον δημιουργικό έλεγχο για τη δημιουργία δυναμικών στοιχείων. Και σε αντίθεση με το Bootstrap, μπορείτε εύκολα να προσαρμόσετε τα σχέδια όπως θέλετε.

Ένα άλλο πλεονέκτημα της χρήσης Tailwind CSS είναι ότι καταλήγετε με ένα μικρό μέγεθος πακέτου CSS, καθώς αφαιρεί όλα τα αχρησιμοποίητο CSS κατά τη διαδικασία κατασκευής (που είναι διαφορετικό από το Bootstrap, καθώς περιλαμβάνει όλα τα αρχεία CSS στο χτίζω).

Μάθετε περισσότερα για το διαφορές μεταξύ Tailwind CSS και Bootstrap από το άρθρο μας για το θέμα.

Μειονεκτήματα της χρήσης Tailwind CSS

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

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

Ακόμη και με αυτά τα μειονεκτήματα, το Tailwind CSS είναι ένα πλαίσιο που θα πρέπει να εξετάσετε σοβαρά εάν είστε ήδη άνετοι με το CSS και θέλετε να δημιουργήσετε σχέδια πιο γρήγορα.

Ξεκινώντας: Δημιουργήστε ένα έργο React

Εκτελέστε την ακόλουθη εντολή στο τερματικό στο ικρίωμα a Αντιδρώ εφαρμογή χρησιμοποιώντας δημιουργία-αντίδραση-εφαρμογή.

npx create-react-app react-tailwind

δημιουργία-αντίδραση-εφαρμογή παρέχει έναν εύκολο τρόπο δημιουργίας μιας εφαρμογής React χωρίς διαμόρφωση εργαλείων κατασκευής όπως webpack, babel ή linters. Αυτό σημαίνει ότι καταλήγετε σε ένα λειτουργικό περιβάλλον React μέσα σε λίγα λεπτά.

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

cd react-tailwind

Στη συνέχεια, εγκαταστήστε το Tailwind CSS και ρυθμίστε το ώστε να λειτουργεί με την εφαρμογή React.

Χρησιμοποιήστε το Tailwind CSS στο React

Εγκαταστήστε το Tailwind CSS και τις εξαρτήσεις του με αυτήν την εντολή:

npm εγκατάσταση tailwindcss postcss autoprefixer

PostCSS χρησιμοποιεί πρόσθετα JavaScript για να κάνει το CSS συμβατό με τα περισσότερα προγράμματα περιήγησης. Ελέγχει το πρόγραμμα περιήγησης στο οποίο εκτελείται η εφαρμογή και προσδιορίζει τις πολυγεμίσεις που απαιτούνται για να λειτουργήσει απρόσκοπτα το CSS σας. Το Autoprefixer είναι μια προσθήκη PostCSS που χρησιμοποιεί τιμές από caniuse.com για αυτόματη προσθήκη προθεμάτων προμηθευτή στους κανόνες CSS.

Εκκινήστε το Tailwind CSS

Εκτελέστε το ουραίος άνεμος init εντολή για τη δημιουργία προεπιλεγμένων αρχείων διαμόρφωσης Tailwind CSS.

npx tailwindcss init

Αυτό δημιουργεί tailwind.config.js στον ριζικό φάκελο που αποθηκεύει όλα τα αρχεία διαμόρφωσης του Tailwind και περιέχει τα εξής:

module.exports = {
 περιεχόμενο: [],
 θέμα: {
 επέκταση: {},
 },
 πρόσθετα: [],
}

Διαμόρφωση μονοπατιών προτύπων

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

Σε tailwind.config.js, προσθέστε τις διαδρομές προτύπου κάτω από το κλειδί περιεχομένου.

module.exports = {
 περιεχόμενο: [
 "./src/**/*.{js, jsx, ts, tsx}",
 ],
 θέμα: {
 επέκταση: {},
 },
 πρόσθετα: [],
}

Εισάγετε το Tailwind CSS στο React

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

Διαγράψτε τα πάντα index.css και προσθέστε τα ακόλουθα για να εισαγάγετε τα βασικά στυλ, στοιχεία και βοηθητικά προγράμματα.

@tailwind βάση?
@tailwind εξαρτήματα?
@tailwind utilities;

Τέλος, βεβαιωθείτε index.css εισάγεται σε index.js και το Tailwind CSS θα είναι έτοιμο για χρήση.

Χρήση Tailwind CSS για τη διαμόρφωση στυλ ενός στοιχείου React

Θα δημιουργήσετε την απλή ιστοσελίδα παρακάτω και θα την διαμορφώσετε χρησιμοποιώντας τις τάξεις βοηθητικού προγράμματος Tailwind.

Αυτή η σελίδα περιέχει δύο κύριες ενότητες: α μπάρα πλοήγησης, και το τμήμα ήρωα (που έχει μια επικεφαλίδα και ένα κουμπί).

Για να δείξετε πώς το Tailwind CSS διευκολύνει τη σύνταξη CSS, δοκιμάστε να διαμορφώσετε το στυλ της ιστοσελίδας χρησιμοποιώντας απλό CSS και Tailwind CSS.

Ξεκινήστε τροποποιώντας το App.js στο src φάκελο για να αφαιρέσετε τον περιττό κωδικό.

εισαγωγή "./App.css"
συνάρτηση Εφαρμογή() {
 ΕΠΙΣΤΡΟΦΗ (



 );
}
εξαγωγή προεπιλεγμένη εφαρμογή?

Στη συνέχεια, προσθέστε το περιεχόμενο της ιστοσελίδας στο App.js.

εισαγωγή "./App.css";
συνάρτηση Εφαρμογή() {
 ΕΠΙΣΤΡΟΦΗ (







 Το Tailwind CSS διευκολύνει το στυλ των στοιχείων React!



Ξεκίνα






 );
}

Για να χρησιμοποιήσετε απλό CSS, προσθέστε το CSS στο App.css.

πλοήγηση {
 οθόνη: flex;
 justify-content: space-mes?
 padding: 16px 36px;
 χρώμα: #000;
 box-shadow: 0px 2px 5px 0px rgba (168, 168, 168, 0,75);
}
.λογότυπο {
 μέγεθος γραμματοσειράς: 18 px;
 βάρος γραμματοσειράς: έντονη γραφή;
}
ul {
 στιλ λίστας: κανένας;
 οθόνη: inline-flex;
}
ul li {
 περιθώριο-αριστερά: 16 εικονοστοιχεία;
 δρομέας: δείκτης;
}
.ήρωας {
 οθόνη: flex;
 flex-direction: στήλη;
 στοίχιση-στοιχεία: κέντρο;
 margin-top: 64px;
}
h1 {
 μέγεθος γραμματοσειράς: 36 px;
 text-align: κέντρο;
}
.btn {
 χρώμα φόντου: #000000;
 χρώμα: #fff;
 padding: 10px;
 πλάτος: κατάλληλο περιεχόμενο.
 margin-top: 36px;
}

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

App.js πρέπει να μοιάζει με αυτό.

συνάρτηση Εφαρμογή() {
 ΕΠΙΣΤΡΟΦΗ (







 Το Tailwind CSS διευκολύνει το στυλ των στοιχείων React!




 Ξεκίνα







 );
}

Δεν χρειάζεται να κάνετε εισαγωγή App.css αφού τα στυλ που δημιουργούνται από το Tailwind CSS αποθηκεύονται σε index.css που εισαγάγατε index.js νωρίτερα.

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

Κώδικας σε στυλ με Tailwind CSS

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

Όμως, όπως αναφέραμε νωρίτερα, το Tailwind απέχει πολύ από το μόνο πλαίσιο CSS στην αγορά. Ποιο θα χρησιμοποιήσετε για το επόμενο έργο σας;

Tailwind CSS vs. Bootstrap: Ποιο είναι καλύτερο πλαίσιο;

Όταν επιλέγετε ένα πλαίσιο CSS, είναι σημαντικό να βρείτε αυτό που ικανοποιεί τις απαιτήσεις σας.

Διαβάστε Επόμενο

Σχετικά με τον Συγγραφέα