ورقة الغش في Tailwind

قائمة مرجعية لخصائص CSS الشائعة التي تريد استخدامها في Tailwind ، والفئات النسبية لها

لقد كتبت ورقة الغش هذه لأنني أجد نفسي أشير باستمرار إلى مستندات Tailwind لتذكير فصل معين (بدأت ولا أمتلك ذاكرة عضلية بعد لذلك)

هذه هي الأشياء التي أستخدمها أكثر من غيرها.

الهامش والحشو

قم بتكوين هذه الجداول الثلاثة. أضف شرطة قبل القيمة (على سبيل المثالpt-2وm-auto)

رمز وصف
p حشوة
m هامش
-m الهامش السلبي
رمز وصف
ر قمة
ص حق
ب قاع
ل اليسار
x أفقي
ذ رأسي
قيمة وصف
0 0
1 0.25rem
2 0.5rem
3 0.75rem
4 1rem
5 1.25rem
6 1.5rem
8 2rem
10 2.5rem
12 3rem
16 4rem
20 5rem
24 6rem
32 8rem
مقصف 1px
تلقاءي auto

margin: 0 auto

أنا في بعض الأحيان استخدمmargin: 0 autoلتوسيط الأشياء.

الطبقةmx-autoيطبقها.

عرض

فصل CSS
w-1 width: 0.25rem
w-2 width: 0.5rem
w-3 width: 0.75rem
w-4 width: 1rem
w-6 width: 1.5rem
w-8 width: 2rem
w-10 width: 2.5rem
w-12 width: 3rem
ث -16 width: 4rem
دبليو 24 width: 6rem
w-32 width: 8rem
w-48 width: 12rem
w-64 width: 16rem
w- تلقائي width: auto
w-px width: 1px
ث-12 width: 50%
ث-13 width: 33.33333%
ث-23 width: 66.66667%
ث-14 width: 25%
ث-34 width: 75%
ث-15 width: 20%
ث-25 width: 40%
ث-35 width: 60%
ث-45 width: 80%
ث-16 width: 16.66667%
ث-56 width: 83.33333%
ث كامل width: 100%
شاشة w width: 100vw

العرض الأقصى

فصل CSS
ماكس wxs max-width: 20rem
ماكس- w-sm max-width: 30rem
ماكس- w-md max-width: 40rem
ماكس- w-lg max-width: 50rem
ماكس w-xl max-width: 60rem
ماكس w-2xl max-width: 70rem
ماكس w-3xl max-width: 80rem
ماكس w-4xl max-width: 90rem
ماكس w-5xl max-width: 100rem
ماكس ث كامل max-width: 100%

العرض الأدنى

فصل CSS
min-w-0 min-width: 0
دقيقة كاملة min-width: 100%

خط العائلة

فصل CSS
الخط بلا font-family: system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
الخط الرقيق font-family: Constantia, Lucida Bright, Lucidabright, Lucida Serif, Lucida, DejaVu Serif, Bitstream Vera Serif, Liberation Serif, Georgia, serif;
خط أحادي font-family: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;

حجم الخط

فصل CSS
نص xs font-size: .75rem
نص- sm font-size: .875rem
قاعدة النص font-size: 1rem
نص- lg font-size: 1.125rem
النص xl font-size: 1.25rem
نص 2xl font-size: 1.5rem
نص 3xl font-size: 1.875rem
نص 4xl font-size: 2.25rem
نص 5xl font-size: 3rem

وزن الخط

فصل CSS
خط شعري font-weight: 100
رقيق الخط font-weight: 200
الخط الخفيف font-weight: 300
الخط العادي font-weight: 400
متوسط الخط font-weight: 500
خط نصف غامق font-weight: 600
خط غامق font-weight: 700
الخط الخارجي font-weight: 800
الخط الأسود font-weight: 900

الألوان

توفر لنا Tailwind تلك الفئات التي يمكننا استخدامها لمطابقة اللون المقابل:

  • transparent
  • black
  • gray
  • white
  • red
  • orange
  • yellow
  • green
  • teal
  • blue
  • indigo
  • purple
  • pink

تحذير:grayكنتgreyقبل TailWind 1.0. ضع ذلك في الاعتبار إذا كان لديك مشروع قديم حولك.

كل لون له مستويات مختلفة. يمكنك استخدام-100يصل إلى-900لجعل اللون يتحول من أقل كثافة إلى أكثر كثافة:

  • orange-100
  • orange-200
  • orange-300
  • orange-400
  • orange-500
  • orange-600
  • orange-700
  • orange-800
  • orange-900

لون الخط

يعلقtext-إلى أي لون

لون الخلفية

يعلقbg-إلى أي لون

نص المركز

يستخدمtext-center

ارتفاع خط

فصل CSS
.leading- لا شيء line-height: 1
.leading- ضيق line-height: 1.25
.leading-normal line-height: 1.5
.leading-loose line-height: 2

فليكس بوكس

حاوية

فصل CSS
ثني display: flex
مضمنة المرن display: inline-flex

العناصر

اتجاه

فصل CSS
الصف المرن flex-direction: row
الصف المرن عكس flex-direction: row-reverse
فليكس كول flex-direction: column
فليكس كول عكس flex-direction: column-reverse

يلف

فصل CSS
فليكس لا التفاف flex-wrap: nowrap
التفاف المرن flex-wrap: wrap
فليكس التفاف عكس flex-wrap: wrap-reverse

محاذاة العناصر

فصل CSS
العناصر تمتد align-items: stretch
بدء العناصر align-items: flex-start
مركز العناصر align-items: center
نهاية العناصر align-items: flex-end
العناصر الأساسية align-items: baseline

محاذاة المحتوى

فصل CSS
بداية المحتوى align-content: flex-start
مركز المحتوى align-content: center
نهاية المحتوى align-content: flex-end
بين المحتوى align-content: space-between
حول المحتوى align-content: space-around

محاذاة الذات

فصل CSS
ذاتي تلقائي align-self: auto
البدء الذاتي align-self: flex-start
مركز شخصي align-self: center
نهاية الذات align-self: flex-end
التمدد الذاتي align-self: stretch

تبرير المحتوى

فصل CSS
تبرير البدء justify-content: flex-start
تبرير الوسط justify-content: center
تبرير النهاية justify-content: flex-end
تبرير بين justify-content: space-between
تبرير حول justify-content: space-around

المرن والنمو والانكماش

فصل CSS
المرن الأولي flex: initial
flex-1 flex: 1
فليكس تلقائي flex: auto
فليكس لا شيء flex: none
ينمو المرن flex-grow: 1
فليكس تقليص flex-shrink: 1
فليكس لا ينمو flex-grow: 0
فليكس لا يتقلص flex-shrink: 0

الصفات التعريفية

يحوم

hover:

تحميل مجانيكتيب CSS


المزيد من دروس css: