מדריך ל-Tailwind CSS

Tailwind CSS הוא CSS Framework פופולארי.
הוא די שונה מ-Bootstrap המוכר ואהוב ובהחלט כדאי להכיר אותו.

אז במה שונה Tailwind CSS מ-Bootstrap?

סביר להניח שזוהי השאלה הראשונה שמעניינת אתכם, הרי יש את Bootstrap המוכר ואהוב שעושה עבודה נפלאה, אז מדוע להכיר Framework אחר? כי Tailwind CSS שונה מאוד מ-Bootstrap, הוא בנוי אחרת והגישה לשימוש בו שונה מאוד.
כידוע לכם, Bootstrap מכיל קומפוננטות מוכנות, כלומר, יש קומפוננטות CSS מוכנות לכפתורים שונים, להודעות למשתמש (success, danger וכו'), טפסים, תפריטי ניווט וכו'.
Tailwind CSS בנוי אחרת, הוא מוגדר כ-utility-first CSS framework, הוא מציע לכם css classes ומשם אתם לוקחים את זה לאן שתרצו, הוא לא מכתיב לכם כיצד הרכיב הסופי שלכם יראה.
Tailwind CSS נותן לכם את הגמישות המלאה ליצור רכיב במהירות ובקלות באמצעות classes שונים כך שהשילוב בין ה-classes השונים יכול ליצור את אותו הרכיב בכמעט אין ספור עיצובים ותצורות שונות.
קטע קוד אחד שווה ל-1000 מילים:

כפתור ב-Bootstrap לעומת כפתור ב-Tailwind CSS

אם נרצה ליצור כפתור Primary ב-Bootstrap המוכר ואהוב, נעשה את זה כך:

<button type="button" class="btn btn-primary">Button</button>

אבל אילו היינו רוצים ליצור כמעט את אותו הכפתור ב-Tailwind CSS זה היה נראה כך:

<button class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded">Button</button>

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

<button class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 font-bold rounded-full">Button</button>

כל class שהכנסנו לכפתור הוא אחד מבין רבים שמאפשרים לשנות את עיצוב הכפתור כמעט לגמרי.

על ה-Classes ש-Tailwind CSS מציע

גודל הטקסט

text-xs – גודל 0.75rem
text-sm – גודל 0.875rem
text-base – גודל בסיס 1rem
text-lg – גודל 1.125rem
text-xl – גודל 1.25rem
ומכאן זה ה-xl גדל במספרו וכך גדל הטקסט:
text-2xl – גודל 1.5rem
.
.
.
text-6xl – גודל 4rem

עובי הטקסט

font-hairline – עובי 100 (font-weight: 100)
font-thin – עובי 200
ומכאן זה ממשיך: light, normal, medium, semibold, bold, extrabold, black

כך זה נראה בתיעוד של Tailwind CSS:

מגוון ה-classes לעובי הטקסט.
מגוון ה-classes לעובי הטקסט.

צבע רקע

Tailwind CSS מספק לכם כמעט אין ספור אופציות לצבעים וברמות שונות לרקע:

bg-gray-100 – אפור בהיר.
bg-gray-200 – כהה יותר.
.
.
.
.
bg-gray-900 – כהה מאוד.

כך כמובן לגבי red, orange, yellow וכו'.

מגוון ה-classes לצבע הטקסט.
מגוון ה-classes לצבע הטקסט.

עובי מסגרת

border – מסגרת בעובי 1px
border-2 – מסגרת בעובי 2px
.
.
.
.
border-8 – מסגרת בעובי 8px.

מגוון ה-classes לעובי המסגרת.
מגוון ה-classes לעובי המסגרת.

עיגול מסגרת

rounded-sm – מסגרת בגודל 0.125rem
rounded – מסגרת 0.25rem
rounded-md – מסגרת בגודל 0.375rem

וכמובן שניתן לשלוט גם על top, right, bottom ו-left באופן פרטני.

מגוון ה-classes לעיגול המסגרת.
מגוון ה-classes לעיגול המסגרת.

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

אז איך מתקינים?

את Tailwind CSS ניתן להתקין בכמה דרכים אבל ארחיב על 2 אופציות.

CDN

התקנה פשוטה מאוד, רק לכלול את ה-cdn בקובץ ה-html שלכם:

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

איך שימו לב, יש מספר חסרונות לשיטה זו, לא תוכלו להשתמש ב-directives כמו @apply, @variants
לא תוכלו להשתמש ב-plugins חיצוניים
ועוד הגבלות שתוכלו לקרוא עליהם בעמוד המסביר על ההתקנה.

התקנה באמצעות npm או Yarn

הדרך המועדפות כמובן.
התקנה פשוטה:

npm

npm install tailwindcss

Yarn

yarn add tailwindcss

בקובץ ה-css שלכם כללו את ה-3 קבצי css האלו כך:
*אצלי הקובץ נמצא בתיקייה בשם src, נתון חשוב לתהליך ה-build שעוד רגע ארחיב עליו.

@tailwind base;

@tailwind components;

@tailwind utilities;

הערה: בתיעוד של Tailwind CSS הם מציעים למי שמתמש ב-postcss-import לכלול את הקבצים בדרך שונה.

כעת יש להריץ build על מנת ליצור את הקובץ לפרודקשן:

npx tailwindcss build src/style.css -o dist/style.css

ומיד נראה שנוצר לנו קובץ style.css בתיקייה בשם dist כפי שהגדרנו.

כללו אותו בקובץ ה-HTML שלכם וזהו זה, Tailwind CSS מותקן בפרויקט שלכם.

הרחבה על תהליך ההתקנה

אני ממליץ בחום לקרוא את התיעוד של Tailwind CSS בנושא ההתקנה.
תוכלו לקרוא שם על דרכי התקנה שונים, שימוש ב-plugins ועוד.

סיכום

אין ספק שבמבט ראשון השימוש ב-Tailwind CSS יכול להיראות טיפה מסורבל וכזה שמקשה על העבודה אבל מצד שני, לאחר שמכירים את אופן הפעולה שלו ואת שמות ה-classes שלו, הכתיבה של ה-CSS הופכת למהירה מאוד וכזו שמאפשרת גמישות רבה שאין ב-Frameworks אחרים וטובים.
האם אני ממליץ לעבור מ-Bootstrap ל-Tailwind CSS? זה תלוי בפרויקט שלכם ובאופיו.
אם הפרויקט שלכם מסתדר עם עיצוב שמזוהה עם Bootstrap, זו בחירה טובה וכזו שתקל על מהירות הפיתוח. במידה והפרויקט שלכם דורש עיצוב שיותר מותאם אישית, Tailwind CSS הוא בחירה ששווה מאוד לשקול.
בהצלחה!

נהנת ממאמר זה? הירשם לרשימת התפוצה וקבל עדכונים על מאמרים חדשים!


2 תגובות בנושא “מדריך ל-Tailwind CSS”

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *