Πώς να εγκαταστήσετε και να χρησιμοποιήσετε το Tailwind CSS σε μια εφαρμογή Next.js

Αναγνώστες σαν εσάς βοηθούν στην υποστήριξη του MUO. Όταν κάνετε μια αγορά χρησιμοποιώντας συνδέσμους στον ιστότοπό μας, ενδέχεται να κερδίσουμε μια προμήθεια θυγατρικών. Διαβάστε περισσότερα.

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

Σε αντίθεση με το Bootstrap, το Tailwind δεν έχει προκαθορισμένες κλάσεις. Αντίθετα, μπορείτε να προσαρμόσετε το δικό σας. Με το Tailwind, μπορείτε να δημιουργήσετε σύνθετα στοιχεία με πρωτόγονα βοηθητικά προγράμματα, λειτουργίες και οδηγίες.

ΚΑΤΑΣΚΕΥΗ ΒΙΝΤΕΟ ΤΗΣ ΗΜΕΡΑΣ

Μάθετε πώς να εγκαταστήσετε και να χρησιμοποιήσετε το Tailwind για να δημιουργήσετε εκπληκτικές διεπαφές χρήστη στα έργα Next.js.

Εγκαταστήστε το Tailwind CSS στο Next.js

Ξεκινήστε εγκαθιστώντας το Tailwind σε μια εφαρμογή Next.js. Η διαδικασία είναι παρόμοια με εγκατάσταση του Tailwind σε μια εφαρμογή React , με μια μικρή διαφορά στη διαδικασία διαμόρφωσης.

μεταβείτε στο Εγκατάσταση Tailwind CSS σελίδα. Στη συνέχεια, πηγαίνετε στο Οδηγοί Πλαισίου ενότητα και επιλέξτε Επόμενο.js . Αυτή η ενότητα περιέχει όλες τις οδηγίες που χρειάζεστε για να ρυθμίσετε το Tailwind στο έργο Next.js.

Για να εγκαταστήσετε το Tailwind μέσω npm, ο διαχειριστής πακέτων JavaScript , εκτελέστε αυτές τις δύο εντολές τερματικού:

ελευθερώστε χώρο στο ρολόι της Apple

D4CC874C158D9005DBCB6474723F8993EDC9E47

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

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

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

 /** @type {import('tailwindcss').Config} */  
module.exports = { 
    content: [  
        "./app/**/*.{js,ts,jsx,tsx}", 
        "./pages/**/*.{js,ts,jsx,tsx}", 
        "./components/**/*.{js,ts,jsx,tsx}", 
 
        // Or if using `src` directory:  
        "./src/**/*.{js,ts,jsx,tsx}", 
    ], 
    theme: {  
        extend: {}, 
    }, 
    plugins: [], 
}

Προσθήκη Οδηγίας Tailwind στην εφαρμογή

Στη συνέχεια, προσθέστε τις ακόλουθες οδηγίες Tailwind στο αρχείο App CSS. Αυτό είναι το αρχείο με το όνομα global.css. Θα πρέπει να διαγράψετε τα περιεχόμενα του αρχείου global.css και να προσθέσετε τις οδηγίες Tailwind.

 @tailwind base; 
 
@tailwind components; 
 
@tailwind utilities;

Εκτελέστε τη διαδικασία κατασκευής

Τώρα, στο τερματικό, εκτελέστε το εργαλείο CLI με την ακόλουθη εντολή:

2 παιχνίδια android παιχνίδια ίδια συσκευή

 npm run dev

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

Το Tailwind άνοιξε τη θύρα για προβολή του προγράμματος περιήγησης

Τώρα, εάν πλοηγηθείτε στον διακομιστή στο http://localhost:3000 θα δείτε την εφαρμογή σας. Θα πρέπει να παρατηρήσετε μια μικρή αλλαγή στο περιεχόμενο. Αυτό υποδηλώνει ότι η διαδικασία εγκατάστασης είναι επιτυχής και ότι το Tailwind CSS είναι ζωντανό.

Χρησιμοποιήστε το Tailwind στο έργο

Στη συνέχεια, ας δοκιμάσουμε τις δυνατότητες του Tailwind CSS εφαρμόζοντας κλάσεις στο έργο σας. Για παράδειγμα, έχετε μια εφαρμογή με το κείμενο 'Hello Tailwind'. Θέλετε να του δώσετε ένα κόκκινο χρώμα με γαλάζιο φόντο.

Δημιουργώ ένα Home.tsx αρχείο και στη συνέχεια προσθέστε τον ακόλουθο κώδικα:

 export default function Home() { 
    return ( 
        <body className="bg-blue-300"> 
            <h1 className='text-red-900'>Hello Tailwind CSS</h1> 
        </body> 
    ); 
}

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

ο σκληρός δίσκος δεν εμφανίζεται

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

Πλεονεκτήματα της χρήσης Tailwind CSS

Κατασκευασμένο από τον Adam Wathan το 2017, το Tailwind CSS διαφέρει από άλλες βιβλιοθήκες CSS με πολλούς τρόπους. Έχει μηδενικό χρόνο λειτουργίας, καθιστώντας το αστραπιαία. Και είναι εύκολο στην εγκατάσταση. Το Tailwind σαρώνει όλα τα αρχεία HTML και τα στοιχεία JavaScript για ονόματα κλάσεων στην εφαρμογή σας. Στη συνέχεια δημιουργεί τα αντίστοιχα στυλ που σχεδιάζουν τα στοιχεία.

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