حالا که فهمیدیم تیلویند چیه، بریم ببینیم که...
این Bootstrap که میگن چیه؟

🔹 بوت‌استرپ ( که قبلا با نام Twitter Bootstrap شناخته می‌شد) یه فریمورک CSS رایگان و اپن سورس هست که برای توسعه وب mobile first، رسپانسیو و هدفمند ساخته شده.

🔹 این فریمورک شامل الگوهای طراحی مبتنی بر HTML، CSS و (اختیاری) JavaScript برای تایپوگرافی، فرم‌ها، دکمه‌ها، ناویگیشن و سایر کومپوننت های طراحی فرانت اند هستش.

#Bootstrap

Channel | Group | YouTube

10 روش برای تسلط بر Tailwind CSS مثل یک پرو!

گام اول در تسلط بر Tailwind CSS، پیکربندی اون برای تطابق با نیازهای پروژه شماست. با سفارشی کردن فایل پیکربندی (معمولاً tailwind.config.js) می‌تونین ویژگی‌های مختلف رو فعال یا غیرفعال کنید و پالت رنگی، تایپوگرافی، بریک‌پوینت‌ها و خیلی ویژگی های دلخواهتون رو تعریف کنید.

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

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': '#3490dc',
        'secondary': '#ffed4a',
        'danger': '#e3342f',
      },
    },
  },
  variants: {},
  plugins: [],
}

۲. آموزش قدرت وریانت‌ها

فریمورک Tailwind CSS انواع وریانت‌هایی رو ارائه می‌ده که با استفاده از اونها میتونین استایل‌ها رو برای وضعیت‌ها و مؤلفه‌های خاص اعمال کنید. درک و استفاده موثر از وریانت‌ها می‌تونه به طور قابل توجهی جریان کار شما را بهبود ببخشه. به عنوان مثال، میتونین از وریانت‌های hover، focus و active برای ایجاد دیگر عناصر اینتر اکتیو استفاده کنید:

<button class="bg-blue-500 hover:bg-blue-700></button>

#Tailwind
منبع: لینک مقاله در مدیوم

Channel | Group | YouTube

دوستان گل، این مقاله رو تو پنج پارت میزاریم براتون❤️
سوالی ام داشتین تو گروه در خدمتیم😎
حمایت فراموش نشه❤️‍🩹
Channel | Group | YouTube

خو مگه قرار نیست هر تغییری بود کامیت کنیم؟💔

#meme_video

Channel | Group | YouTube

حتما نگاه بهش بندازید منم خودم خیلی برام سوال برام بود, چجوری میتونم اسکرول هارو کاستوم کنم!!!
#CSS

Channel | Group | YouTube

آقا یه چیت شیت برای انواع اینپوت ها تو html براتون اوردم👌
#HTML

Channel | Group | YouTube

سلام دوستان، شبتون بخیر 🌑
از این به بعد میتونین مطالب چنل رو با هشتگ های اختصاصی شون پیگیری کنین.
#CSS
#Flex_Box
#CSS_Grid
#CSS_Tricks
#HTML
#Tailwind
#Bootstrap
#meme_video
#meme_image
⚡️ پیشنهادی، انتقادی، هر چیزی ام که دوست داشتین در مورد پستها، محتوای چنل یا هر چیز دیگه ای خوشحال میشیم که برامون بفرستین 🌟

Channel | Group | YouTube

ترجمه: دیباگینگ، فعل، کاراگاه شدن تو یه فیلم جنایی، در حالی که مجرم ام هستی🗿
#meme_image

Channel | Group | YouTube

10 روش برای تسلط بر Tailwind CSS مثل یک پرو!

پارت 2

۳.کاستومایز کردن!

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

// tailwind.config.js
module.exports = {
  theme: {
    extend: {},
  },
  variants: {},
  plugins: 
    function ({ addUtilities }) {
      const newUtilities = {
        '.my-2': {
          margin: '0.5rem',
        },
      };

      addUtilities(newUtilities, ['responsive', 'hover');
    },
  ],
}

۴.استفاده از PurgeCSS برای ساخت و ساز بهینه تر!

همونطور که میدونین Tailwind CSS بدلیل اینکه تعداد زیادی از کلاس‌های CSS رو تولید می‌کنه، میتونه باعث ساخت فایلهای بزرگی بشه. ولی راه حل اینم داریم، برای بهینه‌سازی بیشتر، میتونین از ابزاری مثله PurgeCSS برای حذف کلاس‌های بی‌استفاده استفاده کنین!
اولش البته مطمئن بشید که تنظیماتش اوکیه تا HTML، CSS و JavaScript رو هم اسکن کنه و کدهای غیر ضروری اونا رو هم از بین ببره.

#Tailwind
منبع: لینک‌ مقاله در مدیوم

Channel | Group | YouTube

طراحی Loading animation تو css 😎

🔹 این فیچرو حتما تو سایتای پورتفولیو دیدین، بریم ببینیم که چطور این استایل جذاب رو پیاده سازی کنیم. من خودم برای آمار استفاده کردم !

#CSS

Channel | Group | YouTube

10 روش برای تسلط بر Tailwind CSS مثل یک‌ پرو!

پارت ۳

۵. مسلط شدن به طراحی رسپانسیو

در Tailwind CSS طراحی رسپانسیو بسیار عالی عمل می‌کنه. یاد بگیرین که چطوری از کلاسای رسپانسیو مثل sm، md، lg و xl برای ایجاد طرح‌هایی استفاده کنین که با اندازه مختلف صفحه نمایش سازگار باشن. یه مثال از یه متن رسپانسیو رو این پایین میبینین :

<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl">متن رسپانسیو</h1>

۶. کاوش در اکستنشنها

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

منبع: لینک مقاله در مدیوم

#Tailwind

Channel | Group | YouTube

اصن بدون آهنگ مگه میشه؟

#meme_video

Channel | Group | YouTube

در این پست چند تا از خفن ترین حالت های فیلتر کردن در css براتون شیر میکنم.

انتشار یادتون نره❤️
#CSS

Channel | Group | YouTube

blur:
این فیلتر یه حالت مات شده به المنت میده که خیلی اونو جذاب میکنه، توی تصویر بالا از سمت چپ به راست میتونید اثرش رو مشاهده کنید.

#CSS

Channel | Group | YouTube

Brightness:

اینم حالت روشن و تاریکی رو ست میکنه براتون، که میتونین تو استایل هاتون ازش استفاده کنید.

#CSS

Channel | Group | YouTube

Contrast:

این افکت contrast خیلی جاها بکار میاد! مثلا برای هاور ها
#CSS

Channel | Group | YouTube

Drop-Shadow:

واقعا این یکی از بهترین افکت های که ازش خیلی جاها استفاده کردم همین افکته .میاد دور اون عکسه براساس حالت شکلی که داره shadow ایجاد میکنه.

#CSS

Channel | Group | YouTube