Software
February 10, 2025

TailwindCSS Course Reference Book

מה זה הפוסט הזה

זה סתם פנקס כיס שמסכם כל מיני דברים שלמדתי בקורס על tailwind
הוא נבנה יותר כמו reference מאשר מדריך.

מה זה

Tailwind זוהי ספריית Utility ל-CSS.
היא לא מגדירה אלמנטים אלה מגדירה מחלקות CSS אשר מקצרות את השימוש בקלאסים הרגילים של CSS לסטיילינג.

הקורס

זהו קורס ביודמי שעולה כסף, ממליץ לכל מי שרוצה ללמוד Tailwind

https://www.udemy.com/course/tailwind-from-scratch

דברים מגניבים בVS CODE

alt+z זה הקיצור ל-wrap
מאוד נוח בעבודה עם HTML.

emmet abbreviation נותן קיצורים מאוד נוחים לכתיבת אלמנטים:
אם תכתבו את זה ותלחצו ENTER:
button.m-4.bg-black.text-white.rounded-xl

זה מייצר אלמנט: 

1
<button class="bg-black m-4 text-white rounded-xl m-3"></button>

ניתן להכפיל גם:

div{Item $}*20

זה יוצא 20 דיבים עם המספרים 1 עד 20.
אפשר גם רגיל:

button.bg-black.text-white*20

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

צבעים

תחביר
<entity>-<color>-[100-900]

ישויות:

  • text - טקסט
  • bg - רקע
  • decoration - קווים תחתוניים לטקסט
  • border - מסגרת
  • outline - מסגרת קו
  • shadow - צל
  • divide - מפצל אלמנטים

דוגמאות:
bg-red-500
text-blue-900
bg-[green]
outline-[rgb(255,0,0)]

גדלים ומספרים

צבעים ניתן להגדיר בין 100 ל 900 תלוי בחוזק
יש אלמנטים שניתן להגדיר גם מינוסים עליהם

גדלים יכולים להיות:
xs, sm, md, lg, xl, 2xl , 9xl
לא לכל קלאס יש את הכל אז צריך לבדוק.

Container

ניתן לשים את הקלאס container בשביל לגרום לאלמנט להיות רספונסיבי.

margin, padding

[m/p]-[t/b/l/r/x/y]-[1..96]

  • t - top
  • b - bottom
  • l - left
  • r - right
  • x - left and right
  • y - up and down

m-5
mt-20
mt-[20px]
p-20
pt-4

Spacing

יוצר ריווח בין אלמנטים, טוב עם flex.

space-x-4
space-y-20

טפוגרפיה

שימוש בפונטים:
font-sans
font-serif
font-mono

לקנפג פונט: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Tapestry&display=swap" rel="stylesheet">

<script src="https://cdn.tailwindcss.com"></script>
<title>Typography</title>
<script>
  tailwind.config = {
    theme: {
      fontFamily: {
        'sans': ['ui-sans-serif', 'system-ui'],
        'serif': ['Tapestry', 'Georgia'],
        'mono': ['ui=monospace', 'SFMono-Regular']
      }
    }
  }

גדלים

text-[xs/sm/base/lg/xl/2xl/3xl/...9xl]

font-[light/normal/medium/semibold/bold]

text-left
text-right
text-justify

tracking-tight
tracking-normal
tracking-wide

Decorations

קודם שימוש בקלאס:

underline

אחר כך אפשר לעצב גודל ועיצוב:
decoration-[1-8/from-font]
decoration-[double/dotted/dashed/wavy]
decoration-[color]-[100-900]
underline-offset-8 - הרחקה של הקו מהאלמנט.

Text Transform

יכולת של CSS לשנות את הטקסט.

uppercase
lowercase
capitalize
normal

גודל אלמנטים

גם לגובה וגם לרוחב

[w/h]-[1..96]

אפשר גם אחוזים
w-1/3 - שליש

