🤔چرا Tailwind ارزش یادگیری داره ؟ (پارت اول)

1️⃣سیستم استایلی دهی خیلی راحت و سریع داره.(تقریبا 90 درصد پراپرتی های CSS رو داره)

2️⃣پلاگین برای بلاگ و دارک مود و فرم ها و ..

3️⃣هر استایلی رو نداشته باشه خودتون میتونین در لحظه اضافه کنید یعنی میتونید مستقیما به عنوان کلاس CSS بنویسید text-[#fff] که میشه متن رنگ سفید:)

4️⃣هر یک کلاسی که استفاده کنید فقط همون یک کلاس به فایل استایلتون اضافه میشه (طوری نیست که 500 کیلوبایت استایل داشته باشید و از 5 کیلوبایتش استفاده کنید)

5️⃣به این دلیل که استایل هارو توی html می‌نویسید سرعت کارتون به شدت میره بالا

6️⃣ریسپانسیو کردن کاملا راحت

7️⃣از اونجایی که کدهارو دارید خودتون می‌نویسید و از کامپوننت های آماده استفاده نمیکنید، دیزاینی که میزنید شبیه بقیه نیست (یعنی طوری نیست که توی هر سایتی میرید بگید عه اینکه کامپوننت فلان فریمورکه)

⭕️ پارت دوم این پست رو تا ساعاتی دیگه براتون قرار میدم ❤️
با ما همراه باشید . . .

#css #framework #tailwind #part1
☕️ @CodeExplore

🤔چرا Tailwind ارزش یادگیری داره ؟ (پارت دوم)

8️⃣یک سری پلاگین هایی مثل daisyui هستن که بهتون کامپوننت آماده میدن، دقیقا شبیه کاری که بوت استرپ میکنه با این تفاوت که سورس کد 50 تا کامپوننت به پروژه اضافه نمیشه که در نهایت از 5 تاش استفاده کنید و هر کامپوننتی که استفاده کنید سورس همون فقط به فایل استایلتون اضافه میشه

9️⃣اینطوری نیست که یک بخشی از کدت بره توی html و یه بخشیش بره توی CSS (مثل بوت استرپ که کامپوننت رو استفاده میکنی باید بری توی CSS واسش استایل بنویسید چون بوت استرپ خیلی کلاس نداره واسه کاستومایز)

0️⃣1️⃣معمولا کامپوننت های بوت استرپ این مشکل رو دارن که خیلی قابل کاستومایز نیستن (به این دلیل که شما یه استایل میدید و خوده اون کامپوننت هم یه سری استایل داره و بینشون کانفیلیکت به وجود میاد و کدهای بوت استرپ روی کد های شما over-write میشه)

1️⃣1️⃣فریمورک کامپوننت بیس داخلی داره

2️⃣1️⃣میتونید کانفیگ های دیفالتش رو هم کاستوم کنید (مثلا سایز md رو هرچی دوست داشتید بدید)

3️⃣1️⃣میتونید داخل لایه هاش مثلا base، هرچی میخواید اضافه کنید

#css #framework #tailwind #part2
☕️ @CodeExplore

👋خوش اومدین به اولین قسمت از اموزش TailwindCss ، امروز میخایم فقط به معرفی و ویژگی های این داداشمون بپردازیم

💪اول اینکه باید بدونین TailwindCss یه فریمورک Css عه که با اسکن کردن کل فایل های html شما، کامپوننت های javascript و تمپلیت هاتون با اسم های مختلف کار میکنه و میاد اون استایل هارو به صورت استاتیک داخل فایل Css مینویسه

✅حالا ویژگی هایی که تیلویند رو اینقدر خفن کرده چیه؟
🔵افزایش سرعت توسعه: چون که با کلاس ها استایل میدیم و کلی قابلیت در اختیار ما قرار میده سرعتمون خیلی میره بالا
🔵قابلیت شخصی سازی بالا: تیلویند بخاطر فایل های کانفیگی که داره و البته قابلیت های خفن خودش بهتون این اجازه رو میده که کلی کانفیگ و کارای کاستوم انجام بدین
🔵سرعت بالای سایت با کمترین حجم Css: با تیلویند این قابلیت رو دارین که فایل های css تون کوچیک و جمع و جور باشه
🔵واکنش پذیری ( Responsive ): خیلی راحت میتونین صفحاتتون رو باهاش رسپونسیو کنین
سازگاری بالا با فریمورک های مختلف JavaScript

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

🔵 امروز صرفا یسری اشنایی با تیلویند ایجاد کردیم و قراره به مرور طبق مباحث اصلی پیش بریم و یواش یواش تیلویند رو یاد بگیریم

#tailwind #tailwind_1
☕️ @CodeExplore

🔥بریم سراغ آموزش های Tailwind و سعی کنیم هم نصبش کنیم هم یسری مباحث پایه رو پیش ببریم

☄️خب اول از همه برای اینکه تیلویند رو روی پروژمون نصب و استفاده کنیم نیاز به توضیحات من نیست خداییش ولی یه خلاصه ازش میگم: ( دقت کنین فقط توی یه پروژه ساده html css هست بدون استفاده از فریمورک و اگه دارین از فریمورک استفاده میکنین به داکیومنتش که لینکشم میزارم مراجعه کنین)
شما اول از همه باید دستورات مربوط به نصبش رو داخل کامندلاین پروژه وارد کنین تا براتون نصب بشه، البته دقت کنین قبلش node.js روی سیستمتون نصب باشه
این دستورات برای نصب tailwind :

npm install -D tailwindcss
npx tailwindcss init

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

✨وقتی که نصب و دانلود تموم میشه باید یسری کانفیگ اسون انجام بدیم، قبلش اینکه یسری فایل ها به پروژتون اضافه میشه و یکیش tailwind.config.js هستش که مربوط به کانفیگ های تیلویند میشه ( از اسمش معلومه اصن من چرا گفتم )
شما داخل این فایل بیاین یسری تغییراتی اعمال کنین، یعنی این محتوا رو داخلش بندازین:

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

البته تو فایل دیفالتش هستن فقط ما اینجا content رو اپدیت کردیم که مربوط میشه به اینکه الان این تیلویند ما، چه فرمت هایی رو از چه ادرس هایی بخونه و باهاشون سر و کار داشته باشه

✔️قدم بعدی اینه که بیایم و لایه های مختلف تیلویند رو به پروژه اضافه کنیم، برای این کار نیاز داریم یه فایل css داشته باشیم توی یه ادرس قشنگی که با خروجی های تیلویندمون قاطی نشه، ما میایم داخل پوشه src ، یه فایلی با هر اسمی خاستیم ( حتی این پوشه هم دلخواهه بخدا ) میسازیم، مثلا input.css و داخلش اینارو میزنیم:

src/input.css
@tailwind base;
@tailwind components;
@tailwind utilities;

خب حالا دیگه کانفیگ هامون حل شه و ما میتونیم از تیلویند استفاده کنیم، فقط یه مسئله هست و اینجا باید تیلویند به صورت لحظه‌ای تغییرات مارو بررسی کنه و هربار استفاده میشه ازش، بیاد کامپایل هارو انجام بده، پس این کامند رو داخل کامندلاین میزنیم ( اون واچ اخرش برای لحظه‌ای بودنه، اگه حذفش کنین هر بار اجرا شه کامپایل رو انجام میده )

npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

داخل این قسمت ما داریم میگیم که تیلویند گلم، بیا فایل داخل
./src/input.css
رو در نظر بگیر به عنوان استایل های ورودی و خروجیتو داخل ادرس
./src/output.css
بریز، حالا دیگه تیلویند ما میاد کامپایل هارو انجام میده و طبق لایه هایی که توی input.css اضافه کردیم کامپایل میکنه به output.css

📣در آخر فقط و فقط نیازه اون فایل خروجی ( اینجا از ما output.css عه ) رو لینک کنیم به html

src/index.html
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="./output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

و تمام!
شما میتونین تحوه نصب تیلویند و PostCss رو طبق همین کارا و یا توی فریمورک های مختلف از این لینک کامل و جامع مطالعه کنین:
🌐https://tailwindcss.com/docs/installation

قبل از اتمام اموزش، درباره اون لایه هایی که اضافه کردیم یکم صحبت کنیم، ببینین دوستان من، تیلویند 3 تا لایه داره به اسم base , components , utilities که هرکدوم یه دسته از تیلویندمون داخلشه، مثلا داخل base ، فونت ها، ریست ها و... وجود داره، یا components میشه همون استایل های مربوط به کامپوننت های تیلویند

👑امیدوارم لذت برده باشین تا اینجا کار

#tailwind #tailwind_2
☕️ @CodeExplore

👋در ادامه مباحث TailwindCss رسیدیم به جایی که دیگه نصب و راه اندازی شده و امروز میخایم یکم باهاش کار کنیم تا بفهمیم داره چه اتفاقاتی میوفته، یسری استایل و کلاس های مربوط به اندازه هارو در ادامه باهم بررسی میکنیم

💥خب اولین بحث درباره اندازه های تیلویند هستش که واحد های مخصوص خودشو داره و اومده لیست عظیمی از اندازه های پر استفاده رو برامون قرار داده، واحد های اندازه تیلویند اینطوریه که هر واحد میشه 4 پیکسل و 0.25rem که خب میتونین هروقت خاستین با یه فرمول ساده درش بیارین، یعنی واحد تیلویند رو ضرب در 4 کنین میشه اندازش به پیکسل و اگرم اون پیکسل رو تقسیم بر 16 کنین، واحدش برای rem به دست میاد
دقت کنین که اندازه های صرفا واحد هایی هستن که میگیم و میشه برای اکثر کلاس های مربوط به اندازه استفاده کرد، مثلا عرض و ارتفاع و...

حالا این اندازه های چطورین؟ برای مثال :

class="w-0"

اینجا داریم به width اندازه 0 رو میدیم که معلومه اصن، ولی

class="w-4"

اینجا دیگه این المنت ما میاد عرض 16 پیکسل میگیره یا همون 1rem
اگرم از خود size استفاده کنین، عرض و ارتفاع رو میده:

class="size-24"

البته برای تعیین اندازه ها برای ارتفاع میتونیم از h استفاده کنیم، و اینم بگم که اگه بخایم 1 پیکسل اندازه بدیم از کد زیر استفاده میکنیم:

class="h-px"

اینجا px یعنی یک پیکسل

⚡️حالا ما ممکنه بخایم اندازه auto بدیم، یا حتی درصد بدیم، یا اینکه از موارد دیگه استفاده کنیم، خدمت شما:

w-full //100%
w-screen //100vw
v-svw //100svw
w-lvw //100lvw
w-dvw //f100dvw
w-min // min-content
w-max // max-content
w-fit // fit-content
w-1/2 // 50%
w-1/4 // 25%
w-auto

دقت کنین این اندازه های فقط مختص به w یا همون width نیستش! صرفا داریم مثالش رو با این میزنیم

◀️حالا بریم سراغ بحث min , max و بررسیش کنیم، اینجا دیگه خبری از درصد ها مثل 1/4 و... نیست، ما باید برای min و max از اندازه های ثابت استفاده کنیم(البته نه همیشه)
اون واحد های پیکسلی رو که داریم و سر جاشونن
علاوه بر اون ها موارد px , full , min , max , fit رو داریم (تا اینجا برای min-w و max-w مشترک)
اما اما برای max-width که بشه همون max-w ما یسری موارد برای سایزهای مختلف رو داریم که مثل حالت رسپونسیو هستن البته با جزئیات بیشتر ( یعنی اندازه های ریز تر)
دقت کنین:

max-w-xs //320px
max-w-sm //384px
max-w-md //448px
...
max-w-7xl //1280px

max-w-prose //65ch
max-w-screen-sm //640px
...
max-w-screen-2xl //1536px

✨الان من یه مثال کوچیک میزنم برای کار با این اندازه ها و دقت کنین کلاس های اضافه‌ای که هنوز نگفتیم رو زیاد حساس نشین در اینده بهش میرسیم صرفا برای کار با اندازه ها میزنم که خشک نباشه:

<div class="w-24 h-screen max-w-sm min-h-4 max-h-32 border bg-black">
card
</div>

خب دیگه مباحث کلی اندازه های تموم شد و اینکه دقت کنین لیستش خیلی زیاد و بزرگه برای همین داخل لینک های پایین میتونین اینارو کامل ببینین:
🌐https://tailwindcss.com/docs/width
🌐https://tailwindcss.com/docs/max-width
🌐https://tailwindcss.com/docs/size

#tailwind #tailwind_3
☕️ @CodeExplore

☄️سلام عزیزای دلم امروز میخایم در ادامه مباحث TailwindCss به موضوع Spacing ها بپردازیم

خب اول اینکه منظور از Spacing ها همین فاصله ها هستن که شامل padding و margin و یه مبحث جدید و مرتبط به تیلویند به اسم Space Between ( که از اسمشم مشخصه چیه ) میشه

⚡️اول از همه برای margin و padding ما جهت های مختلفی داریم، مثلا پدینگی که از همه طرف اعمال بشه میشه همین p و جهت های خاص هم بعد از p میتونیم بزنیم:

p-0
px-0
py-0
ps-0
pe-0
pt-0
pb-0
pr-0
pl-0

دقت کنین به جای 0 میتونین از اون اندازه هایی که جلسه قبل باهم حرف زدیم دربارش استفاده کنین، مثلا : p-24
برای مارجین هم دقیقا به همین صورته فقط به جای p از m استفاده کنین

🔥خب حالا spece between چیه داستانش؟ بخاییم خلاصه بگیم اول باید اشاره کنم به اینکه ما داخل css یسری پراپرتی هایی داریم توی دیسپلی های خاصی که فاصله بین ایتم هارو مشخص میکنه، مثلا داخل دیسپلی flex و grid ، ما میتونیم با استفاده از gap بیایم و مشخص کنیم ایتم های ما چقدر از هم فاصله داشته باشن، اما نمیشه به صورت معمولی توی خیلی از دیسپلی ها این gap رو استفاده کرد، خب حالا تیلویند اومده با اضافه کردن space-between کلی کارمون رو راحت کرده و مارو از اینکه بخایم بین ایتم ها فاصله بندازیم و حتما از یسری دیسپلی ها استفاده کنیم راحت کرده!
استفادش خیلی سادس، شما میاین یه جهت و اندازه میدین و تمام، اینم مثالش:

space-y-4
space-x-10

الان این قسمت یعنی ایتم های داخل المنت ما، از محور عمودی یا همون y به مقدار 4 واحد فاصله بگیرن و از محور افقی یا همون x به اندازه 10 واحد، هیچ نیازیم به دیسپلی و این کارا نیست چون اینا با یه سیستم مارجین دهی هندل میشن در اصل

👑یه مثال ببینیم باهم:

    <div class="px-5 mx-auto mt-24 bg-black space-y-5 space-x-5 max-w-sm">
        <div class="size-24 bg-red"></div>
        <div class="size-24 bg-red"></div>
        <div class="size-24 bg-red"></div>
        <div class="size-24 bg-red"></div>
        <div class="size-24 bg-red"></div>
        <div class="size-24 bg-red"></div>
    </div>

👋خب این مبحث تیلویند هم تموم شد امیدوارم لذت برده باشین
#tailwind #tailwind_4
☕️ @CodeExplore

💥بریم واسه یادگیری رنگ‌ ها و استفادشون داخل TailwindCss

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

⚡️هر رنگی ( منظور رنگ های دیفالته ) داخل تیلویند، از 50 و 100 تاااا 900 و 950 درجه بندی داره، مثلا اینطوریه که رنگ قرمز یه همچین درجه هایی داره:

red-50
red-100
red-200
...
red-800
red-900
red-950

✨و شما میتونین از این رنگ ها خیلی جاها استفاده کنین

فرض کنین قراره به متن یه رنگی بدیم، میایم از کد زیر استفاده میکنیم:

class="text-red-500"

یا اگه بخایم به بک گراند رنگ بدیم:

class="bg-green-200"

و کلی چیز دیگه که میتونین داخلش رنگ هارو به کار ببرین

✔️از این لیست میتونین رنگ های تیلویند رو کامل ببینین و حالشو ببرین که چجوری با چشم هاتون بازی میکنه:
🌐https://tailwindcss.com/docs/customizing-colors

اما خب برای اینکه مبحث رنگ ها زیاد طولانی نبود میخایم راجب یه سینتکس خیلی قشنگ و جمع و جور داخل تیلویند صحبت کنیم که خیلی انعطاف زیادی به ما میده🌟
ببینین دوستان شما میتونین مقدار هایی که حتی داخل خود تیلویند نیست و کانفیگ هم نشده رو داخل کلاس همینطوری بنویسین
مثلا فرض کنین اندازه 5 پیکسل داخل خود تیلویند نیست ولی من یه المنت دارم که 5 پیکسل عرض میخاد، میام داخل [] مقدارمو میدم، اینطوری:

class="w-[5px]"

البته واحد اندازه گیریش نسبت به پراپرتی هست مثلا من اینجا میتونم درصد و vw و... استفاده کنم به جای پیکسل

یا فرض کنین یه رنگی میخام که داخل تیلویند نیست:

class="bg-[#123456]

به همین راحتی!🤩

#tailwind #tailwind_5
☕️ @CodeExplore

⚡️جیگرا بیاین بریم سراغ ادامه مباحث TailwindCss، میخایم وارد کار با فونت و متن ها بشیم شاید طول بکشه و اگه نیاز شد 2 پارتش کنیم

👑خب اول از همه اینکه فونت ها داخل تیلویند خیلی ساده هستن و به صورت دیفالت هم یسری فونت داخل خودش هست، میتونین هم داخل کانفیگ ها هر فونتی خاستین اضافه کنین( رنگ و سایز و.. هم میشه ولی هنوز دربارش صحبتی نکردیم )
خب شما اگه بخاین یه فونت به یه المنت اختصاص بدین روشش اینه:

font-fontName

مثلا

font-serif

بحث بعدی راجب وزن فونت هاس، یعنی همون font-weight که اونم خیلی راحت میتونین استفاده کنین:

font-thin
font-extralight
font-light
font-normal
font-medium
font-semibold
font-bold
font-extrabold
font-black

به ترتیب از font weight های 100 تا 900 میره بالا

☄️خب برسیم سراغ اندازه فونت ها یا همون Font Size که اینسری با کلمه font شروع نمیشه به جاش از text استفاده میکنیم
برای اندازه فونت ها میتونین این کلاس هارو به المنتتون اضافه کنین:

text-xs => 12px
text-sm => 14px
text-base => 16px
text-lg => 18px
text-xl => 20px
text-2xl => 24px
...
text-9xl => 128px

البته در نظر داشته باشین این موارد یه line-height هم بهتون میدن نسبت به اندازشون

اما خب ما بخایم رنگ متن هارو عوض کنیم چی؟ خیلی راحت بعد از text بیاین و رنگ مورد نظرتون رو قرار بدین:

text-red-500
text-black
text-white

حالا برای کاستوم کردن text decoration چه کلاسایی داریم؟ خدمت شما:🌟

underline
overline
line-through
no-underline

دیگه اون اضافه هاش توسط تیلویند حذف شده و همین اصل کارش مونده
نکته خفن اینه که میتونین این decoration رو کاستوم کنین، رنگ و استایل بهش بدین مثلا!

decoration-green-800
decoration-solid
decoration-double
decoration-doted
decoration-dashed
decoration-wavy

حتی اصن ضخامتش هم تغییر بدین اصن همچی در اختیارتونه:🦦

decoration-0
decoration-1
decoration-2
decoration-4
decoration-8

اینا هرکدوم بر اساس پیکسله دیگه مثلا 4 میشه 4 پیکسل
برای استایل فونت هاتون هم میتونین از موارد زیر استفاده کنین:

italic 
not-italic

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

🔥خب این اموزش شاید خیلی ساده بود و فقط لیست کردیم ولی طولانی بشه دیگه خسته میشین پس بقیه کار با متن ها باشه برای آینده

#tailwind #tailwind_6
☕️ @CodeExplore

🔥بریم سراغ قسمت بعدی از مباحث TailwindCss
همونطوری که میدونین ما توی اموزش قبلی درباره کار با متن ها صحبت کردیم و خب خیلی طولانی بود این مبحث و نصفش به این سمت افتاد که الان قراره توی این پست باهم پیش ببریمش

اول از همه راجب شکستگی متن ها میخایم صحبت کنیم یا همون text-wrap که اصولا خیلی اسون میتونه باشه براتون و یه همچین لیست کوتاهی از کلاس هارو سمت تیلویند برای استفاده ازش داریم:

text-wrap
text-nowrap
text-balance
text-pretty

✅و خب از اسمشون خیلی قشنگ مشخصه چیکار میکنن البته اینم بگم اسماش طوریه که صرفا خلاصه شده و میدونین که اینا همشون پراپرتی های css هستن

موضوع بعدی مربوط به مبحث فاصله underline از متنه یا همون unerline-offset
اول از همه برای ساخت یه خط زیر متن یا همون underline از همین کلاس underline استفاده میکنیم، و بعدش هم میتونیم فاصلش رو با offset تنظیم کنیم:

class="underline underline-offset-1"

اینم از 0 تا 8 داره و بر واحد پیکسله

💥خب حالا برای ترنسفورم متن ها که آپرکیس و... باشن هم کلاسای خیلی ساده‌ای داریم، از جمله:

uppercase 
lowercase
capitalize
normal-case // none

و خب قطعا باهاشون اشنایی دارین

قابلیت بعدی که تیلویند به ما میده برای مدیریت بیرون زدن متن هاس، یا همون text-overflow که بتونیم سه نقطه (...) اخر متن هامون که زیادی هستن و میزنن بیرون اضافه کنیم، ما سه تا کلاس قشنگ داریم:

truncate
text-ellipsis
text-clip

☄️دوتای پایین که مشخصه کارشون نسبت به پراپرتی css اونا قابل فهمه، ولی خب کلاس اولی جدیده و شامل سه تا استایل میشه سمت css ، یعنی شما وقتی از کلاس truncate استفاده کنین این کلاس ها به المنت شما داده میشه:

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

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

indent-0.5
indent-1
...
indent-96

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

✨برای کاستوم کردن text-align هم راحت میتونین اول text بزنین بعدش هم جهت دلخواه، مثلا:

text-center
text-start
text-end

👑خب بچه ها سعی کردم توی این پست و پست قبلی درباره کار با متن ها اون نکات مهم و کاربردی رو بگم هرچند بازم کلاس های زیادی وجود داره

#tailwind #tailwind_7
☕️ @CodeExplore

📌خب بچه ها امروز میخایم یکم کار با تیلویند رو جذاب تر کنیم و در ادامه مباحث TailwindCss به یسری قسمت های قشنگ تری برسیم

خب اول از همه باید بگم ما وقتی از تیلویند استفاده میکنیم دیگه نیاز نیست پاشیم بریم برای افکت های hover و focus جداگونه css بزنیم
و خیلی خیلی راحت میشه این افکت ها و سلکتور هارو داخل تیلویند به کار برد😂
توی مثال پایین براتون هاور و فکوس رو آوردم:

<button class="bg-sky-500 hover:bg-sky-700 hover:text-9xl focus:bg-red-500">
  Save changes
</button>

◀️خب الان ما گفتیم مثلا موقع هاور شدن این دکمه، بک گراندش عوض شه و سایز متنش بزرگ تر بشه، و وقتی هم روش عملیات فکوس رخ داد بک گراندش قرمز شه

حالا ما میتونیم بیایم مشخص کنیم وقتی مثلا فیلد هایی که داریم، required هستن یا disabled شدن، باز استایل هاشون عوض شه (یعنی وقتی اتریبیوت های مربوطه رو گرفتن)

<button class="bg-sky-500 disabled:opacity-50 required:text-red-500">
  Save changes
</button>

خیلی جالب تر میشه اگه بگم ما حتی میتونیم first-child و last-child و... هم مشخص کنیم!

<li class="flex py-4 first:pt-0 last:pb-0 even:bg-red-500 odd:bg-green-200">
      <img class="h-10 w-10 rounded-full" src="{person.imageUrl}" alt="" />
      <div class="ml-3 overflow-hidden">
        <p class="text-sm font-medium text-slate-900">{person.name}</p>
        <p class="text-sm text-slate-500 truncate">{person.email}</p>
      </div>
    </li>

✅اینا که چیزی نیست داداش، حتی به شبه المنت هایی مثل after و before المنت هم دسترسی داریم! مثال رو دقت کنین:

<div class="before::text-xl after:border"></div>

یه وقتایی هم پیش میاد که بخایم بگیم اره اگه فلان المنت راست چین یا چپ چین بود ( همون direction ) یسری استایل های متفاوت بگیره:

<div class="rtl:text-2xl ltr:bg-green-200"></div>

خب تا اینجا که هم اسون بود هم جذاب و منم فقط لیست کردم واستون
اما میخایم حالا راجب یه کار خفن دیگه صحبت کنیم باهم
🔥ببینین همه میدونیم یه وقتایی ما یسری المنت داریم که به هم مربوطن و گروهی کار میکنن، و میخام نسبت به هم یسری اتفاقا داخلشون بیوفته، یعنی اگه فلانی هاور شد این یکی یه اتفاق دیگه براش بیوفته، اینجاس که تیلویند اومده group هارو برامون ردیف کرده
شما اول از همه میاین یه گروه تشکیل میدین با استفاده از کلاس group و بعد از اون هم تگ هایی که داخل این گروه وجود دارن میتونن نسبت به هم گروهی هاشون واکنش نشون بدن
با مثلا راحت میشه درکش کرد و من این مثال رو از داک تیلویند میارم:

<a href="#" class="group block max-w-xs mx-auto rounded-lg p-6 bg-white ring-1 ring-slate-900/5 shadow-lg space-y-3 hover:bg-sky-500 hover:ring-sky-500">
  <div class="flex items-center space-x-3">
    <svg class="h-6 w-6 stroke-sky-500 group-hover:stroke-white" fill="none" viewBox="0 0 24 24"><!-- ... --></svg>
    <h3 class="text-slate-900 group-hover:text-white text-sm font-semibold">New project</h3>
  </div>
  <p class="text-slate-500 group-hover:text-white text-sm">Create a new project from a variety of starting templates.</p>
</a>

👑داخل این قسمت رو که نگاه کنین ما به تگ a یه کلاس group دادیم و اینطوری یه گرروه تشکیل دادیم از همه اینا، داخل این گروهمون دو جا کلاس group-hover رو میبینیم که خب اینطوری میشه معنیش کرد که وقتی کل این گروه ما(نه فقط یه المنت خاص) هاور شد، بیا متن فلان المنت رو سفید کن

ما این مورد رو فقط برای hover نداریم، برای focus و active و حتی odd و even هم داریمش فقط متنش عوض میشه و کاربردش که بلدین

این مبحث سلکتور ها خیلی خیلی طولانیه و اگر وقت شد در آینده باز هم دربارش توضیح میدیم

#tailwind #tailwind_8
☕️ @CodeExplore