دوره های پرنیان

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

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

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

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

در انتهای این مقاله، آموزش ویدیویی تیلویند آمده است. از دست ندهید!

Tailwind CSS چارچوبی برای نوشتن استایل (ظاهر) صفحات وب با استفاده از کلاس های از پیش تعریف شده است. برخلاف فریمورک های CSS سنتی که با کامپوننت های از پیش ساخته شده همراه هستند، Tailwind به شما مجموعه ای از ابزارهای کمکی (utility) ارائه می دهد که می توانید برای استایل دهی دقیق به عناصر HTML خود ترکیب کنید.

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

با tailwind میتوانید به سرعت وب سایت های مدرن بسازید بدون اینکه HTML خود را ترک کنید.

Tailwind CSS یک فریم‌ورک CSS مبتنی بر Utility-First است که به شما کمک می‌کند تا ظاهر و احساس وب‌سایت‌های خود را با استفاده از یک مجموعه گسترده از کلاس‌های آماده‌سازی CSS ایجاد کنید. این فریم‌ورک به شما امکان می‌دهد تا طراحی‌های سفارشی و جذابی ایجاد کنید بدون اینکه نیازی به نوشتن CSS داشته باشید.

تاریخچه Tailwind CSS

Tailwind CSS در سال 2017 توسط Adam Wathan و Chris Gannon ایجاد شد. این فریم‌ورک به سرعت محبوبیت پیدا کرد و اکنون در میلیون‌ها وب‌سایت در سراسر جهان استفاده می‌شود.

اهمیت Tailwind CSS

Tailwind CSS به دلایل زیر اهمیت دارد:

  • سرعت: Tailwind CSS به شما امکان می‌دهد تا طراحی‌های خود را سریع‌تر ایجاد کنید.
  • انعطاف‌پذیری: Tailwind CSS به شما امکان می‌دهد تا طراحی‌های سفارشی و جذابی ایجاد کنید.
  • قابلیت توسعه: Tailwind CSS به راحتی قابل توسعه است و می‌توانید آن را برای نیازهای خاص خود سفارشی کنید.

من در مورد نام کلاس ها تا به حال چندین هزار کلمه مختلف نوشته ام، اما حقیقت این است که تا زمانی که واقعاً آن را امتحان نکنید، هرگز حرف من را باور نخواهید کرد.واقعاً فکر می‌کنم که از خود می‌پرسید که چگونه تا به حال با CSS به روش دیگری کار کرده‌اید!!!

آدام واتان , خالق Tailwind CSS

از آنجایی که Tailwind بسیار آسان است، هرگز شما را تشویق نمی کند که یک سایت را دو بار طراحی کنید. حتی با یک پالت رنگ و مقیاس اندازه، ساختن همان جزء با ظاهری کاملاً متفاوت در پروژه بعدی آسان است.

Tailwind به طور خودکار تمام CSS های استفاده نشده را هنگام ساخت برای تولید حذف می کند، به این معنی که بسته CSS نهایی شما کوچکترین بسته ممکن است. در واقع، اکثر پروژه های Tailwind کمتر از ۱۰ کیلوبایت CSS را به کاربر ارسال می کنند.

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

آموزش نصب Tailwind

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

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

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

npm install -D tailwindcss
npx tailwindcss init

آموزش نصب 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

نصب تیلویند به کمک CDN:

برای استفاده از Tailwind CSS، ابتدا باید آن را به پروژه خود وارد کنید. این کار را می‌توانید با اضافه کردن کد زیر به فایل index.html خود انجام دهید:

<script src="https://cdn.tailwindcss.com" defer></script>

پیشنهاد میکنیم آموزش نصب تیلویند در ری اکت را هم مطالعه کنید.

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

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

مهمترین کلاس‌های Tailwind CSS

Tailwind CSS دارای مجموعه گسترده‌ای از کلاس‌ها است که می‌توانید برای ایجاد ظاهر و احساس وب‌سایت‌های خود از آنها استفاده کنید. برخی از مهمترین کلاس‌های Tailwind CSS عبارتند از:

  • اندازه: این کلاس‌ها برای کنترل اندازه عناصر استفاده می‌شوند. به عنوان مثال، برای ایجاد یک عنصر با عرض 100٪، می‌توانید از کلاس w-100 استفاده کنید.
  • ارتفاع: این کلاس‌ها برای کنترل ارتفاع عناصر استفاده می‌شوند. به عنوان مثال، برای ایجاد یک عنصر با ارتفاع 100٪، می‌توانید از کلاس h-100 استفاده کنید.
  • موقعیت: این کلاس‌ها برای کنترل موقعیت عناصر استفاده می‌شوند. به عنوان مثال، برای ایجاد یک عنصر در وسط صفحه، می‌توانید از کلاس mx-auto استفاده کنید.
  • رنگ: این کلاس‌ها برای کنترل رنگ عناصر استفاده می‌شوند. به عنوان مثال، برای ایجاد یک عنصر با رنگ آبی، می‌توانید از کلاس bg-blue-500 استفاده کنید.
  • فونت: این کلاس‌ها برای کنترل فونت عناصر استفاده می‌شوند. به عنوان مثال، برای ایجاد یک عنصر با فونت اندازه 16px، می‌توانید از کلاس text-16px استفاده کنید.
  • رنگ پس‌زمینه: این کلاس‌ها برای کنترل رنگ پس‌زمینه عناصر استفاده می‌شوند. به عنوان مثال، برای ایجاد یک عنصر با پس‌زمینه آبی، می‌توانید از کلاس bg-blue-500 استفاده کنید.
  • رنگ حاشیه: این کلاس‌ها برای کنترل رنگ حاشیه عناصر استفاده می‌شوند. به عنوان مثال، برای ایجاد یک عنصر با حاشیه آبی، می‌توانید از کلاس border-blue-500 استفاده کنید.
  • اندازه فونت: این کلاس‌ها برای کنترل اندازه فونت عناصر استفاده می‌شوند. به عنوان مثال، برای ایجاد یک عنصر با فونت اندازه 16px، می‌توانید از کلاس text-16px استفاده کنید.
  • نوع فونت: این کلاس‌ها برای کنترل نوع فونت عناصر استفاده می‌شوند. به عنوان مثال، برای ایجاد یک عنصر با فونت sans-serif، می‌توانید از کلاس font-sans استفاده کنید.
  • وزن فونت: این کلاس‌ها برای کنترل وزن فونت عناصر استفاده می‌شوند. به عنوان مثال، برای ایجاد یک عنصر با فونت bold، می‌توانید از کلاس font-bold استفاده کنید.

