CSS בוטסטראפ לעומת tailwindcss

אלעזר 1

צוות הנהלה
מנהל
מנוי פרימיום
בוגר/תלמיד פרוג
עיצוב גרפי
כתיבה ספרותית
עיצוב פונטים
מוזיקה ונגינה
UX UI
D I G I T A L
יוצרי ai
האם יש כאן מישהו שהתנסה ב-tailwindcss ויכול לומר מנסיון במה זה עדיף / שונה מבוטסטראפ?
 

this my name

משתמש מקצוען
הנדסת תוכנה
D I G I T A L
אני השתמשתי בשניהם, ההבדלים העיקרים שראיתי:
בבוסטראפ הקוד יותר נקי, קריא. לא צריך על כל תכונה של CSS להוסיף קלאס.
לצורך ההשוואה, כך יראה button בבוסטראפ:
HTML:
<button type="button" class="btn btn-primary">Primary</button>
וכך בtailwindcss :
HTML:
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Button
</button>

בנוסף בבוסטראפ יש אוטומטית את כל הeventים של ה button:
hover, focusOn , focusOut, click וכו'.

ניתן לראות את ההשוואה פה:
1622573020705.png1622573020705.png
 

ש.ב.ח.

משתמש מקצוען
מנוי פרימיום
בוגר/תלמיד פרוג
עיצוב גרפי
D I G I T A L
@אלעזר 1
בוטסטראפ היא ספריית קומפננטות ויש לה גם עזרים כללים בCSS
tailwind היא ספריה ללא קומפוננטות.
הבלעדיות של האחרונה שלא רואים על העיצוב מיד שזה tailwind כמו שראוים בבוטסטראפ עוד לפני שחוקרים...

אני אישית אוהב יותר את tailwind
אבל אני משתמש איתו עם NPM וכך הוא יותר גמיש
(אפשר ליצור קלאסים על הקלאסים שלו וכמובן להוסיף עוד וריאציות וכו')
 

אלעזר 1

צוות הנהלה
מנהל
מנוי פרימיום
בוגר/תלמיד פרוג
עיצוב גרפי
כתיבה ספרותית
עיצוב פונטים
מוזיקה ונגינה
UX UI
D I G I T A L
יוצרי ai
@אלעזר 1
בוטסטראפ היא ספריית קומפננטות ויש לה גם עזרים כללים בCSS
tailwind היא ספריה ללא קומפוננטות.
הבלעדיות של האחרונה שלא רואים על העיצוב מיד שזה tailwind כמו שראוים בבוטסטראפ עוד לפני שחוקרים...

אני אישית אוהב יותר את tailwind
אבל אני משתמש איתו עם NPM וכך הוא יותר גמיש
(אפשר ליצור קלאסים על הקלאסים שלו וכמובן להוסיף עוד וריאציות וכו')
איך אתה מסתדר מאידך עם מה שכתב @this my name , או שכבר התרגלת (או שאתה עובד עם אפיון מוכן)?

@יידישע קאפ מוזמן גם.
 

ש.ב.ח.

משתמש מקצוען
מנוי פרימיום
בוגר/תלמיד פרוג
עיצוב גרפי
D I G I T A L
איך אתה מסתדר מאידך עם מה שכתב @this my name , או שכבר התרגלת (או שאתה עובד עם אפיון מוכן)?
ראשית מתרגלים
שנית אני עובד גם עם קלאסים רגילים בהם אני משתמש עם הקלאסים של taiwind (כמובן עם webpack)
CSS:
.btn {
    @apply
        rounded-full
        font-bold
        curser-pointer
        hover:opacity-85
        hover:shadow
}
 

אולי מעניין אותך גם...

הפרק היומי

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


תהילים פרק קיט ק'

קמה קָרָאתִי בְכָל לֵב עֲנֵנִי יי חֻקֶּיךָ אֶצֹּרָה:קמו קְרָאתִיךָ הוֹשִׁיעֵנִי וְאֶשְׁמְרָה עֵדֹתֶיךָ:קמז קִדַּמְתִּי בַנֶּשֶׁף וָאֲשַׁוֵּעָה (לדבריך) לִדְבָרְךָ יִחָלְתִּי:קמח קִדְּמוּ עֵינַי אַשְׁמֻרוֹת לָשִׂיחַ בְּאִמְרָתֶךָ:קמט קוֹלִי שִׁמְעָה כְחַסְדֶּךָ יי כְּמִשְׁפָּטֶךָ חַיֵּנִי:קנ קָרְבוּ רֹדְפֵי זִמָּה מִתּוֹרָתְךָ רָחָקוּ:קנא קָרוֹב אַתָּה יי וְכָל מִצְוֹתֶיךָ אֱמֶת:קנב קֶדֶם יָדַעְתִּי מֵעֵדֹתֶיךָ כִּי לְעוֹלָם יְסַדְתָּם:
נקרא  10  פעמים

אתגר AI

הסוואה • אתגר 21 • אתגר נושא פרסים 🎁

לוח מודעות

למעלה