``w-screen` מסך מלא

w-full
w-min
w-max

מיקום

דומה מאוד לCSS קלאסי

absolute
relative
flex
grid

וכדו’

מיקום במרחב יכול להיקבע ע”י:
[left/right/top/bottom]-[1..96] \

אפשר לקבוע Z INDEX גם:
z-0, z-50, z-auto.

או לרחף:
float-right, float-left

רקעים

יש אלמנטים קלאסיים:
bg-no-repeat bg-cover bg-scroll

ניתן לשלב צבעים ביחד בעזרת:
mix-blend-multiply

וניתן לקבוע גרדיאנטים:
bg-gradient-to-r from-orange-100 to-red-900

מסגרות

קובעים בעזרת הקלאס:
ניתן לשנות גודל:

border-[x/y/t/b/l/r]-[1..8]

ניתן גם לא לציין לאיזה מיקום כדי לעשות להכל
border-4

rounded-[t/b]-[none/xs/sm/md/lg/xl/2xl/3xl]

אפשר להוסיף לאלמנטים אאוטליין באותה הדרך:
outline outline-2 outline-red-200

אפקטים בסיסיים ברנדור

blur-[none/sm/md/lg/xl/2xl/3xl]

birghtness-[0/50/75/90...200]

contrast-[0..200]

grayscale

invert

בכפולות של 15 נוכל להזיז את הצבע:
hue-rotate-[0-180]

אינטרקטיביות

כשהעכבר עושה משהו

[hover/focus/active]:[myattribute]

בעזרת hover:... תוכלו לקבוע מה קורה כשהעכבר עובר על האלמנט למשל.

כדי שהילדים יוכלו להירשם לקבלת אירועים ניתן בתוך הילדים לשים:

group-hover:...
כדי שייקרה משהו כשהקבוצה למעלה מקבלת את האירוע.

הדברים הרגילים

first:
last:
even:
odd:

nth Child

[&>*:nth-child(odd)]:bg-red-500

זה טיפה יותר מורכב

& - בוחר את האלמנט העליון
*> - אומר כל הילדים
:nth-child(...) - השימוש בnth-child
אחרי ה-: זה כבר חוק ה-CSS החדש.

scroll smooth

ניתן להוסיף את זה על כל העמוד כדי שיהיה סקרול חלק:

class="scroll-smooth"

למחוק כל עיצוב דיפולטיבי

תוסיפו את זה כדי למחוק כל עיצוב שהדפדפן מנסה לעשות על האלמנט:
class="appearance-none"

מצביעים - עכבר

כדי לשנות את איך שהעכבר נראה:
cursor-[design]

יש מלא אז פשוט לחפש איזה רוצים.

בחירת טקסט

עוזר להתנהגות בחירת הטקסט.
למשל all ייבחר את הכל בלחיצה אחת.

select-[none/text/all/auto]

Breakpoints - mobile width and height

sm 640px @media (min-width: 640px) { … }
md 768px @media (min-width: 768px) { … }
lg 1024px @media (min-width: 1024px) { … }
xl 1280px @media (min-width: 1280px) { … }
2xl 1536px @media (min-width: 1536px) { … }

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

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

1
<h1 class="text-xl md:text-3xl lg:text-5xl"></h1>

Columns

כמה טורים יהיו לנו והריווח ביניהם

columns-[1..12/auto/3xs-7xl]

gap-[1..]

ניתן להוסיף break-before או break-after

Flex

flex מגדיר מיקום וגודל שיכול להיות גמיש ביכולות שלו.
בעזרת תכונות מסוימות

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

1
<div class="flex flex-col md:flex-row"></div>

בשביל להציב את האלמנטים בצורה מסוימת:
items-[start/end/center/baseline/stretch]
נתין להוסיף את זה בשביל להשלים:
justify-[start/end/center/between/around/evenly]

זה תלוי אם שמים flex-col או flex-row.

ריווח:
gap-[n]
סדר:
order-[n]

flex-[none/initial/auto/1]

  • none - no grow no shrink
  • initial - no grow, yes shrink with initial size
  • auto - yes grow yes shrink with initial size
  • 1 - yes grow yes shrink ignoring start size

Grid

מאוד פשוט, שמים:
grid

ואז אפשר לעצב איך שרוצים בעזרת :
grid-col-[n]
grid-row-[n]

col-span-[n]
row-span-[n]

Transform

אנימציות או שינוי מצב של אלמנט

להכל:
transition
transition-none
transition-all
transition-colors
transition-opacity
transition-shadow
transition-transform

ease-[linear/in/out/in-out]

duration-[n]
delay-[n]
scale-[n]
scale-[x/y]-[n]
rotate-[n]
skew-[x/y]-[n]
translate-[x/y]-[n/px]

origin-[center/top/bottom/right/left]-[right-left]

Animation

Out of the box:
animate-none
animate-spin
animate-ping
animate-pulse
animate-bounce

config: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
tailwind.config = {
     theme: {
       extend: {
         animation: {
           'spin-slow': 'spin 1s linear infinite',
           'wiggle': 'wiggle 5s infinite'
         },
         keyframes: {
           wiggle: {
             '0%,100%': {
               transform: 'rotate(-180deg)'
             },
             '50%': {
               transform: 'rotate(180deg)'
             }
           }
         }
       }
     }
   }

Configuration

https://v2.tailwindcss.com/docs/configuration

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// Example `tailwind.config.js` file
const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      gray: colors.coolGray,
      blue: colors.lightBlue,
      red: colors.rose,
      pink: colors.fuchsia,
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
  variants: {
    extend: {
      borderColor: ['focus-visible'],
      opacity: ['disabled'],
    }
  }
}

A JS object which allows to replace, remove, add or extend behaviors for the css properties generated by tailwind.

Dark mode

בשביל לשים תכונה על אלמנט שיופיע כאשר זה עובר ל-dark:

class="text-black dark:text-white"

שינוי DARK MODE:
בשביל להפעיל על ידי CLASS: 

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
  tailwind.config = {
    darkMode: 'class'
  }

document.getElementById('toggle').addEventListener('change', function() {
  if (this.checked) {
    document.documentElement.classList.add('dark')
  } else {
    document.documentElement.classList.remove('dark')
  }
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<style>
   .toggle-checkbox:not(:checked) {
     background: #fff989;
     border-color: #fff700;
   }

   .toggle-checkbox:checked {
     right: 0;
     background: #808080;
     border-color: #c0c0c0;
   }

   .toggle-checkbox:not(:checked) + .toggle-label {
     background: #6baeff;
     border-color: #6baeff;

   }

   .toggle-checkbox:checked+.toggle-label {
     background: #272727;
     border-color: #dadada;

   }
 </style>

<div class="relative inline-block w-10 mr-2 ml-6 mt-6 align-middle select-none transition duration-200 ease-in">
   <input type="checkbox" name="toggle" id="toggle" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer" />
   <label for="toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
 </div>

Tailwind CLI

כדי להתקין CLI:

https://tailwindcss.com/docs/installation/tailwind-cli

כדי להתקין POSTCSS:

Directive & Functions

https://tailwindcss.com/docs/functions-and-directives

בשביל להשתמש בשכבה:
@layer

בשביל להשתמש בחוק קיים בתוך חוק שיצרנו:
@apply

על הפוסט

הפוסט נכתב על ידי Ilya, רישיון על ידי CC BY-NC-ND 4.0.

שתפו את הפוסט

Email Facebook Linkedin Print

קנו לי קפה

#Software#CSS#Tailwind