@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. העיצוב נהיה גלובלי מה שאומר שאתם משנים משהו במקום אחד - אתם יכולים להחריב למישהו אחר את הקומפוננטה שהוא ירק עליה דם, ואז הוא יחזור לרדוף אחריכם במסדרון עם קלשון. וכו' וכו' אז למה כן? 😶 קוד מורכב שחוזר על עצמו הרבה פעמים שלא יכול פשוט להיכנס לקומפוננטה נפרדת. מה חושבים? נוטים לצפצף על דוקומנטציות?