در این مطلب سعی بر آن شده است تا بصورت عمیق، آموزش کامل و جامع فریم ورک 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

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 خود بزنید و سیو بگیرید. خواهید دید که کار میکند.

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

اضافه کردن فونت دلخواه در تیلویند

برای اضافه کردن هر فونتی با پسوند .ttf ویا .woff ابتدا باید تیلویند را بصورت لوکال نصب کنید. پس برای بار چندم از شما میخواهیم به پست آموزش نصب tailwind در react مراجعه کنید و کامل آن را نصب کنید.

سپس یک پوشه font بسازید و فونت مربوطه با پسوند های ذکر شده را در آن قرار دهید و آن کد ها را در index.css که فایل مربوط خود تیلویند هست، فراخوانی کنید. مانند کد و عکس زیر:

@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
    font-family: iran;
    src: url("font/IRANSans.ttf") format("opentype");
  }

در آخر، باید به tailwind CSS اطلاع دهید که باید یک خانواده فونت را ایجاد کند، بنابراین برای این کار باید چند خط در tailwind.config.js اضافه کنید.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        primary: "iran",
      },
    },
  },
  plugins: [],
}

حال کد زیر را در صفحه HTML خود یا App.JS وارد کنید:

import './index.css';
export default function App() {
    return (
      <div className="container mx-auto bg-red-200 rounded-xl shadow border p-8 m-10">
        <p className="text-3xl text-gray-700 font-bold mb-5 font-primary ">
          پارسا قربانیان
        </p>
        <p className="text-gray-500 text-lg font-primary ">
          پدر علم ری اکت ایران
        </p>
      </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> ***************

برای اینکه پرنت هاور شود و فرزندان متاثر از آن شوند کد زیر:

<div class="group w-[300px] h-[300px] border border-red-500 rounded"> <span class="peer text-black group-hover:text-yellow-400 group-hover:bg-gray-900">mohammadreza</span> <p class="peer-hover:text-red-700 peer-hover:bg-green-950">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis ut modi hic aspernatur deleniti repellat.</p> </div>

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

در آموزش کامل و جامع فریم ورک 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 به بعد آبی رنگ خواهد ماند.

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

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

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

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

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

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

Container

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

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>

Columns

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

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>

Box Sizing

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

Class	Properties
box-border	box-sizing: border-box;
box-content	box-sizing: content-box;

مانند کد زیر:

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

Display

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

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>

Floats

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

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;

Object Fit

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

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;

Overflow

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

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>

Position

ابزارهایی برای کنترل نحوه قرارگیری یک عنصر در 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>

Top / Right / Bottom / Left

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

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>

Visibility

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

Class	Properties
visible	visibility: visible;
invisible	visibility: hidden;

Z-Index

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

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

مجموعه کلاس های 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;

Padding و margin

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

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 */

Width

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

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;

Height

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

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;

Font Size

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

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;

List Style Type

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

Class	Properties
list-none	list-style-type: none;
list-disc	list-style-type: disc;
list-decimal	list-style-type: decimal;

Text Align

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

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;

Text Color

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

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

Text Decoration

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

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;

Background 

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

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;

Border

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

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;

Box Shadow

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

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>

Opacity

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

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;

Transforms

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

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 برایتان مفید واقع شده باشد.

قسمت اول آموزش (سری یک)

قسمت دوم آموزش (سری دوم)

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