آموزش کامل فریم‌ورک Tailwind CSS v4 – راهنمای سریع و کاربردی

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

تمام ویژگی های تیلویند ورژن 4

باید بدانید که هم اکنون آخرین ورژن تیلویند، نسخه 4 هست که به تازگی ارایه شده است و ابتدا لازم است تغییرات و ویژگی های این نسخه را نسبت به نسخ قبلی بررسی کنیم:

۱. موتور جدید با عملکرد بالا

در نسخهٔ ۴٫۰، یک موتور جدید به نام «Tailwind Oxide» معرفی شده است که با استفاده از زبان برنامه‌نویسی Rust توسعه یافته است. این موتور باعث افزایش چشمگیر سرعت ساخت و به‌روزرسانی پروژه‌ها می‌شود؛ به‌طوری‌که ساخت‌های کامل تا ۵ برابر سریع‌تر و ساخت‌های آپدیتی بیش از ۱۰۰ برابر سریع‌تر شده‌اند.

۲. طراحی برای وب مدرن

این نسخه از ویژگی‌های پیشرفتهٔ CSS مانند لایه‌های آبشاری (cascade layers)، ویژگی‌های سفارشی ثبت‌شده با @property و تابع color-mix() بهره می‌برد. این امکانات به توسعه‌دهندگان اجازه می‌دهد تا از قابلیت‌های مدرن CSS در پروژه‌های خود استفاده کنند.

۳. نصب ساده‌تر

در نسخهٔ ۴٫۰، فرآیند نصب و پیکربندی ساده‌تر شده است. اکنون با حداقل وابستگی‌ها و بدون نیاز به پیکربندی پیچیده، می‌توانید Tailwind CSS را تنها با یک خط کد در فایل CSS خود اضافه کنید.

۴. افزونهٔ رسمی Vite

برای بهبود عملکرد و کاهش نیاز به پیکربندی، یک افزونهٔ رسمی برای Vite ارائه شده است که به‌طور کامل با Tailwind CSS یکپارچه شده است.

۵. تشخیص خودکار محتوا

در این نسخه، فایل‌های قالب به‌صورت خودکار شناسایی می‌شوند و نیازی به پیکربندی دستی برای تعیین مسیرهای محتوا نیست.

۶. پشتیبانی از وارد کردن (import) داخلی

دیگر نیازی به استفاده از ابزارهای اضافی برای وارد کردن فایل‌های CSS متعدد نیست؛ زیرا پشتیبانی از @import به‌صورت داخلی فراهم شده است.

۷. پیکربندی مبتنی بر CSS

در نسخهٔ ۴٫۰، پیکربندی و توسعهٔ فریم‌ورک مستقیماً در CSS انجام می‌شود و نیازی به فایل پیکربندی JavaScript نیست. این رویکرد تجربهٔ توسعه‌دهنده را بهبود می‌بخشد و امکان استفاده از متغیرهای CSS را در سراسر پروژه فراهم می‌کند.

۸. متغیرهای تم CSS

تمامی توکن‌های طراحی به‌عنوان متغیرهای CSS در دسترس قرار گرفته‌اند تا بتوانید در هر جایی از آن‌ها استفاده کنید.

۹. ابزار مهاجرت خودکار

برای تسهیل فرآیند به‌روزرسانی پروژه‌های موجود به نسخهٔ ۴٫۰، یک ابزار مهاجرت خودکار ارائه شده است که بیشتر تغییرات مورد نیاز را به‌صورت خودکار اعمال می‌کند. این ابزار نیاز به Node.js نسخهٔ ۲۰ یا بالاتر دارد.

آموزش نصب Tailwind در ورژن 4 با vite و cli

راحتترین راه حل نصب تیلویند ورژن4 با ویت و cli است که به نوبت خواهیم گفت، ابتدا یک پوشه ساخته و طبق معمول داخل cmd آن اول دستور npm init را زده و سپس دستور زیر:

npm install tailwindcss @tailwindcss/vite

سپس درون فایل vite.config.ts وارد کنید:

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

پوشه src ساخته و داخل آن فایل css و html اصلی خود را قرار دهید و در فایل سی اس اس اصلی ابتدا وارد کنید:

@import "tailwindcss";

فرآیند ساخت خود را با npm run dev یا هر دستور دیگری که در فایل package.json شما پیکربندی شده است اجرا کنید.

اما اگر در راه نصب با ویت به مشکل امنیتی برخورد کردید و یا به هر دلیلی نصب نشد، میتوانید از روش CLI که ساده تر هم هست استفاده کنید.

