در این مطلب سعی بر آن شده است تا بصورت عمیق، آموزش کامل و جامع فریم ورک tailwind را مورد بررسی قرار داده و بتوانیم از این پس، از آن در پروژه های خود استفاده کنیم.

همانطور که میدانید، tailwind امروزه در حال تبدیل شدن به یک ابزار حرفه ای در کدنویسی HTML,CSS,RESPONSIVE در سمت فرانت اند میباشد و یادگیری آن هر چه زودتر، امری مهم بشمار میرود.

آموزش کامل و جامع فریم ورک tailwind

مقدمه فریم ورک تیلویند

با 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

Tailwind CSS با اسکن تمام فایل‌های HTML، اجزای جاوا اسکریپت، و هر قالب دیگر برای نام کلاس‌ها، تولید استایل های مربوطه و سپس نوشتن آن‌ها در یک فایل CSS ثابت کار می‌کند.

ساده ترین و سریع ترین راه برای راه اندازی و اجرا با Tailwind CSS از ابتدا با ابزار Tailwind CLI است.

cmd در ویندوز یا command brew در مک را باز کرده و کد های زیر را به ترتیب بزنید.

npm install -D tailwindcss
npx tailwindcss init

آموزش نصب Tailwind

تمام فایل های نصب شده را به یک پوشه انتقال دهید تا مانند تصویر زیر را داشته باشید.

آموزش نصب Tailwind

با یک ادیتور مناسب ، پوشه را باز کرده و تغییرات زیر را اعمال کنید.

مسیرها را به همه فایل های قالب خود در فایل tailwind.config.js خود اضافه کنید. مشابه مثال زیر عمل کنید:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

یک پوشه src ساخته و فایل های پیش نیاز وبسایت خود را در آن درج کنید.

آموزش نصب Tailwind

سپس دستورات 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

شروع به استفاده از Tailwind در HTML خود کنید. فایل CSS کامپایل شده خود را به اضافه کنید و از کلاس های کاربردی Tailwind برای استایل دادن به محتوای خود استفاده کنید.

آموزش نصب Tailwind

شاید جالب باشه بهتون بگم که کار تمام شد. کد زیر را در html خود بزنید و سیو بگیرید. خواهید دید که کار میکند.

    <div class="w-96 bg-white shadow rounded">
        w-96
    </div>

مدیریت Hover, Focus و… در tailwind

در آموزش کامل و جامع فریم ورک tailwind ، هر کلاس کاربردی در Tailwind را می توان با افزودن یک اصلاح کننده به ابتدای نام کلاس که شرایطی را می خواهید هدف قرار دهید، توصیف می کند، به صورت مشروط اعمال کرد.

به عنوان مثال، برای اعمال کلاس bg-sky-700 در hover، از کلاس hover:bg-sky-700 استفاده کنید:

    <button class="bg-sky-200 hover:bg-sky-700">
        Save changes
    </button>

ویا کد زیر:

    <button class="bg-sky-200 active:bg-red-700">
        Save changes
    </button>

ویا مثال های زیر:

    <blockquote class="text-2xl font-semibold italic text-center text-slate-900">
        When you look
        <span class="before:block before:absolute before:-inset-1 before:-skew-y-3 before:bg-pink-500 relative inline-block">
          <span class="relative text-white">annoyed</span>
        </span>
        all the time, people think that you're busy.
      </blockquote>
***************
<div class="before:content-[''] before:block ...">
  <!-- ... -->
</div>
***************
<div class="selection:bg-fuchsia-300 selection:text-fuchsia-900">
***************
<p class="first-line:uppercase first-letter:text-7xl ">
***************
<dialog class="backdrop:bg-gray-50">
  <form method="dialog">
    <!-- ... -->
  </form>
</dialog>
***************
<div>
  <div class="portrait:hidden">
    <!-- ... -->
  </div>
  <div class="landscape:hidden">
    <p>
      This experience is designed to be viewed in landscape. Please rotate your
      device to view the site.
    </p>
  </div>
</div>
***************
<html dir="ltr">
  <!-- ... -->
</html>
***************

طراحی ریسپانسیو و واکنش گرا در tailwind

در آموزش کامل و جامع فریم ورک tailwind، و در قسمت ریسپانسیو، بطور پیش فرض ، ۵نقطه breakpoint در سیستم تیلویند وجود دارد به شرح جدول زیر:

Breakpoint prefixMinimum widthCSS
sm640px@media (min-width: 640px) { ... }
md768px@media (min-width: 768px) { ... }
lg1024px@media (min-width: 1024px) { ... }
xl1280px@media (min-width: 1280px) { ... }
2xl1536px@media (min-width: 1536px) { ... }

