Tailwind CSS קל להתקנה ולשימוש עם Next.js, רק ודא שאתה מגדיר אותו נכון קודם.
אם אתה רוצה לעצב את האפליקציות שלך עם מסגרת מהירה, גמישה ואמינה, Tailwind CSS היא אפשרות מצוינת. Tailwind היא מסגרת CSS שעוזרת לך לעצב רכיבי אינטרנט מותאמים אישית. אתה יכול לעצב רכיבים מבלי לעבור הלוך ושוב בין קבצי HTML ו-CSS.
בניגוד ל-Bootstrap, ל-Tailwind אין מחלקות מוגדרות מראש. במקום זאת, אתה יכול להתאים אישית את עצמך. עם Tailwind, אתה יכול לבנות רכיבים מורכבים עם כלי עזר, פונקציות והנחיות פרימיטיביות.
למד כיצד להתקין ולהשתמש ב-Tailwind כדי ליצור ממשקי משתמש מדהימים בפרויקטי Next.js שלך.
התקן את Tailwind CSS ב-Next.js
התחל על ידי התקנת Tailwind ביישום Next.js. התהליך דומה ל התקנת Tailwind באפליקציית React, עם הבדל קטן בתהליך ההגדרה.
עבור אל התקנת Tailwind CSS עמוד. לאחר מכן עבור אל מדריכי מסגרת סעיף ובחר Next.js. חלק זה מכיל את כל ההוראות שאתה צריך כדי להגדיר את Tailwind בפרויקט Next.js שלך.
להתקנת Tailwind באמצעות npm, מנהל החבילות של JavaScript, הפעל את שתי פקודות הטרמינל הבאות:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -pפקודות אלה יוצרות שני קובצי תצורה בשם tailwind.config.js ו postcss.config.js בתיקיית פרויקט השורש. קבצים אלה מציינים ש- TailwindCSS הותקן בהצלחה. אתה יכול גם להתקין את Tailwind CSS דרך Tailwind CLI או כתוסף PostCSS.
הגדר תבניות
לאחר ההתקנה, עליך להגדיר את נתיבי התבנית המופיעים במדריך ההתקנה לקובץ התצורה של האפליקציה שלך. הוסף את הקוד הבא ל- קובץ tailwind.config.js:
/** @סוּג {import('tailwindcss').Config}*/
מודול.exports = {
תוכן: [
"./app/**/*.{js, ts, jsx, tsx}",
"./pages/**/*.{js, ts, jsx, tsx}",
"./components/**/*.{js, ts, jsx, tsx}",
// או אם משתמשים בספריית `src`:
"./src/**/*.{js, ts, jsx, tsx}",
],
נושא: {
הארכה: {},
},
תוספים: [],
}
הוסף Tailwind Direct לאפליקציה
לאחר מכן, הוסף את הנחיות Tailwind הבאות לקובץ CSS של האפליקציה שלך. זה הקובץ בשם global.css. עליך למחוק את התוכן של קובץ global.css ולהוסיף את הנחיות Tailwind.
@tailwind base;@tailwind רכיבים;
@tailwind כלי עזר;
הפעל את תהליך הבנייה
כעת, בטרמינל, הפעל את כלי CLI עם הפקודה הבאה:
npm run devפקודה זו סורקת את קבצי התבניות שלך עבור שיעורים ובונה את ה-CSS שלך. זה יפתח לך יציאה לצפייה בדפדפן.
עכשיו, אם אתה מנווט לשרת ב http://localhost: 3000 אתה תראה את האפליקציה שלך. כדאי לשים לב לשינוי קל בתוכן. זה מצביע על כך שתהליך ההתקנה הצליח, ו- Tailwind CSS פעיל.
השתמש ב-Tailwind בפרויקט
לאחר מכן, בואו נבדוק את תכונות Tailwind CSS על ידי החלת שיעורים על הפרויקט שלכם. לדוגמה, יש לך אפליקציה עם הטקסט "Hello Tailwind". אתה רוצה לתת לו צבע אדום עם רקע תכלת.
ליצור Home.tsx קובץ ואז הוסף את הקוד הבא:
יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהבית() {
לַחֲזוֹר (
"bg-blue-300">
'טקסט-אדום-900'>שלום Tailwind CSS</h1>
</body>
);
}
כעת, כאשר תנווט לדפדפן, תראה את הטקסט שונה לאדום, והרקע כחול.
אתה יכול לחקור תכונות אחרות של Tailwind CSS כדי לסגנן רכיבים אחרים של האפליקציה שלך. השינויים המותנים מאפשרים לך ליצור מצבים תגובתיים כמו ריחוף ומיקוד. אתה יכול גם להתאים את הדפים שלך למצבים כהים ובהירים לפי העדפת המשתמש.
יתרונות השימוש ב-Tailwind CSS
Tailwind CSS, שיוצר על ידי Adam Wathan בשנת 2017, שונה מספריות CSS אחרות במובנים רבים. יש לו אפס זמן ריצה, מה שהופך אותו למהיר ברק. והוא קל להתקנה. Tailwind סורקת את כל קובצי ה-HTML ורכיבי JavaScript לאיתור שמות מחלקות באפליקציה שלך. לאחר מכן הוא מייצר את הסגנונות המתאימים שמעצבים את האלמנטים.
Tailwind CSS מאפשר לך לעצב רכיבים מורכבים מכלי עזר פרימיטיביים. אתה יכול לעשות שימוש חוזר בסגנונות על פני רכיבים ולהשתמש בשינויים כדי לעצב ממשק משתמש רספונסיבי. השתמש בשלבים כאן כדי ללמוד כיצד להתקין ולהשתמש ב- Tailwind CSS כדי להתאים אישית אפליקציות התואמות את המותג שלך.