ابتدا کامند زیر را بزنید:

npm install tailwindcss @tailwindcss/cli

بعد پوشه src ساخته و داخل آن فایل های اصلی html و css خود را قرار دهید. در فایل اصلی css بنویسید:

@import "tailwindcss";

در نهایت دستور watching را فعال کنید:

npx @tailwindcss/cli -i ./src/master.css -o ./src/output.css --watch

این هم میشود فایل HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="output.css">
</head>
<body>
    <p class="bg-slate-800">ascdascd</p>
</body>
</html>

سرعت فوق العادست….لذت ببرید♥

آیا میدانید مدرسه پرنیان، دوره فرانت اند حرفه ای بصورت حضوری و مجازی برگزار میکند؟

کلیک کنید

آموزش نصب Tailwind در ورژن های 3 و ماقبل

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: [],
  }

نکته: در Tailwind CSS، JIT (Just-in-Time) یک سیستم کامپایل است که به شما این امکان را می‌دهد تا فقط کلاس‌های CSSی که واقعاً در کد خود استفاده کرده‌اید، تولید و بهینه‌سازی کنید. این ویژگی به طور قابل توجهی عملکرد و کارایی را بهبود می‌بخشد، به ویژه در پروژه‌های بزرگ.

برای فعال‌سازی JIT در پروژه Tailwind خود، می‌توانید فایل پیکربندی Tailwind را به این شکل به‌روز کنید:

// tailwind.config.js
module.exports = {
  mode: 'jit',
  purge: ['./src/**/*.{html,js,ts,jsx,tsx}'],
  // تنظیمات دیگر
};

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

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

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

  <script src="https://cdn.tailwindcss.com"></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 استفاده کنید.

مدیریت 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>

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

Aspect Ratio در تیلویند

این ویژگی برای تنظیم نسبت تصویر استفاده می‌شود و به شما امکان می‌دهد به راحتی نسبت طول به عرض یک المان را تنظیم کنید. این ویژگی در Tailwind 3 به صورت پیش‌فرض ارائه شده است.در اینجا، نسبت تصویر ۱۶:۹ برای تصویر اعمال می‌شود.

<div class="aspect-w-16 aspect-h-9 bg-gray-300">
  <img src="example.jpg" alt="Example" />
</div>

Multi-Column Layout در تیلویند

تیلوایند CSS اکنون به راحتی از چند ستون پشتیبانی می‌کند و می‌توانید المان‌ها را در چندین ستون سازمان‌دهی کنید. در اینجا، سه ستون ایجاد می‌شود و فاصله‌ای بین ستون‌ها مشخص می‌گردد.

<div class="columns-3 gap-4">
  <div class="bg-gray-200 p-4">محتوا ۱</div>
  <div class="bg-gray-200 p-4">محتوا ۲</div>
  <div class="bg-gray-200 p-4">محتوا ۳</div>
</div>

Customizing the Config (Tailwind Config) در تیلویند(ورژن 3 و قبل)

یکی دیگه از قابلیت‌های بسیار پیشرفته تیلوایند، سفارشی‌سازی کامل استایل‌ها از طریق فایل tailwind.config.js است. شما می‌توانید تم‌ها، رنگ‌ها، سایه‌ها، اندازه‌ها و هر چیزی که نیاز دارید را تغییر بدید یا گسترش بدید. در اینجا، رنگ سفارشی و فاصله‌های جدید به تم اضافه شده‌اند که می‌توانند در کلاس‌های CSS استفاده شوند.

module.exports = {
  theme: {
    extend: {
      colors: {
        customColor: '#ff6600',
      },
      spacing: {
        '72': '18rem',
        '84': '21rem',
      },
    },
  },
}

Support for CSS Grid and Flexbox

تیلوایند به صورت کامل از Grid و Flexbox پشتیبانی می‌کند، به شما این امکان را می‌دهد که به سادگی طراحی‌های انعطاف‌پذیر ایجاد کنید. در این مثال، سه ستون با فاصله‌های مساوی ایجاد می‌شود.

<div class="grid grid-cols-3 gap-4">
  <div class="bg-red-200">1</div>
  <div class="bg-green-200">2</div>
  <div class="bg-blue-200">3</div>
</div>

Arbitrary Properties در تیلویند

<div class="[background-image:url('/path-to-image.jpg')] bg-no-repeat bg-cover">
  این یک div با پس‌زمینه تصویر سفارشی است.
</div>

Custom Forms Plugin در تیلویند

یکی از پلاگین‌های جذاب تیلوایند، Custom Forms Plugin است که به شما اجازه می‌دهد به سادگی فرم‌های زیبا و سازگار با استایل‌های پروژه طراحی کنید. این پلاگین به صورت خودکار استایل‌های مناسب برای ورودی فرم‌ها و دکمه‌ها را اعمال می‌کند.

<input type="text" class="form-input mt-1 block w-full" placeholder="Enter text here">

darkMode در تیلویند

در Tailwind CSS، دارک مود (Dark Mode) یک قابلیت است که به شما اجازه می‌دهد استایل‌های متفاوتی برای حالت تاریک (dark) تعریف کنید، تا با تغییر به دارک مود، ظاهر سایت یا اپلیکیشن به صورت خودکار به نسخه تاریک آن تغییر کند. Tailwind به راحتی به شما امکان می‌دهد که استایل‌های خود را برای دارک مود مشخص و مدیریت کنید.

<html class="dark">
  <body class="bg-white dark:bg-gray-900 text-black dark:text-white">
    <p>این متن در دارک مود سفید و در حالت معمولی مشکی است.</p>
  </body>
</html>

First and Last Variants در تیلویند

تیلوایند به شما اجازه می‌دهد از کلاس‌های خاصی برای اولین و آخرین المان در یک لیست استفاده کنید.در این مثال، اولین آیتم با رنگ آبی و آخرین آیتم با رنگ قرمز نمایش داده می‌شود.

<ul class="space-y-4">
  <li class="first:bg-blue-500 last:bg-red-500">Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>

Component-Based Design with @layer در تیلویند

@layer در Tailwind CSS یکی از قدرتمندترین ابزارهاست که به شما اجازه می‌دهد استایل‌های خود را در لایه‌های مختلف سازمان‌دهی و مدیریت کنید. این ویژگی به توسعه‌دهندگان کمک می‌کند تا استایل‌ها را به روش modular (ماژولار) و سازمان‌یافته بنویسند، که در پروژه‌های بزرگ یا پیچیده بسیار مهم است.

در Tailwind CSS، شما می‌توانید استایل‌ها را در سه لایه مختلف قرار دهید:

• Base: برای استایل‌های پایه (مانند resetها یا استایل‌های اولیه عناصر HTML).
• Components: برای ساخت کامپوننت‌های سفارشی و reusable (مثل کارت‌ها، دکمه‌ها و …).
• Utilities: برای تعریف کلاس‌های کاربردی (مانند margin، padding، رنگ‌ها و …).

با استفاده از دستور @layer، شما می‌توانید به Tailwind CSS بگویید که استایل‌های سفارشی شما باید در کدام لایه قرار بگیرند.

1. لایه Base

این لایه برای اعمال استایل‌های پایه مانند reset یا تنظیمات کلی تایپوگرافی استفاده می‌شود. این استایل‌ها معمولاً قبل از هر چیزی اعمال می‌شوند. در این مثال، تمام تگ‌های h1 و p از استایل‌های تعریف‌شده در این لایه بهره می‌برند.

@layer base {
  h1 {
    @apply text-4xl font-bold;
  }

  p {
    @apply text-lg text-gray-700;
  }
}

2. لایه Components

در این لایه، شما می‌توانید استایل‌های خاص مربوط به کامپوننت‌ها را تعریف کنید. این لایه بعد از لایه پایه بارگذاری می‌شود و برای ساختن اجزای (components) قابل استفاده مجدد بسیار مفید است. در این مثال، دو کامپوننت btn و card تعریف شده‌اند که می‌توانند در سراسر پروژه استفاده شوند.

@layer components {
  .btn {
    @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
  }

  .card {
    @apply bg-white shadow-lg rounded-lg p-4;
  }
}

3. لایه Utilities

این لایه برای کلاس‌های کاربردی و کوچک استفاده می‌شود که معمولاً به‌صورت تک‌خطی تعریف می‌شوند و برای اعمال استایل‌های خاص در موارد خاص کاربرد دارند. این لایه آخرین لایه‌ای است که بارگذاری می‌شود، بنابراین می‌تواند استایل‌های قبلی را نادیده بگیرد (override).در اینجا، دو کلاس سفارشی در لایه Utilities تعریف شده‌اند که به راحتی در هر جای پروژه قابل استفاده هستند.