فقط کافیست از این پس، هر المان را با نوشتن نام اسکوپ مورد نظر خود، در حالت های مختلف ریسپانسیو قرار دهید. مانند مثال زیر که در md قرمز و از lg به بعد آبی رنگ خواهد ماند.

    <div class="w-16 bg-white shadow rounded md:bg-red-500 lg:bg-sky-500">
        w-96
    </div>

پلت های رنگ در تیلویند

Tailwind شامل یک پالت رنگ پیش‌فرض کاملاً ماهرانه است که اگر برند خاص خود را در ذهن ندارید، یک نقطه شروع عالی است.

پیشنهاد میکنیم با استفاده از لینک color tailwind به لیست نام گذاری رنگ ها در سایت اصلی مراجعه کنید.

کلاس های اصلی tailwind

پیشنهاد میکنیم تمام کلاس های ارایه شده در این مقاله را حفظ کنید، زیرا بسیار پر استفاده هستند و مابقی کلاس ها را با مراجعه به لینک های موجود،

Container

مولفه ای برای تثبیت عرض یک عنصر

ClassBreakpointProperties
containerNonewidth: 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>

Columns

ابزارهای کمکی برای کنترل تعداد ستون ها در یک عنصر

ClassProperties
columns-1columns: 1;
columns-2columns: 2;
columns-3columns: 3;
columns-4columns: 4;
columns-5columns: 5;
columns-6columns: 6;
columns-7columns: 7;
columns-8columns: 8;
columns-9columns: 9;
columns-10columns: 10;
columns-11columns: 11;
columns-12columns: 12;
columns-autocolumns: auto;
columns-3xscolumns: 16rem; /* 256px */
columns-2xscolumns: 18rem; /* 288px */
columns-xscolumns: 20rem; /* 320px */
columns-smcolumns: 24rem; /* 384px */
columns-mdcolumns: 28rem; /* 448px */
columns-lgcolumns: 32rem; /* 512px */
columns-xlcolumns: 36rem; /* 576px */
columns-2xlcolumns: 42rem; /* 672px */
columns-3xlcolumns: 48rem; /* 768px */
columns-4xlcolumns: 56rem; /* 896px */
columns-5xlcolumns: 64rem; /* 1024px */
columns-6xlcolumns: 72rem; /* 1152px */
columns-7xlcolumns: 80rem; /* 1280px */

مانند کد زیر :

<div class="columns-3 ...">
  <img class="w-full aspect-video ..." src="..." />
  <img class="w-full aspect-square ..." src="..." />
  <!-- ... -->
</div>

Box Sizing

ابزارهای کمکی برای کنترل اینکه مرورگر چگونه باید اندازه کل یک عنصر را محاسبه کند

ClassProperties
box-borderbox-sizing: border-box;
box-contentbox-sizing: content-box;

مانند کد زیر:

<div class="box-border md:box-content">
  <!-- ... -->
</div>

Display

ابزارهای کمکی برای کنترل نوع جعبه نمایش یک عنصر

ClassProperties
blockdisplay: block;
inline-blockdisplay: inline-block;
inlinedisplay: inline;
flexdisplay: flex;
inline-flexdisplay: inline-flex;
tabledisplay: table;
inline-tabledisplay: inline-table;
table-captiondisplay: table-caption;
table-celldisplay: table-cell;
table-columndisplay: table-column;
table-column-groupdisplay: table-column-group;
table-footer-groupdisplay: table-footer-group;
table-header-groupdisplay: table-header-group;
table-row-groupdisplay: table-row-group;
table-rowdisplay: table-row;
flow-rootdisplay: flow-root;
griddisplay: grid;
inline-griddisplay: inline-grid;
contentsdisplay: contents;
list-itemdisplay: list-item;
hiddendisplay: none;

مانند مثال زیر:

<div class="flex md:inline-flex">
  <!-- ... -->
</div>

Floats

ابزارهای کاربردی برای کنترل بسته بندی محتوا در اطراف یک عنصر

ClassProperties
float-rightfloat: right;
float-leftfloat: left;
float-nonefloat: none;

مانند کد زیر:

<img class="float-right hover:float-left" src="path/to/image.jpg">
ClassProperties
clear-leftclear: left;
clear-rightclear: right;
clear-bothclear: both;
clear-noneclear: none;

Object Fit

ابزارهایی برای کنترل نحوه تغییر اندازه محتوای عنصر جایگزین شده.

ClassProperties
object-containobject-fit: contain;
object-coverobject-fit: cover;
object-fillobject-fit: fill;
object-noneobject-fit: none;
object-scale-downobject-fit: scale-down;

ClassProperties
object-bottomobject-position: bottom;
object-centerobject-position: center;
object-leftobject-position: left;
object-left-bottomobject-position: left bottom;
object-left-topobject-position: left top;
object-rightobject-position: right;
object-right-bottomobject-position: right bottom;
object-right-topobject-position: right top;
object-topobject-position: top;

Overflow

ابزارهایی برای کنترل نحوه مدیریت یک عنصر با محتوایی که برای ظرف خیلی بزرگ است

ClassProperties
overflow-autooverflow: auto;
overflow-hiddenoverflow: hidden;
overflow-clipoverflow: clip;
overflow-visibleoverflow: visible;
overflow-scrolloverflow: scroll;
overflow-x-autooverflow-x: auto;
overflow-y-autooverflow-y: auto;
overflow-x-hiddenoverflow-x: hidden;
overflow-y-hiddenoverflow-y: hidden;
overflow-x-clipoverflow-x: clip;
overflow-y-clipoverflow-y: clip;
overflow-x-visibleoverflow-x: visible;
overflow-y-visibleoverflow-y: visible;
overflow-x-scrolloverflow-x: scroll;
overflow-y-scrolloverflow-y: scroll;

مانند کد زیر:

<div class="overflow-hidden ..."></div>

Position

ابزارهایی برای کنترل نحوه قرارگیری یک عنصر در DOM

ClassProperties
staticposition: static;
fixedposition: fixed;
absoluteposition: absolute;
relativeposition: relative;
stickyposition: sticky;

مانند کد زیر:

div class="relative ...">
  <p>Relative parent</p>
  <div class="absolute bottom-0 left-0 ...">
    <p>Absolute child</p>
  </div>
</div>

Top / Right / Bottom / Left

ابزارهای کمکی برای کنترل قرار دادن عناصر در موقعیت

ClassProperties
inset-0top: 0px; right: 0px; bottom: 0px; left: 0px;
inset-x-0left: 0px; right: 0px;
inset-y-0top: 0px; bottom: 0px;
top-0top: 0px;
right-0right: 0px;
bottom-0bottom: 0px;
left-0left: 0px;
inset-pxtop: 1px; right: 1px; bottom: 1px; left: 1px;
inset-x-pxleft: 1px; right: 1px;
inset-y-pxtop: 1px; bottom: 1px;
top-pxtop: 1px;
right-pxright: 1px;
bottom-pxbottom: 1px;
left-pxleft: 1px;
inset-0.5top: 0.125rem; /* 2px */ right: 0.125rem; /* 2px */ bottom: 0.125rem; /* 2px */ left: 0.125rem; /* 2px */
inset-x-0.5left: 0.125rem; /* 2px */ right: 0.125rem; /* 2px */
inset-y-0.5top: 0.125rem; /* 2px */ bottom: 0.125rem; /* 2px */
top-0.5top: 0.125rem; /* 2px */
right-0.5right: 0.125rem; /* 2px */
bottom-0.5bottom: 0.125rem; /* 2px */
left-0.5left: 0.125rem; /* 2px */
inset-1top: 0.25rem; /* 4px */ right: 0.25rem; /* 4px */ bottom: 0.25rem; /* 4px */ left: 0.25rem; /* 4px */
inset-x-1left: 0.25rem; /* 4px */ right: 0.25rem; /* 4px */
inset-y-1top: 0.25rem; /* 4px */ bottom: 0.25rem; /* 4px */
top-1top: 0.25rem; /* 4px */
right-1right: 0.25rem; /* 4px */
bottom-1bottom: 0.25rem; /* 4px */
left-1left: 0.25rem; /* 4px */
inset-1.5top: 0.375rem; /* 6px */ right: 0.375rem; /* 6px */ bottom: 0.375rem; /* 6px */ left: 0.375rem; /* 6px */
inset-x-1.5left: 0.375rem; /* 6px */ right: 0.375rem; /* 6px */
inset-y-1.5top: 0.375rem; /* 6px */ bottom: 0.375rem; /* 6px */
top-1.5top: 0.375rem; /* 6px */
right-1.5right: 0.375rem; /* 6px */
bottom-1.5bottom: 0.375rem; /* 6px */
left-1.5left: 0.375rem; /* 6px */
inset-2top: 0.5rem; /* 8px */ right: 0.5rem; /* 8px */ bottom: 0.5rem; /* 8px */ left: 0.5rem; /* 8px */
inset-x-2left: 0.5rem; /* 8px */ right: 0.5rem; /* 8px */
inset-y-2top: 0.5rem; /* 8px */ bottom: 0.5rem; /* 8px */
top-2top: 0.5rem; /* 8px */
right-2right: 0.5rem; /* 8px */
bottom-2bottom: 0.5rem; /* 8px */
left-2left: 0.5rem; /* 8px */
inset-2.5top: 0.625rem; /* 10px */ right: 0.625rem; /* 10px */ bottom: 0.625rem; /* 10px */ left: 0.625rem; /* 10px */
inset-x-2.5left: 0.625rem; /* 10px */ right: 0.625rem; /* 10px */
inset-y-2.5top: 0.625rem; /* 10px */ bottom: 0.625rem; /* 10px */
top-2.5top: 0.625rem; /* 10px */
right-2.5right: 0.625rem; /* 10px */
bottom-2.5bottom: 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>

Visibility

ابزارهای کاربردی برای کنترل دید یک عنصر

ClassProperties
visiblevisibility: visible;
invisiblevisibility: hidden;

Z-Index

ابزارهای کاربردی برای کنترل ترتیب پشته یک عنصر

ClassProperties
z-0z-index: 0;
z-10z-index: 10;
z-20z-index: 20;
z-30z-index: 30;
z-40z-index: 40;
z-50z-index: 50;
z-autoz-index: auto;

flex

مجموعه کلاس های flex

ClassProperties
basis-0flex-basis: 0px;
basis-1flex-basis: 0.25rem; /* 4px */
basis-2flex-basis: 0.5rem; /* 8px */
basis-3flex-basis: 0.75rem; /* 12px */
basis-4flex-basis: 1rem; /* 16px */
basis-5flex-basis: 1.25rem; /* 20px */
ادامه دارد….

basis-0.5flex-basis: 0.125rem; /* 2px */
basis-1.5flex-basis: 0.375rem; /* 6px */
basis-2.5flex-basis: 0.625rem; /* 10px */
basis-3.5flex-basis: 0.875rem; /* 14px */
basis-1/2flex-basis: 50%;
basis-1/3flex-basis: 33.333333%;
basis-2/3flex-basis: 66.666667%;
basis-1/4flex-basis: 25%;
basis-2/4flex-basis: 50%;
basis-3/4flex-basis: 75%;
basis-1/5flex-basis: 20%;
basis-2/5flex-basis: 40%;
basis-3/5flex-basis: 60%;
basis-4/5flex-basis: 80%;
basis-1/6flex-basis: 16.666667%;

ClassProperties
flex-rowflex-direction: row;
flex-row-reverseflex-direction: row-reverse;
flex-colflex-direction: column;
flex-col-reverseflex-direction: column-reverse;

ClassProperties
flex-wrapflex-wrap: wrap;
flex-wrap-reverseflex-wrap: wrap-reverse;
flex-nowrapflex-wrap: nowrap;

ClassProperties
growflex-grow: 1;
grow-0flex-grow: 0;

ClassProperties
shrinkflex-shrink: 1;
shrink-0flex-shrink: 0;

ClassProperties
flex-1flex: 1 1 0%;
flex-autoflex: 1 1 auto;
flex-initialflex: 0 1 auto;
flex-noneflex: none;

ClassProperties
order-1order: 1;
order-2order: 2;
order-3order: 3;
order-4order: 4;

Padding و margin

ابزارهای کاربردی برای کنترل فواصل یک عنصر

