قائمة مرجعية لخصائص 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 تلك الفئات التي يمكننا استخدامها لمطابقة اللون المقابل:
transparentblackgraywhiteredorangeyellowgreentealblueindigopurplepink
تحذير:grayكنتgreyقبل TailWind 1.0. ضع ذلك في الاعتبار إذا كان لديك مشروع قديم حولك.
كل لون له مستويات مختلفة. يمكنك استخدام-100يصل إلى-900لجعل اللون يتحول من أقل كثافة إلى أكثر كثافة:
orange-100orange-200orange-300orange-400orange-500orange-600orange-700orange-800orange-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: