Δουλεύοντας με το Tailwind στο NextJS

Στο NextJS, μπορείτε να χρησιμοποιήσετε το πλαίσιο CSS Tailwind για στυλ, το οποίο χρησιμοποιείται συχνά με το React. Ας δούμε πώς να το χρησιμοποιήσουμε.

Για να δουλέψετε με τα στυλ Tailwind, απαιτούνται δύο αρχεία: tailwind.config.js και postcss.config.js. Δεδομένου ότι κατά την εγκατάσταση του project επιλέξαμε την επιλογή "χρήση στυλ Tailwind", αυτά τα αρχεία έχουν ήδη δημιουργηθεί στο project μας και βρίσκονται στη ρίζα του. Εάν αυτά τα αρχεία δεν υπάρχουν, πρέπει να εγκαταστήσετε το Tailwind σύμφωνα με την επίσημη τεκμηρίωση.

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

app/test/page.jsxexport default function Test() {
  return <p className="font-bold text-yellow-500">
    κείμενο κείμενο κείμενο
  </p>;
}