در این مطلب سعی بر آن شده است تا بصورت عمیق، آموزش کامل و جامع فریم ورک tailwind را مورد بررسی قرار داده و بتوانیم از این پس، از آن در پروژه های خود استفاده کنیم.
همانطور که میدانید، tailwind امروزه در حال تبدیل شدن به یک ابزار حرفه ای در کدنویسی HTML,CSS,RESPONSIVE در سمت فرانت اند میباشد و یادگیری آن هر چه زودتر، امری مهم بشمار میرود.
در انتهای این مقاله، آموزش ویدیویی تیلویند آمده است. از دست ندهید!
با tailwind میتوانید به سرعت وب سایت های مدرن بسازید بدون اینکه HTML خود را ترک کنید.
یک فریم ورک CSS که اولین ابزار کاربردی است، مملو از کلاس های مانند flex، pt-4، text-center و rotate-90 است که می توانید هر طرحی را بسازید، مستقیماً در html شما ساخته می شود .
من چند هزار کلمه نوشتهام که چرا «نامهای کلاس معنایی» سنتی دلیل سختی برای حفظ CSS هستند، اما حقیقت این است که تا زمانی که واقعاً آن را امتحان نکنید، هرگز حرف من را باور نخواهید کرد.واقعاً فکر میکنم که از خود میپرسید که چگونه تا به حال با CSS به روش دیگری کار کردهاید.
آدام واتان , خالق Tailwind CSS
از آنجایی که Tailwind بسیار آسان است، هرگز شما را تشویق نمی کند که یک سایت را دو بار طراحی کنید. حتی با یک پالت رنگ و مقیاس اندازه، ساختن همان جزء با ظاهری کاملاً متفاوت در پروژه بعدی آسان است.
Tailwind به طور خودکار تمام CSS های استفاده نشده را هنگام ساخت برای تولید حذف می کند، به این معنی که بسته CSS نهایی شما کوچکترین بسته ممکن است. در واقع، اکثر پروژه های Tailwind کمتر از ۱۰ کیلوبایت CSS را به مشتری ارسال می کنند.
می خواهید چیزی را در حالت شناور استایل کنید؟ کافیست hover: در ابتدای کلاسی که می خواهید اضافه کنید. برای حالتهای focus, active, disabled, focus-within, focus-visible و حتی حالتهای فانتزی که خودمان مانند شناور گروهی اختراع کردهایم، کار میکند.
و هزاران ابزار کاربردی دیگر که در طول بحث با آن آشنا خواهید شد. بیش از این منتظرتان نمیگزاریم و به نظر من، بزن بریم تا شروع کنیم رفیق!
Tailwind CSS با اسکن تمام فایلهای HTML، اجزای جاوا اسکریپت، و هر قالب دیگر برای نام کلاسها، تولید استایل های مربوطه و سپس نوشتن آنها در یک فایل CSS ثابت کار میکند.
ساده ترین و سریع ترین راه برای راه اندازی و اجرا با Tailwind CSS از ابتدا با ابزار Tailwind CLI است.
cmd در ویندوز یا command brew در مک را باز کرده و کد های زیر را به ترتیب بزنید.
npm install -D tailwindcss
npx tailwindcss init
تمام فایل های نصب شده را به یک پوشه انتقال دهید.
با یک ادیتور مناسب ، پوشه را باز کرده و تغییرات زیر را اعمال کنید.
مسیرها را به همه فایل های قالب خود در فایل tailwind.config.js خود اضافه کنید. مشابه مثال زیر عمل کنید:
/** @type {import(‘tailwindcss’).Config} */
module.exports = {
content: [“./src/**/*.{html,js}”],
theme: {
extend: {},
},
plugins: [],
}
یک پوشه src ساخته و فایل های پیش نیاز وبسایت خود را در آن درج کنید.
سپس دستورات tailwind@ را برای هر یک از لایه های Tailwind به فایل CSS اصلی خود اضافه کنید. در پوشه src/css/master.css
@tailwind base;
@tailwind components;
@tailwind utilities;
فرآیند ساخت Tailwind CLI را شروع کنید. ابزار CLI را اجرا کنید تا فایل های قالب خود را برای کلاس ها اسکن کنید و CSS خود را بسازید. کد زیر را بزنید:
npx tailwindcss -i ./src/css/master.css -o ./dist/output.css –watch
بعد از اجرا خواهید دید که یک پوشه با نام dist و حاوی output.css ایجادخواهد شد و cmd نیز در حالت watching خواهد رفت.
شروع به استفاده از Tailwind در HTML خود کنید. فایل CSS کامپایل شده خود را به اضافه کنید و از کلاس های کاربردی Tailwind برای استایل دادن به محتوای خود استفاده کنید.
پیشنهاد میکنیم آموزش نصب تیلویند در ری اکت را هم مطالعه کنید.
کلیک کنید
شاید جالب باشه بهتون بگم که کار تمام شد. کد زیر را در html خود بزنید و سیو بگیرید. خواهید دید که کار میکند.
در آموزش کامل و جامع فریم ورک tailwind ، هر کلاس کاربردی در Tailwind را می توان با افزودن یک اصلاح کننده به ابتدای نام کلاس که شرایطی را می خواهید هدف قرار دهید، توصیف می کند، به صورت مشروط اعمال کرد.
به عنوان مثال، برای اعمال کلاس bg-sky-700 در hover، از کلاس hover:bg-sky-700 استفاده کنید:
ویا کد زیر:
ویا مثال های زیر:
When you look annoyed all the time, people think that you're busy.***************
*************** ***************
This experience is designed to be viewed in landscape. Please rotate your device to view the site.
در آموزش کامل و جامع فریم ورک tailwind، و در قسمت ریسپانسیو، بطور پیش فرض ، ۵نقطه breakpoint در سیستم تیلویند وجود دارد به شرح جدول زیر:
Breakpoint prefix | Minimum width | CSS |
---|---|---|
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) { ... } |
فقط کافیست از این پس، هر المان را با نوشتن نام اسکوپ مورد نظر خود، در حالت های مختلف ریسپانسیو قرار دهید. مانند مثال زیر که در md قرمز و از lg به بعد آبی رنگ خواهد ماند.
Tailwind شامل یک پالت رنگ پیشفرض کاملاً ماهرانه است که اگر برند خاص خود را در ذهن ندارید، یک نقطه شروع عالی است.
پیشنهاد میکنیم با استفاده از لینک color tailwind به لیست نام گذاری رنگ ها در سایت اصلی مراجعه کنید.
پیشنهاد میکنیم تمام کلاس های ارایه شده در این مقاله را حفظ کنید، زیرا بسیار پر استفاده هستند و مابقی کلاس ها را با مراجعه به لینک های موجود،
مولفه ای برای تثبیت عرض یک عنصر
Class | Breakpoint | Properties |
---|---|---|
container | None | width: 100%; |
sm (640px) | max-width: 640px; | |
md (768px) | max-width: 768px; | |
lg (1024px) | max-width: 1024px; | |
xl (1280px) | max-width: 1280px; | |
2xl (1536px) | max-width: 1536px; |
مانند مثال زیر :
<div class="md:container md:mx-auto">
<!-- ... -->
</div>
ابزارهای کمکی برای کنترل تعداد ستون ها در یک عنصر
Class | Properties |
---|---|
columns-1 | columns: 1; |
columns-2 | columns: 2; |
columns-3 | columns: 3; |
columns-4 | columns: 4; |
columns-5 | columns: 5; |
columns-6 | columns: 6; |
columns-7 | columns: 7; |
columns-8 | columns: 8; |
columns-9 | columns: 9; |
columns-10 | columns: 10; |
columns-11 | columns: 11; |
columns-12 | columns: 12; |
columns-auto | columns: auto; |
columns-3xs | columns: 16rem; /* 256px */ |
columns-2xs | columns: 18rem; /* 288px */ |
columns-xs | columns: 20rem; /* 320px */ |
columns-sm | columns: 24rem; /* 384px */ |
columns-md | columns: 28rem; /* 448px */ |
columns-lg | columns: 32rem; /* 512px */ |
columns-xl | columns: 36rem; /* 576px */ |
columns-2xl | columns: 42rem; /* 672px */ |
columns-3xl | columns: 48rem; /* 768px */ |
columns-4xl | columns: 56rem; /* 896px */ |
columns-5xl | columns: 64rem; /* 1024px */ |
columns-6xl | columns: 72rem; /* 1152px */ |
columns-7xl | columns: 80rem; /* 1280px */ |
مانند کد زیر :
<div class="columns-3 ...">
<img class="w-full aspect-video ..." src="..." />
<img class="w-full aspect-square ..." src="..." />
<!-- ... -->
</div>
ابزارهای کمکی برای کنترل اینکه مرورگر چگونه باید اندازه کل یک عنصر را محاسبه کند
Class | Properties |
---|---|
box-border | box-sizing: border-box; |
box-content | box-sizing: content-box; |
مانند کد زیر:
<div class="box-border md:box-content">
<!-- ... -->
</div>
ابزارهای کمکی برای کنترل نوع جعبه نمایش یک عنصر
Class | Properties |
---|---|
block | display: block; |
inline-block | display: inline-block; |
inline | display: inline; |
flex | display: flex; |
inline-flex | display: inline-flex; |
table | display: table; |
inline-table | display: inline-table; |
table-caption | display: table-caption; |
table-cell | display: table-cell; |
table-column | display: table-column; |
table-column-group | display: table-column-group; |
table-footer-group | display: table-footer-group; |
table-header-group | display: table-header-group; |
table-row-group | display: table-row-group; |
table-row | display: table-row; |
flow-root | display: flow-root; |
grid | display: grid; |
inline-grid | display: inline-grid; |
contents | display: contents; |
list-item | display: list-item; |
hidden | display: none; |
مانند مثال زیر:
<div class="flex md:inline-flex">
<!-- ... -->
</div>
ابزارهای کاربردی برای کنترل بسته بندی محتوا در اطراف یک عنصر
Class | Properties |
---|---|
float-right | float: right; |
float-left | float: left; |
float-none | float: none; |
مانند کد زیر:
<img class="float-right hover:float-left" src="path/to/image.jpg">
Class | Properties |
---|---|
clear-left | clear: left; |
clear-right | clear: right; |
clear-both | clear: both; |
clear-none | clear: none; |
ابزارهایی برای کنترل نحوه تغییر اندازه محتوای عنصر جایگزین شده.
Class | Properties |
---|---|
object-contain | object-fit: contain; |
object-cover | object-fit: cover; |
object-fill | object-fit: fill; |
object-none | object-fit: none; |
object-scale-down | object-fit: scale-down; |
Class | Properties |
---|---|
object-bottom | object-position: bottom; |
object-center | object-position: center; |
object-left | object-position: left; |
object-left-bottom | object-position: left bottom; |
object-left-top | object-position: left top; |
object-right | object-position: right; |
object-right-bottom | object-position: right bottom; |
object-right-top | object-position: right top; |
object-top | object-position: top; |
ابزارهایی برای کنترل نحوه مدیریت یک عنصر با محتوایی که برای ظرف خیلی بزرگ است
Class | Properties |
---|---|
overflow-auto | overflow: auto; |
overflow-hidden | overflow: hidden; |
overflow-clip | overflow: clip; |
overflow-visible | overflow: visible; |
overflow-scroll | overflow: scroll; |
overflow-x-auto | overflow-x: auto; |
overflow-y-auto | overflow-y: auto; |
overflow-x-hidden | overflow-x: hidden; |
overflow-y-hidden | overflow-y: hidden; |
overflow-x-clip | overflow-x: clip; |
overflow-y-clip | overflow-y: clip; |
overflow-x-visible | overflow-x: visible; |
overflow-y-visible | overflow-y: visible; |
overflow-x-scroll | overflow-x: scroll; |
overflow-y-scroll | overflow-y: scroll; |
مانند کد زیر:
<div class="overflow-hidden ..."></div>
ابزارهایی برای کنترل نحوه قرارگیری یک عنصر در DOM
Class | Properties |
---|---|
static | position: static; |
fixed | position: fixed; |
absolute | position: absolute; |
relative | position: relative; |
sticky | position: sticky; |
مانند کد زیر:
div class="relative ...">
<p>Relative parent</p>
<div class="absolute bottom-0 left-0 ...">
<p>Absolute child</p>
</div>
</div>
ابزارهای کمکی برای کنترل قرار دادن عناصر در موقعیت
Class | Properties |
---|---|
inset-0 | top: 0px; right: 0px; bottom: 0px; left: 0px; |
inset-x-0 | left: 0px; right: 0px; |
inset-y-0 | top: 0px; bottom: 0px; |
top-0 | top: 0px; |
right-0 | right: 0px; |
bottom-0 | bottom: 0px; |
left-0 | left: 0px; |
inset-px | top: 1px; right: 1px; bottom: 1px; left: 1px; |
inset-x-px | left: 1px; right: 1px; |
inset-y-px | top: 1px; bottom: 1px; |
top-px | top: 1px; |
right-px | right: 1px; |
bottom-px | bottom: 1px; |
left-px | left: 1px; |
inset-0.5 | top: 0.125rem; /* 2px */ right: 0.125rem; /* 2px */ bottom: 0.125rem; /* 2px */ left: 0.125rem; /* 2px */ |
inset-x-0.5 | left: 0.125rem; /* 2px */ right: 0.125rem; /* 2px */ |
inset-y-0.5 | top: 0.125rem; /* 2px */ bottom: 0.125rem; /* 2px */ |
top-0.5 | top: 0.125rem; /* 2px */ |
right-0.5 | right: 0.125rem; /* 2px */ |
bottom-0.5 | bottom: 0.125rem; /* 2px */ |
left-0.5 | left: 0.125rem; /* 2px */ |
inset-1 | top: 0.25rem; /* 4px */ right: 0.25rem; /* 4px */ bottom: 0.25rem; /* 4px */ left: 0.25rem; /* 4px */ |
inset-x-1 | left: 0.25rem; /* 4px */ right: 0.25rem; /* 4px */ |
inset-y-1 | top: 0.25rem; /* 4px */ bottom: 0.25rem; /* 4px */ |
top-1 | top: 0.25rem; /* 4px */ |
right-1 | right: 0.25rem; /* 4px */ |
bottom-1 | bottom: 0.25rem; /* 4px */ |
left-1 | left: 0.25rem; /* 4px */ |
inset-1.5 | top: 0.375rem; /* 6px */ right: 0.375rem; /* 6px */ bottom: 0.375rem; /* 6px */ left: 0.375rem; /* 6px */ |
inset-x-1.5 | left: 0.375rem; /* 6px */ right: 0.375rem; /* 6px */ |
inset-y-1.5 | top: 0.375rem; /* 6px */ bottom: 0.375rem; /* 6px */ |
top-1.5 | top: 0.375rem; /* 6px */ |
right-1.5 | right: 0.375rem; /* 6px */ |
bottom-1.5 | bottom: 0.375rem; /* 6px */ |
left-1.5 | left: 0.375rem; /* 6px */ |
inset-2 | top: 0.5rem; /* 8px */ right: 0.5rem; /* 8px */ bottom: 0.5rem; /* 8px */ left: 0.5rem; /* 8px */ |
inset-x-2 | left: 0.5rem; /* 8px */ right: 0.5rem; /* 8px */ |
inset-y-2 | top: 0.5rem; /* 8px */ bottom: 0.5rem; /* 8px */ |
top-2 | top: 0.5rem; /* 8px */ |
right-2 | right: 0.5rem; /* 8px */ |
bottom-2 | bottom: 0.5rem; /* 8px */ |
left-2 | left: 0.5rem; /* 8px */ |
inset-2.5 | top: 0.625rem; /* 10px */ right: 0.625rem; /* 10px */ bottom: 0.625rem; /* 10px */ left: 0.625rem; /* 10px */ |
inset-x-2.5 | left: 0.625rem; /* 10px */ right: 0.625rem; /* 10px */ |
inset-y-2.5 | top: 0.625rem; /* 10px */ bottom: 0.625rem; /* 10px */ |
top-2.5 | top: 0.625rem; /* 10px */ |
right-2.5 | right: 0.625rem; /* 10px */ |
bottom-2.5 | bottom: 0.625rem; /* 10px */ |
مانندکد زیر:
<div class="relative h-32 w-32 ...">
<div class="absolute left-0 top-0 h-16 w-16 ...">01</div>
</div>
<!-- Span top edge -->
<div class="relative h-32 w-32 ...">
<div class="absolute inset-x-0 top-0 h-16 ...">02</div>
</div>
<!-- Pin to top right corner -->
<div class="relative h-32 w-32 ...">
<div class="absolute top-0 right-0 h-16 w-16 ...">03</div>
</div>
******************
<div class="top-4 hover:top-6">
<!-- ... -->
</div>
ابزارهای کاربردی برای کنترل دید یک عنصر
Class | Properties |
---|---|
visible | visibility: visible; |
invisible | visibility: hidden; |
ابزارهای کاربردی برای کنترل ترتیب پشته یک عنصر
Class | Properties |
---|---|
z-0 | z-index: 0; |
z-10 | z-index: 10; |
z-20 | z-index: 20; |
z-30 | z-index: 30; |
z-40 | z-index: 40; |
z-50 | z-index: 50; |
z-auto | z-index: auto; |
مجموعه کلاس های flex
Class | Properties |
---|---|
basis-0 | flex-basis: 0px; |
basis-1 | flex-basis: 0.25rem; /* 4px */ |
basis-2 | flex-basis: 0.5rem; /* 8px */ |
basis-3 | flex-basis: 0.75rem; /* 12px */ |
basis-4 | flex-basis: 1rem; /* 16px */ |
basis-5 | flex-basis: 1.25rem; /* 20px */ |
basis-0.5 | flex-basis: 0.125rem; /* 2px */ |
basis-1.5 | flex-basis: 0.375rem; /* 6px */ |
basis-2.5 | flex-basis: 0.625rem; /* 10px */ |
basis-3.5 | flex-basis: 0.875rem; /* 14px */ |
basis-1/2 | flex-basis: 50%; |
basis-1/3 | flex-basis: 33.333333%; |
basis-2/3 | flex-basis: 66.666667%; |
basis-1/4 | flex-basis: 25%; |
basis-2/4 | flex-basis: 50%; |
basis-3/4 | flex-basis: 75%; |
basis-1/5 | flex-basis: 20%; |
basis-2/5 | flex-basis: 40%; |
basis-3/5 | flex-basis: 60%; |
basis-4/5 | flex-basis: 80%; |
basis-1/6 | flex-basis: 16.666667%; |
Class | Properties |
---|---|
flex-row | flex-direction: row; |
flex-row-reverse | flex-direction: row-reverse; |
flex-col | flex-direction: column; |
flex-col-reverse | flex-direction: column-reverse; |
Class | Properties |
---|---|
flex-wrap | flex-wrap: wrap; |
flex-wrap-reverse | flex-wrap: wrap-reverse; |
flex-nowrap | flex-wrap: nowrap; |
Class | Properties |
---|---|
grow | flex-grow: 1; |
grow-0 | flex-grow: 0; |
Class | Properties |
---|---|
shrink | flex-shrink: 1; |
shrink-0 | flex-shrink: 0; |
Class | Properties |
---|---|
flex-1 | flex: 1 1 0%; |
flex-auto | flex: 1 1 auto; |
flex-initial | flex: 0 1 auto; |
flex-none | flex: none; |
Class | Properties |
---|---|
order-1 | order: 1; |
order-2 | order: 2; |
order-3 | order: 3; |
order-4 | order: 4; |
ابزارهای کاربردی برای کنترل فواصل یک عنصر
Class | Properties |
---|---|
p-0 | padding: 0px; |
px-0 | padding-left: 0px; padding-right: 0px; |
py-0 | padding-top: 0px; padding-bottom: 0px; |
pt-0 | padding-top: 0px; |
pr-0 | padding-right: 0px; |
pb-0 | padding-bottom: 0px; |
pl-0 | padding-left: 0px; |
p-px | padding: 1px; |
px-px | padding-left: 1px; padding-right: 1px; |
py-px | padding-top: 1px; padding-bottom: 1px; |
pt-px | padding-top: 1px; |
pr-px | padding-right: 1px; |
pb-px | padding-bottom: 1px; |
pl-px | padding-left: 1px; |
p-0.5 | padding: 0.125rem; /* 2px */ |
px-0.5 | padding-left: 0.125rem; /* 2px */ padding-right: 0.125rem; /* 2px */ |
py-0.5 | padding-top: 0.125rem; /* 2px */ padding-bottom: 0.125rem; /* 2px */ |
pt-0.5 | padding-top: 0.125rem; /* 2px */ |
pr-0.5 | padding-right: 0.125rem; /* 2px */ |
pb-0.5 | padding-bottom: 0.125rem; /* 2px */ |
pl-0.5 | padding-left: 0.125rem; /* 2px */ |
p-1 | padding: 0.25rem; /* 4px */ |
px-1 | padding-left: 0.25rem; /* 4px */ padding-right: 0.25rem; /* 4px */ |
py-1 | padding-top: 0.25rem; /* 4px */ padding-bottom: 0.25rem; /* 4px */ |
pt-1 | padding-top: 0.25rem; /* 4px */ |
pr-1 | padding-right: 0.25rem; /* 4px */ |
pb-1 | padding-bottom: 0.25rem; /* 4px */ |
pl-1 | padding-left: 0.25rem; /* 4px */ |
p-1.5 | padding: 0.375rem; /* 6px */ |
px-1.5 | padding-left: 0.375rem; /* 6px */ padding-right: 0.375rem; /* 6px */ |
py-1.5 | padding-top: 0.375rem; /* 6px */ padding-bottom: 0.375rem; /* 6px */ |
pt-1.5 | padding-top: 0.375rem; /* 6px */ |
pr-1.5 | padding-right: 0.375rem; /* 6px */ |
pb-1.5 | padding-bottom: 0.375rem; /* 6px */ |
pl-1.5 | padding-left: 0.375rem; /* 6px */ |
p-2 | padding: 0.5rem; /* 8px */ |
px-2 | padding-left: 0.5rem; /* 8px */ padding-right: 0.5rem; /* 8px */ |
py-2 | padding-top: 0.5rem; /* 8px */ padding-bottom: 0.5rem; /* 8px */ |
pt-2 | padding-top: 0.5rem; /* 8px */ |
pr-2 | padding-right: 0.5rem; /* 8px */ |
pb-2 | padding-bottom: 0.5rem; /* 8px */ |
pl-2 | padding-left: 0.5rem; /* 8px */ |
p-2.5 | padding: 0.625rem; /* 10px */ |
Class | Properties |
---|---|
m-0 | margin: 0px; |
mx-0 | margin-left: 0px; margin-right: 0px; |
my-0 | margin-top: 0px; margin-bottom: 0px; |
mt-0 | margin-top: 0px; |
mr-0 | margin-right: 0px; |
mb-0 | margin-bottom: 0px; |
ml-0 | margin-left: 0px; |
m-px | margin: 1px; |
mx-px | margin-left: 1px; margin-right: 1px; |
my-px | margin-top: 1px; margin-bottom: 1px; |
mt-px | margin-top: 1px; |
mr-px | margin-right: 1px; |
mb-px | margin-bottom: 1px; |
ml-px | margin-left: 1px; |
m-0.5 | margin: 0.125rem; /* 2px */ |
mx-0.5 | margin-left: 0.125rem; /* 2px */ margin-right: 0.125rem; /* 2px */ |
my-0.5 | margin-top: 0.125rem; /* 2px */ margin-bottom: 0.125rem; /* 2px */ |
mt-0.5 | margin-top: 0.125rem; /* 2px */ |
mr-0.5 | margin-right: 0.125rem; /* 2px */ |
mb-0.5 | margin-bottom: 0.125rem; /* 2px */ |
ml-0.5 | margin-left: 0.125rem; /* 2px */ |
m-1 | margin: 0.25rem; /* 4px */ |
mx-1 | margin-left: 0.25rem; /* 4px */ margin-right: 0.25rem; /* 4px */ |
my-1 | margin-top: 0.25rem; /* 4px */ margin-bottom: 0.25rem; /* 4px */ |
mt-1 | margin-top: 0.25rem; /* 4px */ |
mr-1 | margin-right: 0.25rem; /* 4px */ |
mb-1 | margin-bottom: 0.25rem; /* 4px */ |
ml-1 | margin-left: 0.25rem; /* 4px */ |
m-1.5 | margin: 0.375rem; /* 6px */ |
mx-1.5 | margin-left: 0.375rem; /* 6px */ margin-right: 0.375rem; /* 6px */ |
my-1.5 | margin-top: 0.375rem; /* 6px */ margin-bottom: 0.375rem; /* 6px */ |
mt-1.5 | margin-top: 0.375rem; /* 6px */ |
mr-1.5 | margin-right: 0.375rem; /* 6px */ |
mb-1.5 | margin-bottom: 0.375rem; /* 6px */ |
ml-1.5 | margin-left: 0.375rem; /* 6px */ |
m-2 | margin: 0.5rem; /* 8px */ |
mx-2 | margin-left: 0.5rem; /* 8px */ margin-right: 0.5rem; /* 8px */ |
my-2 | margin-top: 0.5rem; /* 8px */ margin-bottom: 0.5rem; /* 8px */ |
mt-2 | margin-top: 0.5rem; /* 8px */ |
mr-2 | margin-right: 0.5rem; /* 8px */ |
mb-2 | margin-bottom: 0.5rem; /* 8px */ |
ابزارهای کمکی برای تنظیم عرض یک عنصر
Class | Properties |
---|---|
w-0 | width: 0px; |
w-px | width: 1px; |
w-auto | width: auto; |
w-1/2 | width: 50%; |
w-1/3 | width: 33.333333%; |
w-2/3 | width: 66.666667%; |
w-1/4 | width: 25%; |
w-2/4 | width: 50%; |
w-3/4 | width: 75%; |
w-1/5 | width: 20%; |
w-2/5 | width: 40%; |
w-3/5 | width: 60%; |
w-4/5 | width: 80%; |
w-1/6 | width: 16.666667%; |
w-2/6 | width: 33.333333%; |
w-3/6 | width: 50%; |
w-4/6 | width: 66.666667%; |
w-5/6 | width: 83.333333%; |
w-1/12 | width: 8.333333%; |
w-2/12 | width: 16.666667%; |
w-[30%] | width: 30%; |
w-full | width: 100%; |
w-screen | width: 100vw; |
w-min | width: min-content; |
w-max | width: max-content; |
w-fit | width: fit-content; |
ابزارهای کمکی برای تنظیم ارتفاع یک عنصر
Class | Properties |
---|---|
h-0 | height: 0px; |
h-px | height: 1px; |
h-auto | height: auto; |
h-1/2 | height: 50%; |
h-1/3 | height: 33.333333%; |
h-2/3 | height: 66.666667%; |
h-1/4 | height: 25%; |
h-2/4 | height: 50%; |
h-3/4 | height: 75%; |
h-1/5 | height: 20%; |
h-2/5 | height: 40%; |
h-[800px] | height: 800px; |
h-full | height: 100%; |
h-screen | height: 100vh; |
h-min | height: min-content; |
h-max | height: max-content; |
h-fit | height: fit-content; |
ابزارهای کاربردی برای کنترل اندازه فونت یک عنصر
Class | Properties |
---|---|
text-xs | font-size: 0.75rem; /* 12px */ line-height: 1rem; /* 16px */ |
text-sm | font-size: 0.875rem; /* 14px */ line-height: 1.25rem; /* 20px */ |
text-base | font-size: 1rem; /* 16px */ line-height: 1.5rem; /* 24px */ |
text-lg | font-size: 1.125rem; /* 18px */ line-height: 1.75rem; /* 28px */ |
text-xl | font-size: 1.25rem; /* 20px */ line-height: 1.75rem; /* 28px */ |
text-2xl | font-size: 1.5rem; /* 24px */ line-height: 2rem; /* 32px */ |
text-3xl | font-size: 1.875rem; /* 30px */ line-height: 2.25rem; /* 36px */ |
text-4xl | font-size: 2.25rem; /* 36px */ line-height: 2.5rem; /* 40px */ |
text-5xl | font-size: 3rem; /* 48px */ line-height: 1; |
Class | Properties |
---|---|
italic | font-style: italic; |
not-italic | font-style: normal; |
Class | Properties |
---|---|
font-thin | font-weight: 100; |
font-extralight | font-weight: 200; |
font-light | font-weight: 300; |
font-normal | font-weight: 400; |
font-medium | font-weight: 500; |
font-semibold | font-weight: 600; |
font-bold | font-weight: 700; |
font-extrabold | font-weight: 800; |
font-black | font-weight: 900; |
ابزارهای کمکی برای کنترل سبک گلوله/عدد یک لیست
Class | Properties |
---|---|
list-none | list-style-type: none; |
list-disc | list-style-type: disc; |
list-decimal | list-style-type: decimal; |
ابزارهای کمکی برای کنترل سبک گلوله/عدد یک لیست
Class | Properties |
---|---|
text-left | text-align: left; |
text-center | text-align: center; |
text-right | text-align: right; |
text-justify | text-align: justify; |
text-start | text-align: start; |
text-end | text-align: end; |
ابزارهای کاربردی برای کنترل رنگ متن یک عنصر
Class | Properties | Preview |
---|---|---|
text-inherit | color: inherit; | Aa |
text-current | color: currentColor; | Aa |
text-transparent | color: transparent; | Aa |
text-black | color: rgb(0 0 0); | Aa |
text-white | color: rgb(255 255 255); | Aa |
text-slate-50 | color: rgb(248 250 252); | Aa |
text-slate-100 | color: rgb(241 245 249); | Aa |
text-slate-200 | color: rgb(226 232 240); | Aa |
text-slate-300 | color: rgb(203 213 225); | Aa |
text-slate-400 | color: rgb(148 163 184); | Aa |
text-slate-500 | color: rgb(100 116 139); | Aa |
text-slate-600 | color: rgb(71 85 105); | Aa |
text-slate-700 | color: rgb(51 65 85); | Aa |
text-slate-800 | color: rgb(30 41 59); | Aa |
text-slate-900 | color: rgb(15 23 42); | Aa |
text-gray-50 | color: rgb(249 250 251); | Aa |
text-gray-100 | color: rgb(243 244 246); | Aa |
text-gray-200 | color: rgb(229 231 235); | Aa |
text-gray-300 | color: rgb(209 213 219); | Aa |
text-gray-400 | color: rgb(156 163 175); | Aa |
text-gray-500 | color: rgb(107 114 128); | Aa |
text-gray-600 | color: rgb(75 85 99); | Aa |
text-gray-700 | color: rgb(55 65 81); | Aa |
text-gray-800 | color: rgb(31 41 55); | Aa |
text-gray-900 | color: rgb(17 24 39); | Aa |
text-zinc-50 | color: rgb(250 250 250); | Aa |
text-zinc-100 | color: rgb(244 244 245); | Aa |
text-zinc-200 | color: rgb(228 228 231); | Aa |
text-zinc-300 | color: rgb(212 212 216); | Aa |
text-zinc-400 | color: rgb(161 161 170); | Aa |
text-zinc-500 | color: rgb(113 113 122); | Aa |
text-zinc-600 | color: rgb(82 82 91); | Aa |
text-zinc-700 | color: rgb(63 63 70); | Aa |
text-zinc-800 | color: rgb(39 39 42); | Aa |
text-zinc-900 | color: rgb(24 24 27); | Aa |
text-neutral-50 | color: rgb(250 250 250); | Aa |
text-neutral-100 | color: rgb(245 245 245); | Aa |
text-neutral-200 | color: rgb(229 229 229); | Aa |
text-neutral-300 | color: rgb(212 212 212); | Aa |
text-neutral-400 | color: rgb(163 163 163); | Aa |
text-neutral-500 | color: rgb(115 115 115); | Aa |
text-neutral-600 | color: rgb(82 82 82); | Aa |
text-neutral-700 | color: rgb(64 64 64); | Aa |
text-neutral-800 | color: rgb(38 38 38); | Aa |
text-neutral-900 | color: rgb(23 23 23); | Aa |
text-stone-50 | color: rgb(250 250 249); | Aa |
text-stone-100 | color: rgb(245 245 244); | Aa |
text-stone-200 | color: rgb(231 229 228); | Aa |
text-stone-300 | color: rgb(214 211 209); | Aa |
text-stone-400 | color: rgb(168 162 158); | Aa |
text-stone-500 | color: rgb(120 113 108); | Aa |
text-stone-600 | color: rgb(87 83 78); | Aa |
text-stone-700 | color: rgb(68 64 60); | Aa |
text-stone-800 | color: rgb(41 37 36); | Aa |
text-stone-900 | color: rgb(28 25 23); | Aa |
text-red-50 | color: rgb(254 242 242); | Aa |
text-red-100 | color: rgb(254 226 226); | Aa |
text-red-200 | color: rgb(254 202 202); | Aa |
text-red-300 | color: rgb(252 165 165); | Aa |
text-red-400 | color: rgb(248 113 113); | Aa |
text-red-500 | color: rgb(239 68 68); | Aa |
text-red-600 | color: rgb(220 38 38); | Aa |
ابزارهای کاربردی برای کنترل دکوراسیون متن
Class | Properties |
---|---|
underline | text-decoration-line: underline; |
overline | text-decoration-line: overline; |
line-through | text-decoration-line: line-through; |
no-underline | text-decoration-line: none; |
استایل های مربوط به بکگراند
Class | Properties |
---|---|
bg-none | background-image: none; |
bg-gradient-to-t | background-image: linear-gradient(to top, var(–tw-gradient-stops)); |
bg-gradient-to-tr | background-image: linear-gradient(to top right, var(–tw-gradient-stops)); |
bg-gradient-to-r | background-image: linear-gradient(to right, var(–tw-gradient-stops)); |
bg-gradient-to-br | background-image: linear-gradient(to bottom right, var(–tw-gradient-stops)); |
bg-gradient-to-b | background-image: linear-gradient(to bottom, var(–tw-gradient-stops)); |
bg-gradient-to-bl | background-image: linear-gradient(to bottom left, var(–tw-gradient-stops)); |
bg-gradient-to-l | background-image: linear-gradient(to left, var(–tw-gradient-stops)); |
bg-gradient-to-tl | background-image: linear-gradient(to top left, var(–tw-gradient-stops)); |
مانند کد زیر:
<div class="h-14 bg-gradient-to-r from-cyan-500 to-blue-500"></div>
<div class="h-14 bg-gradient-to-r from-sky-500 to-indigo-500"></div>
<div class="h-14 bg-gradient-to-r from-violet-500 to-fuchsia-500"></div>
<div class="h-14 bg-gradient-to-r from-purple-500 to-pink-500"></div>
Class | Properties |
---|---|
bg-fixed | background-attachment: fixed; |
bg-local | background-attachment: local; |
bg-scroll | background-attachment: scroll; |
Class | Properties | Preview |
---|---|---|
bg-inherit | background-color: inherit; | |
bg-current | background-color: currentColor; | |
bg-transparent | background-color: transparent; | |
bg-black | background-color: rgb(0 0 0); | |
bg-white | background-color: rgb(255 255 255); | |
bg-slate-50 | background-color: rgb(248 250 252); | |
bg-slate-100 | background-color: rgb(241 245 249); | |
bg-slate-200 | background-color: rgb(226 232 240); |
Class | Properties |
---|---|
bg-bottom | background-position: bottom; |
bg-center | background-position: center; |
bg-left | background-position: left; |
bg-left-bottom | background-position: left bottom; |
bg-left-top | background-position: left top; |
bg-right | background-position: right; |
bg-right-bottom | background-position: right bottom; |
bg-right-top | background-position: right top; |
Class | Properties |
---|---|
bg-auto | background-size: auto; |
bg-cover | background-size: cover; |
bg-contain | background-size: contain; |
استایل های مربوط به بوردر
Class | Properties |
---|---|
rounded-none | border-radius: 0px; |
rounded-sm | border-radius: 0.125rem; /* 2px */ |
rounded | border-radius: 0.25rem; /* 4px */ |
rounded-md | border-radius: 0.375rem; /* 6px */ |
rounded-lg | border-radius: 0.5rem; /* 8px */ |
rounded-xl | border-radius: 0.75rem; /* 12px */ |
Class | Properties |
---|---|
border-0 | border-width: 0px; |
border-2 | border-width: 2px; |
border-4 | border-width: 4px; |
border-8 | border-width: 8px; |
Class | Properties | Preview |
---|---|---|
border-inherit | border-color: inherit; | |
border-current | border-color: currentColor; | |
border-transparent | border-color: transparent; | |
border-black | border-color: rgb(0 0 0); | |
border-white | border-color: rgb(255 255 255); |
Class | Properties |
---|---|
border-solid | border-style: solid; |
border-dashed | border-style: dashed; |
border-dotted | border-style: dotted; |
border-double | border-style: double; |
border-hidden | border-style: hidden; |
border-none | border-style: none; |
ابزارهای کاربردی برای کنترل سایه جعبه یک عنصر
Class | Properties |
---|---|
shadow-sm | box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); |
shadow | box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); |
shadow-md | box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); |
shadow-lg | box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); |
shadow-xl | box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); |
shadow-2xl | box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); |
shadow-inner | box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); |
shadow-none | box-shadow: 0 0 #0000; |
مانند کد زیر :
<div class="shadow-md ..."></div>
<div class="shadow-lg ..."></div>
<div class="shadow-xl ..."></div>
<div class="shadow-2xl ..."></div>
*********
<div class="shadow-inner ..."></div>
*********
<div class="shadow hover:shadow-lg">
<!-- ... -->
</div>
ابزارهای کاربردی برای کنترل کدورت یک عنصر
Class | Properties |
---|---|
opacity-0 | opacity: 0; |
opacity-5 | opacity: 0.05; |
opacity-10 | opacity: 0.1; |
opacity-20 | opacity: 0.2; |
opacity-25 | opacity: 0.25; |
opacity-30 | opacity: 0.3; |
opacity-40 | opacity: 0.4; |
استایل های مربوط به ترنسفورم
Class | Properties |
---|---|
scale-0 | transform: scale(0); |
scale-x-0 | transform: scaleX(0); |
scale-y-0 | transform: scaleY(0); |
scale-50 | transform: scale(.5); |
scale-x-50 | transform: scaleX(.5); |
scale-y-50 | transform: scaleY(.5); |
scale-75 | transform: scale(.75); |
scale-x-75 | transform: scaleX(.75); |
Class | Properties |
---|---|
rotate-0 | transform: rotate(0deg); |
rotate-1 | transform: rotate(1deg); |
rotate-2 | transform: rotate(2deg); |
rotate-3 | transform: rotate(3deg); |
rotate-6 | transform: rotate(6deg); |
rotate-12 | transform: rotate(12deg); |
rotate-45 | transform: rotate(45deg); |
rotate-90 | transform: rotate(90deg); |
rotate-180 | transform: rotate(180deg); |
Class | Properties |
---|---|
translate-x-0 | transform: translateX(0px); |
translate-y-0 | transform: translateY(0px); |
translate-x-px | transform: translateX(1px); |
translate-y-px | transform: translateY(1px); |
translate-x-0.5 | transform: translateX(0.125rem); |
translate-y-0.5 | transform: translateY(0.125rem); |
translate-x-1 | transform: translateX(0.25rem); |
translate-y-1 | transform: translateY(0.25rem); |
translate-x-1.5 | transform: translateX(0.375rem); |
translate-y-1.5 | transform: translateY(0.375rem); |
translate-x-2 | transform: translateX(0.5rem); |
translate-y-2 | transform: translateY(0.5rem); |
translate-x-2.5 | transform: translateX(0.625rem); |
translate-y-2.5 | transform: translateY(0.625rem); |
translate-x-3 | transform: translateX(0.75rem); |
translate-y-3 | transform: translateY(0.75rem); |
translate-x-3.5 | transform: translateX(0.875rem); |
Class | Properties |
---|---|
skew-x-0 | transform: skewX(0deg); |
skew-y-0 | transform: skewY(0deg); |
skew-x-1 | transform: skewX(1deg); |
skew-y-1 | transform: skewY(1deg); |
skew-x-2 | transform: skewX(2deg); |
skew-y-2 | transform: skewY(2deg); |
skew-x-3 | transform: skewX(3deg); |
skew-y-3 | transform: skewY(3deg); |
skew-x-6 | transform: skewX(6deg); |
skew-y-6 | transform: skewY(6deg); |
skew-x-12 | transform: skewX(12deg); |
skew-y-12 | transform: skewY(12deg); |
Class | Properties |
---|---|
origin-center | transform-origin: center; |
origin-top | transform-origin: top; |
origin-top-right | transform-origin: top right; |
origin-right | transform-origin: right; |
origin-bottom-right | transform-origin: bottom right; |
origin-bottom | transform-origin: bottom; |
origin-bottom-left | transform-origin: bottom left; |
origin-left | transform-origin: left; |
origin-top-left | transform-origin: top left; |
بله…کافیست… اگر همین کلاس های را تا به اینجا مسلط باشید، مقدار زیادی از پروژه ها را میتوانید انجام دهید. برای مطالعه سایر کلاس ها لطفا به لینک مراجعه فرمایید.
امید به اینکه این مقاله آموزش کامل و جامع فریم ورک tailwind برایتان مفید واقع شده باشد.
قسمت اول آموزش (سری یک)
امیدواریم از این مقاله نهایت استفاده را برده باشید و آن را با دوستانتان به اشتراک بگذارید. تیم تولید محتوای مدرسه اینترنتی پرنیان این مقاله را تهیه کرده است.
قسمت دوم آموزش (سری دوم)
استاد جان. تو شهر ما سمت شرق کشور همه آموزش هات پخش شده است من هم استفاده کردم حالل کن تورو به خداوند
قضاوت رو میزارم با هر کی که میخونه این نظر رو…!
واقعا متاسفم، حق معنوی مادی ۱۰۰ ها شاگرد و خود شخص استاد گردن شما و تمام افراد مثل شماست. استاد هم حلال کنند هیچ یک از افرادی که هزینه کردند و کلاس آمدند از جمله خود من حلال نخواهند کرد.
همه چی از خودمان شروع می شود.
انسان باشیم.
دی شیخ با چراغ همی گشت گرد شهر
کز دیو و دد ملولم و انسانم آرزوست