ClassProperties
p-0padding: 0px;
px-0padding-left: 0px; padding-right: 0px;
py-0padding-top: 0px; padding-bottom: 0px;
pt-0padding-top: 0px;
pr-0padding-right: 0px;
pb-0padding-bottom: 0px;
pl-0padding-left: 0px;
p-pxpadding: 1px;
px-pxpadding-left: 1px; padding-right: 1px;
py-pxpadding-top: 1px; padding-bottom: 1px;
pt-pxpadding-top: 1px;
pr-pxpadding-right: 1px;
pb-pxpadding-bottom: 1px;
pl-pxpadding-left: 1px;
p-0.5padding: 0.125rem; /* 2px */
px-0.5padding-left: 0.125rem; /* 2px */ padding-right: 0.125rem; /* 2px */
py-0.5padding-top: 0.125rem; /* 2px */ padding-bottom: 0.125rem; /* 2px */
pt-0.5padding-top: 0.125rem; /* 2px */
pr-0.5padding-right: 0.125rem; /* 2px */
pb-0.5padding-bottom: 0.125rem; /* 2px */
pl-0.5padding-left: 0.125rem; /* 2px */
p-1padding: 0.25rem; /* 4px */
px-1padding-left: 0.25rem; /* 4px */ padding-right: 0.25rem; /* 4px */
py-1padding-top: 0.25rem; /* 4px */ padding-bottom: 0.25rem; /* 4px */
pt-1padding-top: 0.25rem; /* 4px */
pr-1padding-right: 0.25rem; /* 4px */
pb-1padding-bottom: 0.25rem; /* 4px */
pl-1padding-left: 0.25rem; /* 4px */
p-1.5padding: 0.375rem; /* 6px */
px-1.5padding-left: 0.375rem; /* 6px */ padding-right: 0.375rem; /* 6px */
py-1.5padding-top: 0.375rem; /* 6px */ padding-bottom: 0.375rem; /* 6px */
pt-1.5padding-top: 0.375rem; /* 6px */
pr-1.5padding-right: 0.375rem; /* 6px */
pb-1.5padding-bottom: 0.375rem; /* 6px */
pl-1.5padding-left: 0.375rem; /* 6px */
p-2padding: 0.5rem; /* 8px */
px-2padding-left: 0.5rem; /* 8px */ padding-right: 0.5rem; /* 8px */
py-2padding-top: 0.5rem; /* 8px */ padding-bottom: 0.5rem; /* 8px */
pt-2padding-top: 0.5rem; /* 8px */
pr-2padding-right: 0.5rem; /* 8px */
pb-2padding-bottom: 0.5rem; /* 8px */
pl-2padding-left: 0.5rem; /* 8px */
p-2.5padding: 0.625rem; /* 10px */
ClassProperties
m-0margin: 0px;
mx-0margin-left: 0px; margin-right: 0px;
my-0margin-top: 0px; margin-bottom: 0px;
mt-0margin-top: 0px;
mr-0margin-right: 0px;
mb-0margin-bottom: 0px;
ml-0margin-left: 0px;
m-pxmargin: 1px;
mx-pxmargin-left: 1px; margin-right: 1px;
my-pxmargin-top: 1px; margin-bottom: 1px;
mt-pxmargin-top: 1px;
mr-pxmargin-right: 1px;
mb-pxmargin-bottom: 1px;
ml-pxmargin-left: 1px;
m-0.5margin: 0.125rem; /* 2px */
mx-0.5margin-left: 0.125rem; /* 2px */ margin-right: 0.125rem; /* 2px */
my-0.5margin-top: 0.125rem; /* 2px */ margin-bottom: 0.125rem; /* 2px */
mt-0.5margin-top: 0.125rem; /* 2px */
mr-0.5margin-right: 0.125rem; /* 2px */
mb-0.5margin-bottom: 0.125rem; /* 2px */
ml-0.5margin-left: 0.125rem; /* 2px */
m-1margin: 0.25rem; /* 4px */
mx-1margin-left: 0.25rem; /* 4px */ margin-right: 0.25rem; /* 4px */
my-1margin-top: 0.25rem; /* 4px */ margin-bottom: 0.25rem; /* 4px */
mt-1margin-top: 0.25rem; /* 4px */
mr-1margin-right: 0.25rem; /* 4px */
mb-1margin-bottom: 0.25rem; /* 4px */
ml-1margin-left: 0.25rem; /* 4px */
m-1.5margin: 0.375rem; /* 6px */
mx-1.5margin-left: 0.375rem; /* 6px */ margin-right: 0.375rem; /* 6px */
my-1.5margin-top: 0.375rem; /* 6px */ margin-bottom: 0.375rem; /* 6px */
mt-1.5margin-top: 0.375rem; /* 6px */
mr-1.5margin-right: 0.375rem; /* 6px */
mb-1.5margin-bottom: 0.375rem; /* 6px */
ml-1.5margin-left: 0.375rem; /* 6px */
m-2margin: 0.5rem; /* 8px */
mx-2margin-left: 0.5rem; /* 8px */ margin-right: 0.5rem; /* 8px */
my-2margin-top: 0.5rem; /* 8px */ margin-bottom: 0.5rem; /* 8px */
mt-2margin-top: 0.5rem; /* 8px */
mr-2margin-right: 0.5rem; /* 8px */
mb-2margin-bottom: 0.5rem; /* 8px */

Width

ابزارهای کمکی برای تنظیم عرض یک عنصر

ClassProperties
w-0width: 0px;
w-pxwidth: 1px;
w-autowidth: auto;
w-1/2width: 50%;
w-1/3width: 33.333333%;
w-2/3width: 66.666667%;
w-1/4width: 25%;
w-2/4width: 50%;
w-3/4width: 75%;
w-1/5width: 20%;
w-2/5width: 40%;
w-3/5width: 60%;
w-4/5width: 80%;
w-1/6width: 16.666667%;
w-2/6width: 33.333333%;
w-3/6width: 50%;
w-4/6width: 66.666667%;
w-5/6width: 83.333333%;
w-1/12width: 8.333333%;
w-2/12width: 16.666667%;
w-[30%]width: 30%;