@layer utilities {
  .content-auto {
    content-visibility: auto;
  }

  .text-shadow-md {
    text-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
}

@apply: استفاده مجدد از کلاس‌ها در CSS

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

.btn {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}

.btn-primary {
  @apply bg-green-500;
}

@theme در تیلویند ورژن4

در نسخهٔ ۴٫۰ از Tailwind CSS، پیکربندی تم‌ها به‌طور کامل به فایل‌های CSS منتقل شده است و دیگر نیازی به فایل tailwind.config.js نیست. برای تعریف و مدیریت تم‌ها، از دستور @theme استفاده می‌شود که به شما امکان می‌دهد متغیرهای طراحی (Design Tokens) مانند رنگ‌ها، فونت‌ها و اندازه‌ها را به‌صورت مستقیم در CSS تعریف کنید.

تعریف متغیرهای تم با @theme:

در فایل CSS اصلی خود، می‌توانید با استفاده از دستور @theme، متغیرهای طراحی پروژه را تعریف کنید. در مثال زیر این متغیرها به‌عنوان CSS Variables تعریف می‌شوند و می‌توانید در سراسر پروژه از آن‌ها استفاده کنید.

@import 'tailwindcss';

@theme {
  --color-primary: blue;
  --color-txt: white;
}

استفاده از متغیرهای تم در کلاس‌های Tailwind:

پس از تعریف متغیرها، Tailwind به‌طور خودکار کلاس‌های مرتبط با آن‌ها را ایجاد می‌کند. به‌عنوان مثال، با تعریف --color-primary، کلاس‌هایی مانند bg-primary و text-primary در دسترس خواهند بود:

    <div class="bg-primary text-txt p-4">
        این یک باکس با رنگ پس‌زمینهٔ اصلی است.
    </div>

یا در استفاده ای دیگر میتوانید برای تعریف متغیر های سی اس اس و سپس فراخوانی آنها در همان سی اس اس استفاده کنید. مثال زیر را ببینید:

@theme {
  --font-3xl: 120px;
  --color-red: red;

}
@layer utilities{
  .txt{
    color: var(--color-red);
    font-size: var(--font-3xl);
  }
}

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

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

در تیلویند ورژن 4 به دلیل حذف شدن فایل tailwind.config.js همین مراحل کافیست و نهایتا میتوانید در لایه base این کار را انجام دهید. کمی پایین تر در رابطه با base توضیح بیشتری ارایه خواهد شد.

@import "tailwindcss";
@layer base {
    @font-face {
        font-family: parsa;
        src: url(font/IRANSans.ttf);
    }
    body{
        font-family: parsa;
    }
}

اما چنانچه نیاز به داشتن نام کلاس دلخواه برای فونتتان داشتید از کد زیر در لایه جدیدی به نام theme استفاده کنید.

@import "tailwindcss";

@font-face {
    font-family: parsa;
    src: url(font/IRANSans.ttf);
}
@theme {
  --font-parsa: 'parsa', sans-serif;
}
@layer utilities {
  .font-parsa {
    font-family: var(--font-parsa);
  }
}

و بعد در html فراخوانی کنید»

<body dir="rtl">
    <p class="bg-slate-800 font-parsa text-amber-100">سلام. من پارسا هستم</p>
</body>

اما در ورژن های غیر 4، باید به 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>
    );
  }

color-mix در تیلویند

Tailwind این پراپرتی جدید را به‌عنوان کلاس داخلی ندارد، اما می‌توان از [attr] و @layer برای اعمال آن استفاده کرد.

@layer utilities{
  .btn{
    background-color: color-mix(in srgb, #ff0000 50%, #0000ff 50%);
  }
}

پلت های رنگی مدرن در تیلویند ورژن4

ما کل پالت رنگی پیش‌فرض را از rgb به oklch ارتقا داده‌ایم، و از حیطه وسیع‌تر استفاده کرده‌ایم تا رنگ‌ها را در مکان‌هایی که قبلاً توسط فضای رنگی sRGB محدود شده بود زنده‌تر کنیم.

ابزارهای جدید سه بعدی در تیلویند ورژن4

ما ( یعنی بچه های تیلویند 🙂 ) در نهایت APIهایی را برای انجام تبدیل‌های سه بعدی اضافه کرده‌ایم، مانند rotate-x-*، rotate-y-*، scale-z-*، translate-z-*، و چندین مقدار دیگر.

در نظر داشته باشید میزان تغییرات و موارد اضافه شده در ورژن4 (که جزئیات داستان هستند و کم اهمیت) تقریبا زیاد است و ما در این مقاله نمیتوانیم تمامی آنها را ذکر کنیم. پس لطفا وارد لینک زیر شده و لیست کامل جزئیات را مطالعه فرمایید.

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

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

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

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

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