سایر کلاس‌ها

علاوه بر کلاس‌های ذکر شده در بالا، Tailwind CSS دارای مجموعه گسترده‌ای از کلاس‌های دیگر است که می‌توانید برای کنترل ویژگی‌های مختلف عناصر استفاده کنید. برخی از این کلاس‌ها عبارتند از:

  • محل قرارگیری: این کلاس‌ها برای کنترل محل قرارگیری عناصر استفاده می‌شوند. به عنوان مثال، برای ایجاد یک عنصر در بالای صفحه، می‌توانید از کلاس top-0 استفاده کنید.
  • ترازبندی: این کلاس‌ها برای کنترل ترازبندی عناصر استفاده می‌شوند. به عنوان مثال، برای ایجاد یک عنصر با ترازبندی راست، می‌توانید از کلاس align-right استفاده کنید.
  • فاصله‌گذاری: این کلاس‌ها برای کنترل فاصله بین عناصر استفاده می‌شوند. به عنوان مثال، برای ایجاد فاصله 10px بین دو عنصر، می‌توانید از کلاس mt-10 استفاده کنید.
  • ظاهر: این کلاس‌ها برای کنترل ظاهر عناصر استفاده می‌شوند. به عنوان مثال، برای ایجاد یک عنصر با حاشیه دور، می‌توانید از کلاس rounded استفاده کنید.
  • فعالیت: این کلاس‌ها برای کنترل فعال بودن یا غیرفعال بودن عناصر استفاده می‌شوند. به عنوان مثال، برای ایجاد یک عنصر غیرفعال، می‌توانید از کلاس disabled استفاده کنید.

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

برای اضافه کردن هر فونتی با پسوند .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>

اما برای هاور شدن sibling ها از کد زیر استفاده کنید:

<section> <p class="peer/first">1</p> <p class="peer/second">2</p> <p class="peer-hover/first:bg-red-500">3</p> <p class="peer-hover/second:bg-yellow-500">4</p> </section>

استایل دادن از پرنت به فرزندان توسط *

در آپدیت جدید اضافه شد…

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

<div> <h2>Categories:<h2> <ul class="*:rounded-full *:border *:border-sky-100 *:bg-sky-50 *:px-2 *:py-0.5 dark:text-sky-300 dark:*:border-sky-500/15 dark:*:bg-sky-500/10 ..."> <li>Sales</li> <li>Marketing</li> <li>SEO</li> <!-- ... --> </ul> </div>

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

طراحی ریسپانسیو و واکنش گرا در 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 برایتان مفید واقع شده باشد.

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

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

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

13 نظر

    1. واقعا متاسفم، حق معنوی مادی ۱۰۰ ها شاگرد و خود شخص استاد گردن شما و تمام افراد مثل شماست. استاد هم حلال کنند هیچ یک از افرادی که هزینه کردند و کلاس آمدند از جمله خود من حلال نخواهند کرد.
      همه چی از خودمان شروع می شود.
      انسان باشیم.

      دی شیخ با چراغ همی‌ گشت گرد شهر

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

  1. اگر بخوایم همینجوری ساده و به روش ابتدایی فایل های css و js رو به صفحه html اضافه کنیم. چندتا فایل داره؟ از کجا دریافت کنیم؟

    1. فایل جی اس که یا خارجی بنویسید و یا داخلی. مشکلی ندارد.
      اما در رابطه با سی اس اس تا جایی که میتوانید از کلاس ها استفاده کنید و حتی الامکان سراغ فایل master.css نروید.

  2. ممنون بابت آموزش
    یه سوال داشتم اگه بخوایم به یهdiv سایز بدیم مثلا با w-1/2 و بخوایم که ارتفاشم به اندازه عرض باشه باید چه طوری بنویسیم؟

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

کلاس طراحی سایت