☄️خوش اومدین به یک پست دیگه از آموزش های TailwindCss

◀️در ادامه مباحث قبلی ما رسیدیم به گروه بندی و اینکه چطور مشخص کنیم اگه گروهمون هاور شد فلان اتفاق بیوفته
حالا امروز میخام بیشتر عمیق بشیم توی این مبحث و جزئیات بیشتری رو پیش ببریم

ببینین اول از همه بزارین من مثال کدشو که از داک خود تیلویند اوردم نشونتون بدم:

<ul role="list">
  {#each people as person}
    <li class="group/item hover:bg-slate-100 ...">
      <img src="{person.imageUrl}" alt="" />
      <div>
        <a href="{person.url}">{person.name}</a>
        <p>{person.title}</p>
      </div>
      <a class="group/edit invisible hover:bg-slate-200 group-hover/item:visible ..." href="tel:{person.phone}">
        <span class="group-hover/edit:text-gray-700 ...">Call</span>
        <svg class="group-hover/edit:translate-x-0.5 group-hover/edit:text-slate-500 ...">
          <!-- ... -->
        </svg>
      </a>
    </li>
  {/each}
</ul>

یکم پهپ قاطیش کردن بیخیال شما کلاس های تیلویند رو دریابین
اینجا ما یه سینتکس داریم که به این صورت نوشته شده:

group/{name}
group-hover/{name}

الان ما با این اسم حرکت به المنت خودمون یه اسم میدیم تا توی گروهی که ساختیم انتخابش کنیم و با اون اسم بهش دسترسی داشته باشیم
💎توی مثال بالا، هر li ما داخل گروه اسمش item هست و اون پایین ترش داخل تگ a که اسم edit گرفته، گفته هروقت روش هاور شد، ایتم ما برای فلان اتفاق بیوفته و راحت دسترسی داره به اون تگ داخل گروه

حالا پایین تر رو ببینین:

<div class="group is-published">
  <div class="hidden group-[.is-published]:block">
    Published
  </div>
</div>

اینجا دیگه خیلی خفن شده و گفتیم این گروه ما هروقت کلاس is-published گرفتن، فلان تگ ما دیسپلی block بگیره، یعنی راحت میتونیم سلکتور های مختلفی رو ست کنیم و کلی با جی اس بلا سرش بیاریم

یا حتی میتونیم مثل کد پایین بیایم و با سلکتور های دیگه کار کنیم، قبلا راجب این براکت های باز و بسته گفتم توی تیلویند:

<div class="group">
  <div class="group-[:nth-of-type(3)_&]:block">
    <!-- ... -->
  </div>
</div>

✨خب گروه بندی هارو کامل باهم بررسی کردیم
یه مبحث دیگه که خیلی خفنه peer هست ( پیر نیستا جوونه )😂
ما داخل گروه بندی ها، گروهمون طوری بود که المنت ها داخل اون گروه اصلی باشن
ولی داخل peer اینا کنار هم قرار دارن و همینطوری استایل هارو با اسم peer بهشون میدیم

<form>
  <label class="block">
    <span class="block text-sm font-medium text-slate-700">Email</span>
    <input type="email" class="peer ..."/>
    <p class="mt-2 invisible peer-invalid:visible text-pink-600 text-sm">
      Please provide a valid email address.
    </p>
  </label>
</form>

داخل این مثال ما اومدیم کلاس peer رو به input دادیم و بعدش هم به p کنارش گفتیم هروقت input ما invalid بود، نشون داده بشه
درکل سینتکسل کلی اینطوریه که شما مدیفایر رو بعد از peer مشخص میکنین:

peer-{modifire)
peer-focus
peer-required

⚡️یه نکته مهم اینه که این کلاس peer باید قبل از peer-{modifire} ست بشه
حالا ما اون اسم دهی که داخل گروه ها گفتیم رو اینجا هم داریم این مثال رو دقت کنین:

html 
<fieldset>
  <legend>Published status</legend>

  <input id="draft" class="peer/draft" type="radio" name="status" checked />
  <label for="draft" class="peer-checked/draft:text-sky-500">Draft</label>

  <input id="published" class="peer/published" type="radio" name="status" />
  <label for="published" class="peer-checked/published:text-sky-500">Published</label>

  <div class="hidden peer-checked/draft:block">Drafts are only visible to administrators.</div>
  <div class="hidden peer-checked/published:block">Your post will be publicly visible on your site.</div>
</fieldset>

سلکتور ها کلا خیلی طولانیه مبحثش و من یه سلکتور دیگه بگم و بریم:

<ul class="*:bg-sky-50 ...">
  <li class="bg-red-50 ...">Sales</li>
  <li>Marketing</li>
  <li>SEO</li>
  <!-- ... -->
</ul>

👑سلکتور * رو وقتی استفاده میکنیم که بخایم یه استایل رو به تمام فرزندان تگمون بدیم همینطور که توی مثال بالا میبینین

#tailwind #tailwind_9
☕️ @CodeExplore

⚡️سلام عزیزای دلم امروز اومدیم بازم چیزای جدیدی از TailwindCss یاد بگیریم

توی این پست قصد داریم راجب flex و grid داخل تیلویند صحبت کنیم و خب شاید نشه توی یه پارت جمعش کرد

💥اول از همه با مبحث Flex شروع میکنیم و میریم که بررسی کنیم این عزیز دل چیا داره
خب ما برای اینکه بخایم display یه المنت رو flex کنیم میام و کلاس flex رو بهش میدیم که خب واقعا واضحه
اما نکته جالب برای نوشتن align-items و justify-content هستش که برای align-items ما فقط کلاس items رو مینویسیم و جلوش مقدارش رو، ولی برای justify-content از justify
مثال رو باهم ببینیم:

<div class="flex align-center justify-center> 
</div> 

✅و خب برای مقادیرش این لیست پایین کمکتون میکنه:

justify-normal
justify-start
justify-end
justify-center
justify-between
justify-around
justify-evenly
justify-stretch
items-start
items-end
items-center
items-baseline
items-stretch

خب حالا ما داخل فلکس یه مبحثی داریم به اسم flex-basis که خب اینطوری استایل دهی میشه:
basis-*
که خب مقادیرش مثل همون واحد های اندازه تیلوینده که قبلا گفتیم و چیز خاصی نداره مثلا basis-20

🟡برای تغییر جهت و دایرکشن flex از لیست زیر به راحتی میتونین استفاده کنین:

flex-row
flex-row-reverse
flex-col
flex-col-reverse

نکته بعدی راجب flex-wrap هستش که اینم خب توضیح خاصی نداره خداییش چی بگم لیستش خدمتتون:

flex-wrap
flex-wrap-reverse
flex-nowrap

◀️برای خود مقادیر flex:

flex-1 // 1 1 0%
flex-auto // 1 1 auto
flex-initial // 0 1 auto
flex-none // none

◀️برای مقادیر flex-grow:

grow // flex-grow: 1;
grow-0 //flex-grow: 0;

‼️یه مبحثی هم داریم به اسم order که میاد اولویت بندی میکنه اون المنت ها و نحوه قرار گیری رو
از order-1 تا order-12 داریم ولی برای اولین و اخرین هم دوتا order-first و order-last هستن که کارمون رو راحت میکنن

اینم بگم دوستان اموزش تیلویند بر فرض این میره جلو که شما عزیزان Css رو بلدین و خب برای همین وقتی استایل هارو بلد باشین توضیح خاصی واقعا نمیتونم بدم چون خیلی از کلاس های تیلویند اصن با اسمشون معلومه چیکار میکنن
ادامه مباحث که درباره گرید هست بره برای پست بعدی خسته نشین☕

#tailwind #tailwind_10
☕️ @CodeExplore

🔥خب خب بیاین باهم بریم ادامه TailwindCss رو یاد بگیریم

⚡️خب اول از همه باید بگم برای اینکه ما بیایم دیسپلی المنت رو grid کنیم فقط کافیه کلاس grid رو بهش بدیم
بعد از اون دیگه خیلی راحت میتونیم ستون و ردیف هاشو تنظیم کنیم
داخل تیلویند به صورت پیش فرض از 1 تا 12 در نظر گرفته شده برای ستون و ردیف ها ولی خب میتونین بیشتر و کمترش هم کنین که البته نیاز نیست خداییش
خب برای اینکه شما بیاین ستون و ردیف هارو مشخص کنین این کلاس ها در اختیارتونه

grid-cols-1
grid-rows-1
grid-cols-2
grid-rows-2
....
grid-cols-12
grid-rows-12

البته نیاز نیست هردو رو باهم به کار ببرین صرفا لیست کردیم
اینم بگم شما وقتی grid-rows هارو مشخص نکنین دیفالتش auto هست و خودش میگیره
پس بنظرم ستون هارو مشخص کنین کافی باشه حالا دیگه تصمیم با خودتون

حالا ما یه چیزی هم داریم به اسم span که میتونیم بگیم این المنت ما چند تا ستون یا ردیف رو مال خودش کنه
ما برای ستون و ردیف ها یه سینتکس داریم براش فقط اسمش فرق داره
این لیست رو دقت کنین:

col-span-1
row-span-1
col-span-2
row-span-2
....
col-span-12
row-span-12
col-span-full
row-span-full

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

col-start-1
col-end-1
row-start-1
row-end-1
col-start-2
col-end-2
row-start-2
row-end-2
...
col-start-13
col-end-13
row-start-13
row-end-13

الان ما اینجا تا عدد 13 رو داریم، دلیلش رو نمیگم میخام ببینم کدومتون Css و مبحث Grid رو بلدین به من توی کامنتا بگین چرا با اینکه 12 تا ستون داریم، اینجا تا 13 زده؟🦦

خب یه مبحث دیگه راجب Grid Auto Flow هستش که خب مربوط به دیسپلی گرید میشه و این کلاس هارو براش داریم:

grid-flow-row
grid-flow-col
grid-flow-dense
grid-flow-row-dense
grid-flow-col-dense

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

auto-cols-auto
auto-cols-min
auto-cols-max
auto-cols-fr

💎برای ردیف هم فقط cols رو با rows عوض کنین

و اما مبحث مهم آخر که هم برای فلکس هستش هم گرید، فاصله بین ایتم هاس که همون gap هستش
برای تنظیم gap، ما هم میتونیم از اندازه های تیلویند که قبلا یاد گرفتیم استفاده کنیم هم جهت محورش یعنی افقی یا عمودی یا هردو رو مشخص کنیم:

gap-1
gap-x-1
gap-y-1

📌و خب این قسمت و قسمت قبلی خیلی خیلی مهم بودن سعی کنین حتما تمرین کنین باهاشون

#tailwind #tailwind_10
☕️ @CodeExplore

⚡️اومدیم با یکی دیگه از آموزش های TailwindCss و قراره که چندین مباحث مختلف رو باهم بررسی کنیم

حاشیه نریم و بریم لیست کلاس هارو ببینیم

برای اینکه z-index رو تنظیم کنیم ده تا ده تا طبقه بندی داریم براش و خب اینطوری داخل تیلویند هستش:

z-0
z-10
z-20
...
z-50

برای تنظیم visibility هم اینارو داریم:

visible
invisible //hidden
collapse

👑اما خب برای اینکه دیسپلی یه تگ رو none کنیم چی؟ خیلی راحت بهش کلاس hidden بدین

برای تنظیم overflow هم لیست زیر رو داریم:

overflow-auto
overflow-hidden
overflow-clip
overflow-visible
overflow-x-...
overflow-y-...

خب دوستان عزیز این پست برای این بود که یکم موارد متفرقه رو ببریم جلو، از پست های بعد قراره وارد مباحث جزئی تر بشیم
شماهم خودتون این صفحه رو نگاه کنین جالبه برای دیسپلی ها:
🌐 https://tailwindcss.com/docs/display

#tailwind #tailwind_11
☕️ @CodeExplore

⚡️خب بچه ها در ادامه مباحث TailwindCss رسیدیم به جاهایی که وقتشه کارای حرفه‌ای تر بکنیم

ببینین ما تا الان یسری کلاس هایی رو باهم کار کردیم که خب خیلی نیازهامون رفع میشه ولی هنوز کلی کار هست که نمیتونیم انجام بدیم!

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

◀️خب اول از همه این لیستش رو ببینین که داخلش بریک پوینت های تیلویند رو با سایزی که دارن ( Mofile First هستن ) نشون دادیم:

sm : 640px
md: 768px
lg: 1024px
xl: 1280px
2xl: 1536px

این بریک پوینت ها خب اصولا تو اکثر فریمورک های Css هستش و زیاد گنگ نیست براتون😠

حالا بریم سراغ نحوه استفادش
ببینین داخل مباحث قبلی گفتیم که اره وقتی میخایم بگیم این المنت ما وقتی مثلا هاور شد فلان استایل رو بگیره اینطوری عمل میکردیم:

class="bg-red-500 hover;bg-green-500"

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

class="bg-red-500 sm:bg-green-500 md:bg-yellow-500 lg:bg-black xl:bg-blue-500 2xl:bg-white"

اینم بگم که بریک پوینت های تیلویند از سایز موبایل شروع میشه و بهش میگن Mobile First پس استایل های دیفالت از کوچیک ترین سایز اسکرین هستن

حالا فرض کنین ما کلی استایل های المنتمون رو میخایم تو سایز lg تغییر بدیم:

class="w-full h-24 border lg:w-1/2 lg:h-96 lg:border-0

اینطوری چند بار مینویسیم و خب اره یکم شلوغ و طولانی میشه
♾فقط امیدواریم تو اپدیت های بعدی تیلویند اینم درست کنن که مثلا به جاش بیایم اینکارو کنیم یه بار بریک پوینت رو بنویسیم و بعدش یه لیست از کلاس هارو بزنیم جلوش

اما اینم بگم همین الانشم خیلی خفنه و کارمون رو خیلی خوب جلو میبره

💎در آینده وقتی رفتیم سراغ کانفیگ های تیلویند بهتون میگم که چطوری سایز و بریک پوینت های جدید هم اضافه کنین یا اسم اینارو عوض کنین

#tailwind #tailwind_12
☕️ @CodeExplore

👑خوش اومدین به یکی از مهم ترین آموزش های تیلویند
چرا مهم ترین؟ چون امروز میخایم راجب کانفیگ کردن تیلویند صحبت کنیم و یادبگیریم چطور مواردی که میخایم و داخل تیلویند به صورت دیفالت وجود نداره رو اضافه کنیم

🔔ببینین ما وقتی تیلویند رو روی پروژمون نصب میکنیم یه فایل tailwind.config.ts به وجود میاد که میتونیم داخلش کلی کارای جالب کنیم

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

/** @type {import('tailwindcss').Config} */
export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

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

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

مثال بالا رو از داک خود تیلویند براتون آوردم، اینجا میبینین که یسری موارد به صورت مستقیم داخل theme اضافه شدن مثل colors و fontFamily ، و همینطور هم یسریا مثل spacing و borderRadius دااخل extend اضافه شدن

⚡️فرق خیلی خیلی مهم اینجا اینه که اگه شما مثلا رنگ هارو داخل خود theme اضافه کنین، رنگ های دیفالت تیلویند دیگه از بین میرن و فقط رنگ هایی میمونن که شما اضافه کرده باشین، اما داخل extend، هرچی اضافه کنین کنار موارد دیفالت قرار میگیره و هردو رو باهم دارین

تمام موارد داخل theme و extend هم مثل همه و محدودیتی ندارین

◀️استفادش هم مثلا شما یه رنگ primary اضافه کردین اینطوری میزنین:

class="text-primary bg-primary"

#tailwind #tailwind_13
☕️ @CodeExplore

سلام خوش اومدین به یه آموزش دیگه از تیلویند 🔥
تو مباحث قبلی ما درباره کانفیگ کردن تیلویند صحبت کردیم و خب برای بحث کانفیگ کردن فونت ها امروز قراره این پست کوتاه رو ببینیم ⚡️

خب اول از همه شما نیاز به ادرس فونت یا فایلش دارین، بعد از اون خب داخل نصب تیلویند یه فایل css داریم که لایه های تیلویند رو اضافه کردیم داخلش
مثلا فایل main.css که داخلش این موارد هست هرچند توی نصب تیلویند تو همون مباحث اولیه گفتیم:

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

🟢خب حالا ما میتونیم اینجا به لایه های مختلف تیلویند یسری چیزارو اضافه کنیم، اگر قرار باشه فونت اضافه کنیم باید داخل لایه base باشه چون که مربوط به چیزای ریشه‌ای میشه.

این کارو میکنیم:

@layer base {
 @font-face {
       font-family: "new font",
       src: url("./path/to/your/font.ttf)
  }
}

حالا داخل فایل tailwind.config.ts میایم و فونتمون رو اضافه میکنیم:

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

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

class="font-newFont"

#tailwind #tailwind_14
☕️ @CodeExplore

خوش اومدین به یه قسمت دیگه از آموزش TailwindCss ☄️

🗣️ برای امروز مبحث خاصی نداریم و میخایم چند تا چیز مختلف رو از تیلویند بررسی کنیم.

💡 اولین چیزی که مد نظرمونه یه سینتکس قشنگ برای کاستوم کردن کلاس هاس یا شرایطی که بخاین استایل هارو جای دیگه بزنین یا کامپوننتون رو درست کنین
ما داخل تیلویند یه چیزی داریم به اسم apply@ که میتونین داخل css و نه داخل html استایل های تیلویند رو اعمال کنین
یه مثال:

.element{
     border-radius: 5px;
     @apply w-24 h-24 bg-green
}

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

خیلی وقت ها نیاز داریم فیلتر های css رو روی المنت هامون اعمال کنیم و کلی کلاس هست که یسریاشو مثال میزنیم:

blur
blur-md
brigness-0
brigness-50
brigness-200
contrast-50
drop-shadow
drop-shadow-lg
grayscale
hue-rotate-15
invert

برای اعمال ترنسفورم به امنت هم این سری استایل هارو داریم:

scale-50
scale-x-50
rotate-0
rotate-3
rotate-180
translate-x--24
translate-y-4
skew-x-6
skew-y-6

#tailwind #tailwind_15
☕️ @CodeExplore

👋خوش اومدین به آخرین پست از مباحث TailwindCss ( خداییش دیگه نمدونم چیز خاصی هست بگم یا نه، بقیش جزئیاته که باید خودتون پیگیر بشین )

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

🟡مبحث اول راجب transition ها هستش که ما میتونیم برای المنتمون مشخص کنیم چه transition هایی داشته باشه

transition-none
transition-all
transition
transition-colors
transition-opacity
transition-shadow
transition-transform

لیست بالا کامل از اسمش هم مشخصه که هر ترنزیشن برای کدوم قسمت از المنت شما اعمال میشه
و میتونین تایم بندیش رو هم عوض کنین (دیفالت : 150ms ):

duration-0
duration-75
duration-100
duration-150
...
duration-700
duration-1000

خب حالا بریم برای بحث بعدی که راجب مقادیر منفی هستش
🟢خب قطعا میدونین که ما یه وقتایی میخایم یه مقدار منفی به پراپرتی بدیم، مثلا:

.element{
position: relative;
top: -20px;
}

خب ما قبلا راجب اینکه چطوری بیایم top رو ست کنیم گفتیم:

class="top-4"

و حالا کافیه برای اینطور مقادیر ( پوزیشن ها، سایه ها و حتی ترنسفورم ها ) اینطوری منفی بدیم:

class=" -top-4 -rotate-180"

🔴بحث بعدی راجب بک گراند گرادینت هست ( background gradients )
داخل این قسمت خب ما میدونیم که باید به صورت دیفالت، رنگی که ازش شروع میشه، درصدش، رنگ بعدی و درصدش و رنگ اخری و درصدش رو کامل مشخص کنیم، حالا داخل تیلویند اینطوری راحت میتونین بک گراند گرادینت ست کنین:

اول کلاس هارو ببینیم

from-[color]
from-[present]
via-[color] // optional middle color
via-[present]
to-[color]
to-[present]

برای مشخص کردن جهت گرادینت هم کلاس داریم:

bg-gradient-to-r
bg-gradient-to-l
bg-gradient-to-t
bg-gradient-to-b

خب حالا بریم سراغ مثالش که از داک تیلویند اومده:

<button type="button" class="bg-gradient-to-r from-green-400 to-blue-500 hover:from-pink-500 hover:to-yellow-500 ...">
  Hover me
</button>

خب دوستان عزیز این آموزشمون هم تموم شد امیدوارم با این مباحث تمرین کنین و به خوبی از تیلویند استفاده کنین

راستی پیشنهادتون رو بگین که چه مبحثی دوست دارین و اگر شرایطش بود براتون قرار بدیم

#tailwind #tailwind_16
☕️ @CodeExplore

✌️به هم تیمی عزیزمون رضا جان، برنده شدنش رو در مسابقه "کی بهتر کد میزنه" رو از طرف تیم کداکسپلور تبریک میگیم. امیدواریم همیشه در مسیر رشد و پیشرفت باشن👍
🔥🔥🔥🔥🔥🔥🔥🔥
👀تو این مسابقه باید ببینیم که چه کسی می تونه Ui بهتری رو با Tailwind در مدت زمان محدود و با رعایت ساختار پوشه بندی ، ساختار کد و کلین کد پیاده سازی کنه.🔥

▶️مسابقه رضا جان رو می تونین از لینک یوتیوب زیر مشاهده کنید :

🖥https://youtu.be/ZWtVffbIb08

#tailwind #event
☕️ @CodeExplore