قائمة مرجعية لخصائص 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 |
ث-1⁄2 |
width: 50% |
ث-1⁄3 |
width: 33.33333% |
ث-2⁄3 |
width: 66.66667% |
ث-1⁄4 |
width: 25% |
ث-3⁄4 |
width: 75% |
ث-1⁄5 |
width: 20% |
ث-2⁄5 |
width: 40% |
ث-3⁄5 |
width: 60% |
ث-4⁄5 |
width: 80% |
ث-1⁄6 |
width: 16.66667% |
ث-5⁄6 |
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: