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

הפעל את הפקודה הבאה בטרמינל כדי פיגום א לְהָגִיב יישום באמצעות אפליקציה ליצור-להגיב.

npx create-react-app react-backwind

אפליקציה ליצור-להגיב מספק דרך קלה ליצור אפליקציית React מבלי להגדיר כלי בנייה כמו webpack, babel או linters. המשמעות היא שבסופו של דבר תהיה לך סביבת React עובדת בתוך דקות.

הפקודה לעיל יוצרת תיקיה חדשה בשם תגובה-רוח גב. נווט אל התיקיה ופתח אותה באמצעות עורך הטקסט המועדף עליך.

CD מגיב-רוח עורף

לאחר מכן, התקן את 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 base;
@tailwind רכיבים;
@tailwind כלי עזר;

לבסוף, תוודא index.css מיובא ב index.js ו- Tailwind CSS יהיה מוכן לשימוש.

שימוש ב-Tailwind CSS לעיצוב רכיב React

אתה תיצור את דף האינטרנט הפשוט למטה ותעצב אותו באמצעות מחלקות השירות של Tailwind.

דף זה מכיל שני חלקים עיקריים: א סרגל ניווט, וקטע הגיבורים (שיש לו כותרת וכפתור).

כדי להמחיש כיצד Tailwind CSS מקל על כתיבת CSS, נסה לעצב את דף האינטרנט באמצעות CSS רגיל ו- Tailwind CSS.

התחל על ידי שינוי ה- App.js בתוך ה src תיקייה כדי להסיר את הקוד המיותר.

ייבוא ​​'./App.css'
function App() {
 לחזור (



 );
}
ייצוא אפליקציית ברירת מחדל;

לאחר מכן, הוסף את תוכן דף האינטרנט App.js.

ייבוא ​​"./App.css";
function App() {
 לחזור (







 Tailwind CSS מקל על עיצוב רכיבי React!



להתחיל






 );
}

כדי להשתמש ב-CSS רגיל, הוסף את ה-CSS ל App.css.

nav {
 תצוגה: flex;
 להצדיק-תוכן: רווח-בין;
 ריפוד: 16px 36px;
 צבע: #000;
 box-shadow: 0px 2px 5px 0px rgba (168, 168, 168, 0.75);
}
‎.logo {
 גודל גופן: 18px;
 מודגש;
}
ul {
 סגנון רשימה: אין;
 תצוגה: inline-flex;
}
ul li {
 שוליים-שמאליים: 16px;
 סמן: מצביע;
}
.hero {
 תצוגה: flex;
 flex-direction: עמודה;
 align-items: center;
 שוליים-עליון: 64px;
}
h1 {
 גודל גופן: 36px;
 יישור טקסט: מרכז;
}
.btn {
 צבע רקע: #000000;
 צבע: #fff;
 ריפוד: 10px;
 רוחב: התאמה-תוכן;
 שוליים-עליון: 36px;
}

עם Tailwind CSS, אינך צריך לכתוב את כללי ה-CSS עבור כל מחלקה. במקום זאת, אתה משתמש במחלקות שירות. אלו הן מחלקות בהיקף של מאפיין CSS יחיד. לדוגמה, אם אתה רוצה ליצור כפתור עם רקע שחור וצבע טקסט לבן, עליך להשתמש ב- bg-שחור ו טקסט-לבן כיתות שירות.

App.js צריך להיראות כך.

function App() {
 לחזור (







 Tailwind CSS מקל על עיצוב רכיבי React!




 להתחיל







 );
}

אתה לא צריך לייבא App.css מכיוון שהסגנונות שנוצרו על ידי Tailwind CSS מאוחסנים ב index.css אליו ייבאת index.js מוקדם יותר.

בהשוואה ל-CSS רגיל, גישה זו מביאה לפחות קוד שקל להבין.

קוד בסגנון עם Tailwind CSS

במאמר זה למדת על Tailwind CSS, החוזקות, החסרונות שלו וכיצד אתה יכול להשתמש במחלקות השירות שלה ביישומי React. מלבד שיעורים, Tailwind CSS מציעה גם תכונות נוספות אחרות כולל היכולת ליצור פריסות רספונסיביות ורכיבים הניתנים לשימוש חוזר.

אבל, כפי שהזכרנו קודם לכן, Tailwind רחוקה מלהיות מסגרת ה-CSS היחידה בשוק. באיזה תשתמש בפרויקט הבא שלך?

Tailwind CSS לעומת Bootstrap: מהי מסגרת טובה יותר?

בעת בחירת מסגרת CSS חשוב למצוא את המסגרת שעונה על הדרישות שלך.

קרא הבא

על הסופר