w-fullwidth: 100%;
w-screenwidth: 100vw;
w-minwidth: min-content;
w-maxwidth: max-content;
w-fitwidth: fit-content;

Height

ابزارهای کمکی برای تنظیم ارتفاع یک عنصر

ClassProperties
h-0height: 0px;
h-pxheight: 1px;
h-autoheight: auto;
h-1/2height: 50%;
h-1/3height: 33.333333%;
h-2/3height: 66.666667%;
h-1/4height: 25%;
h-2/4height: 50%;
h-3/4height: 75%;
h-1/5height: 20%;
h-2/5height: 40%;
h-[800px]height: 800px;
h-fullheight: 100%;
h-screenheight: 100vh;
h-minheight: min-content;
h-maxheight: max-content;
h-fitheight: fit-content;

Font Size

ابزارهای کاربردی برای کنترل اندازه فونت یک عنصر

ClassProperties
text-xsfont-size: 0.75rem; /* 12px */ line-height: 1rem; /* 16px */
text-smfont-size: 0.875rem; /* 14px */ line-height: 1.25rem; /* 20px */
text-basefont-size: 1rem; /* 16px */ line-height: 1.5rem; /* 24px */
text-lgfont-size: 1.125rem; /* 18px */ line-height: 1.75rem; /* 28px */
text-xlfont-size: 1.25rem; /* 20px */ line-height: 1.75rem; /* 28px */
text-2xlfont-size: 1.5rem; /* 24px */ line-height: 2rem; /* 32px */
text-3xlfont-size: 1.875rem; /* 30px */ line-height: 2.25rem; /* 36px */
text-4xlfont-size: 2.25rem; /* 36px */ line-height: 2.5rem; /* 40px */
text-5xlfont-size: 3rem; /* 48px */ line-height: 1;

ClassProperties
italicfont-style: italic;
not-italicfont-style: normal;

ClassProperties
font-thinfont-weight: 100;
font-extralightfont-weight: 200;
font-lightfont-weight: 300;
font-normalfont-weight: 400;
font-mediumfont-weight: 500;
font-semiboldfont-weight: 600;
font-boldfont-weight: 700;
font-extraboldfont-weight: 800;
font-blackfont-weight: 900;

List Style Type

ابزارهای کمکی برای کنترل سبک گلوله/عدد یک لیست

ClassProperties
list-nonelist-style-type: none;
list-disclist-style-type: disc;
list-decimallist-style-type: decimal;

Text Align

ابزارهای کمکی برای کنترل سبک گلوله/عدد یک لیست

ClassProperties
text-lefttext-align: left;
text-centertext-align: center;
text-righttext-align: right;
text-justifytext-align: justify;
text-starttext-align: start;
text-endtext-align: end;

Text Color

ابزارهای کاربردی برای کنترل رنگ متن یک عنصر

ClassPropertiesPreview
text-inheritcolor: inherit;Aa
text-currentcolor: currentColor;Aa
text-transparentcolor: transparent;Aa
text-blackcolor: rgb(0 0 0);Aa
text-whitecolor: rgb(255 255 255);Aa
text-slate-50color: rgb(248 250 252);Aa
text-slate-100color: rgb(241 245 249);Aa
text-slate-200color: rgb(226 232 240);Aa
text-slate-300color: rgb(203 213 225);Aa
text-slate-400color: rgb(148 163 184);Aa
text-slate-500color: rgb(100 116 139);Aa
text-slate-600color: rgb(71 85 105);Aa
text-slate-700color: rgb(51 65 85);Aa
text-slate-800color: rgb(30 41 59);Aa
text-slate-900color: rgb(15 23 42);Aa
text-gray-50color: rgb(249 250 251);Aa
text-gray-100color: rgb(243 244 246);Aa
text-gray-200color: rgb(229 231 235);Aa
text-gray-300color: rgb(209 213 219);Aa
text-gray-400color: rgb(156 163 175);Aa
text-gray-500color: rgb(107 114 128);Aa
text-gray-600color: rgb(75 85 99);Aa
text-gray-700color: rgb(55 65 81);Aa
text-gray-800color: rgb(31 41 55);Aa
text-gray-900color: rgb(17 24 39);Aa
text-zinc-50color: rgb(250 250 250);Aa
text-zinc-100color: rgb(244 244 245);Aa
text-zinc-200color: rgb(228 228 231);Aa
text-zinc-300color: rgb(212 212 216);Aa
text-zinc-400color: rgb(161 161 170);Aa
text-zinc-500color: rgb(113 113 122);Aa
text-zinc-600color: rgb(82 82 91);Aa
text-zinc-700color: rgb(63 63 70);Aa
text-zinc-800color: rgb(39 39 42);Aa
text-zinc-900color: rgb(24 24 27);Aa
text-neutral-50color: rgb(250 250 250);Aa
text-neutral-100color: rgb(245 245 245);Aa
text-neutral-200color: rgb(229 229 229);Aa
text-neutral-300color: rgb(212 212 212);Aa
text-neutral-400color: rgb(163 163 163);Aa
text-neutral-500color: rgb(115 115 115);Aa
text-neutral-600color: rgb(82 82 82);Aa
text-neutral-700color: rgb(64 64 64);Aa
text-neutral-800color: rgb(38 38 38);Aa
text-neutral-900color: rgb(23 23 23);Aa
text-stone-50color: rgb(250 250 249);Aa
text-stone-100color: rgb(245 245 244);Aa
text-stone-200color: rgb(231 229 228);Aa
text-stone-300color: rgb(214 211 209);Aa
text-stone-400color: rgb(168 162 158);Aa
text-stone-500color: rgb(120 113 108);Aa
text-stone-600color: rgb(87 83 78);Aa
text-stone-700color: rgb(68 64 60);Aa
text-stone-800color: rgb(41 37 36);Aa
text-stone-900color: rgb(28 25 23);Aa
text-red-50color: rgb(254 242 242);Aa
text-red-100color: rgb(254 226 226);Aa
text-red-200color: rgb(254 202 202);Aa
text-red-300color: rgb(252 165 165);Aa
text-red-400color: rgb(248 113 113);Aa
text-red-500color: rgb(239 68 68);Aa
text-red-600color: rgb(220 38 38);Aa

Text Decoration

ابزارهای کاربردی برای کنترل دکوراسیون متن

ClassProperties
underlinetext-decoration-line: underline;
overlinetext-decoration-line: overline;
line-throughtext-decoration-line: line-through;
no-underlinetext-decoration-line: none;

Background 

استایل های مربوط به بکگراند

ClassProperties
bg-nonebackground-image: none;
bg-gradient-to-tbackground-image: linear-gradient(to top, var(–tw-gradient-stops));
bg-gradient-to-trbackground-image: linear-gradient(to top right, var(–tw-gradient-stops));
bg-gradient-to-rbackground-image: linear-gradient(to right, var(–tw-gradient-stops));
bg-gradient-to-brbackground-image: linear-gradient(to bottom right, var(–tw-gradient-stops));
bg-gradient-to-bbackground-image: linear-gradient(to bottom, var(–tw-gradient-stops));
bg-gradient-to-blbackground-image: linear-gradient(to bottom left, var(–tw-gradient-stops));
bg-gradient-to-lbackground-image: linear-gradient(to left, var(–tw-gradient-stops));
bg-gradient-to-tlbackground-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>

ClassProperties
bg-fixedbackground-attachment: fixed;
bg-localbackground-attachment: local;
bg-scrollbackground-attachment: scroll;

ClassPropertiesPreview
bg-inheritbackground-color: inherit;
bg-currentbackground-color: currentColor;
bg-transparentbackground-color: transparent;
bg-blackbackground-color: rgb(0 0 0);
bg-whitebackground-color: rgb(255 255 255);
bg-slate-50background-color: rgb(248 250 252);
bg-slate-100background-color: rgb(241 245 249);
bg-slate-200background-color: rgb(226 232 240);

ClassProperties
bg-bottombackground-position: bottom;
bg-centerbackground-position: center;
bg-leftbackground-position: left;
bg-left-bottombackground-position: left bottom;
bg-left-topbackground-position: left top;
bg-rightbackground-position: right;
bg-right-bottombackground-position: right bottom;
bg-right-topbackground-position: right top;

ClassProperties
bg-autobackground-size: auto;
bg-coverbackground-size: cover;
bg-containbackground-size: contain;

Border

استایل های مربوط به بوردر

ClassProperties
rounded-noneborder-radius: 0px;
rounded-smborder-radius: 0.125rem; /* 2px */
roundedborder-radius: 0.25rem; /* 4px */
rounded-mdborder-radius: 0.375rem; /* 6px */
rounded-lgborder-radius: 0.5rem; /* 8px */
rounded-xlborder-radius: 0.75rem; /* 12px */

ClassProperties
border-0border-width: 0px;
border-2border-width: 2px;
border-4border-width: 4px;
border-8border-width: 8px;

ClassPropertiesPreview
border-inheritborder-color: inherit;
border-currentborder-color: currentColor;
border-transparentborder-color: transparent;
border-blackborder-color: rgb(0 0 0);
border-whiteborder-color: rgb(255 255 255);

ClassProperties
border-solidborder-style: solid;
border-dashedborder-style: dashed;
border-dottedborder-style: dotted;
border-doubleborder-style: double;
border-hiddenborder-style: hidden;
border-noneborder-style: none;

Box Shadow

ابزارهای کاربردی برای کنترل سایه جعبه یک عنصر

ClassProperties
shadow-smbox-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
shadowbox-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
shadow-mdbox-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
shadow-lgbox-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
shadow-xlbox-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
shadow-2xlbox-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
shadow-innerbox-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
shadow-nonebox-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>

Opacity

ابزارهای کاربردی برای کنترل کدورت یک عنصر

ClassProperties
opacity-0opacity: 0;
opacity-5opacity: 0.05;
opacity-10opacity: 0.1;
opacity-20opacity: 0.2;
opacity-25opacity: 0.25;
opacity-30opacity: 0.3;
opacity-40opacity: 0.4;

Transforms

استایل های مربوط به ترنسفورم

ClassProperties
scale-0transform: scale(0);
scale-x-0transform: scaleX(0);
scale-y-0transform: scaleY(0);
scale-50transform: scale(.5);
scale-x-50transform: scaleX(.5);
scale-y-50transform: scaleY(.5);
scale-75transform: scale(.75);
scale-x-75transform: scaleX(.75);

ClassProperties
rotate-0transform: rotate(0deg);
rotate-1transform: rotate(1deg);
rotate-2transform: rotate(2deg);
rotate-3transform: rotate(3deg);
rotate-6transform: rotate(6deg);
rotate-12transform: rotate(12deg);
rotate-45transform: rotate(45deg);
rotate-90transform: rotate(90deg);
rotate-180transform: rotate(180deg);

ClassProperties
translate-x-0transform: translateX(0px);
translate-y-0transform: translateY(0px);
translate-x-pxtransform: translateX(1px);
translate-y-pxtransform: translateY(1px);
translate-x-0.5transform: translateX(0.125rem);
translate-y-0.5transform: translateY(0.125rem);
translate-x-1transform: translateX(0.25rem);
translate-y-1transform: translateY(0.25rem);
translate-x-1.5transform: translateX(0.375rem);
translate-y-1.5transform: translateY(0.375rem);
translate-x-2transform: translateX(0.5rem);
translate-y-2transform: translateY(0.5rem);
translate-x-2.5transform: translateX(0.625rem);
translate-y-2.5transform: translateY(0.625rem);
translate-x-3transform: translateX(0.75rem);
translate-y-3transform: translateY(0.75rem);
translate-x-3.5transform: translateX(0.875rem);

ClassProperties
skew-x-0transform: skewX(0deg);
skew-y-0transform: skewY(0deg);
skew-x-1transform: skewX(1deg);
skew-y-1transform: skewY(1deg);
skew-x-2transform: skewX(2deg);
skew-y-2transform: skewY(2deg);
skew-x-3transform: skewX(3deg);
skew-y-3transform: skewY(3deg);
skew-x-6transform: skewX(6deg);
skew-y-6transform: skewY(6deg);
skew-x-12transform: skewX(12deg);
skew-y-12transform: skewY(12deg);

ClassProperties
origin-centertransform-origin: center;
origin-toptransform-origin: top;
origin-top-righttransform-origin: top right;
origin-righttransform-origin: right;
origin-bottom-righttransform-origin: bottom right;
origin-bottomtransform-origin: bottom;
origin-bottom-lefttransform-origin: bottom left;
origin-lefttransform-origin: left;
origin-top-lefttransform-origin: top left;

بله…کافیست… اگر همین کلاس های را تا به اینجا مسلط باشید، مقدار زیادی از پروژه ها را میتوانید انجام دهید. برای مطالعه سایر کلاس ها لطفا به لینک مراجعه فرمایید.

امید به اینکه این مقاله آموزش کامل و جامع فریم ورک tailwind برایتان مفید واقع شده باشد.

2 پاسخ
  1. بی نام
    بی نام گفته:

    استاد جان. تو شهر ما سمت شرق کشور همه آموزش هات پخش شده است من هم استفاده کردم حالل کن تورو به خداوند

    پاسخ

دیدگاه خود را ثبت کنید

تمایل دارید در گفتگوها شرکت کنید؟
در گفتگو ها شرکت کنید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.