ראשיאודותטיוליםצילוםfull Stack
Yosefus FlaviusYosefus Flavius

Yosefus flavius

אני בעצמי

קישורים מהירים

  • דף הבית
  • אודות
  • בלוג
logo

© 2025 Yosefus Flavius WebDeveloper

@apply ב־Tailwind: מה זה ואיך להשתמש בזה נכון - מדריך מקיף עם טיפים ומידע שימושי

@apply ב־Tailwind: מה זה ואיך להשתמש בזה נכון

  1. בית
  2. >
  3. Full Stack
27 באפריל 2025• זמן קריאה: 2 דקות

@apply ב־Tailwind מאפשר לאחד מספר קלאסים לקלאס אחד, אבל יש לזה יתרונות וחסרונות. למדו איך להשתמש בזה בצורה חכמה ומתי כדאי להימנע.

אם מישהו מביא לך משו ואז משכנע אותך שעה לא להשתמש בו - הייתם ככל הנראה שולחים אותו לגריטה או לטיפול בנזעי חשמל. 😣 וזה בדיוק המקרה של @apply בTailwind. מה זה עושה? 😶 שמח ששאלתם! הילד נועד להחיל מספר קלאסים (מחלקות-class) שאתם כותבים שוב ושוב ושוב בTailwind, על קלאס אחד. תראה דוגמא כי זה סינית! 😶 .btn{ @apply py-2 px-5 bg-violet-500 text-white font-semibold rounded-full shadow-md hover:bg-violet-600; } מה הולך בסלט הזה? 😶 אנחנו בעזרת apply מחילים כמה קלאסים של tailwind על הקלאס btn ועכשיו שנשתמש בו נקבל בבת אחת את כל המפולת של הקלאסים שכתבנו ישר לפרצוף! נשמע טוב אז מה הבעיה? 😶 שבדוקומנטציה הם דיי מתחננים להשתמש בו רק במקרי קיצון, הם אפילו השתמשו בfont-bold כדי להדגיש את זה. בקצרה - אל תעשו את זה רק כדי לגרום לדף להיראות "נקי"!!! ועיקר נימוקם - תכתבו כבר css רגיל ונסגור את הבסטה! מה עשינו בזה? 1. שוב תצטרכו לזכור את רשימת השמות של הקלאסים שהמצאתם. 2. תצטרכו ללכת הלוך חזור בין הhtml לcss. 3. העיצוב נהיה גלובלי מה שאומר שאתם משנים משהו במקום אחד - אתם יכולים להחריב למישהו אחר את הקומפוננטה שהוא ירק עליה דם, ואז הוא יחזור לרדוף אחריכם במסדרון עם קלשון. וכו' וכו' אז למה כן? 😶 קוד מורכב שחוזר על עצמו הרבה פעמים שלא יכול פשוט להיכנס לקומפוננטה נפרדת. מה חושבים? נוטים לצפצף על דוקומנטציות?

linkedin
whatsapp
facebook
x
Y

Yosefus Flavius

כותב הבלוג

כתבות קשורות

כתבות דומות

איך להוסיף Dark Mode ב-React עם Tailwind CSS ו-Zustand תוך 20 שניות
27 באפריל 2025
Full Stack>>פרונט אנד

איך להוסיף Dark Mode ב-React עם Tailwind CSS ו-Zustand תוך 20 שניות

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

כל מה שצריך לדעת על צבעים ב־Tailwind CSS: טיפים, טריקים ואינטואיציה ️
27 באפריל 2025
Full Stack>>פרונט אנד

כל מה שצריך לדעת על צבעים ב־Tailwind CSS: טיפים, טריקים ואינטואיציה ️

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

CSS Mix-blend-mode: איך לשלב תוכן עם הרקע
27 באפריל 2025
Full Stack>>פרונט אנד

CSS Mix-blend-mode: איך לשלב תוכן עם הרקע

בפוסט הזה נלמד על שימוש ב־mix-blend-mode ב־CSS, טכניקת עיצוב מגניבה שמאפשרת לשלב את התוכן של האלמנט עם הרקע והאב בצורה מרהיבה ומיוחדת.