سازگاری بالا با فریمورک های مختلف JavaScript
#tailwind #tailwind_1
Please open Telegram to view this post
VIEW IN TELEGRAM
⚡16❤🔥6🔥4
شما اول از همه باید دستورات مربوط به نصبش رو داخل کامندلاین پروژه وارد کنین تا براتون نصب بشه، البته دقت کنین قبلش node.js روی سیستمتون نصب باشه
این دستورات برای نصب tailwind :
npm install -D tailwindcss
npx tailwindcss init
با یکم صبر براتون نصبش کامل میشه، البته دقت کنین این کامند ها ممکنه اپدیت شن و بهتره از دایکومنت خود تیلویند بردارین همیشه
شما داخل این فایل بیاین یسری تغییراتی اعمال کنین، یعنی این محتوا رو داخلش بندازین:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}البته تو فایل دیفالتش هستن فقط ما اینجا content رو اپدیت کردیم که مربوط میشه به اینکه الان این تیلویند ما، چه فرمت هایی رو از چه ادرس هایی بخونه و باهاشون سر و کار داشته باشه
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
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 رو طبق همین کارا و یا توی فریمورک های مختلف از این لینک کامل و جامع مطالعه کنین:
قبل از اتمام اموزش، درباره اون لایه هایی که اضافه کردیم یکم صحبت کنیم، ببینین دوستان من، تیلویند 3 تا لایه داره به اسم base , components , utilities که هرکدوم یه دسته از تیلویندمون داخلشه، مثلا داخل base ، فونت ها، ریست ها و... وجود داره، یا components میشه همون استایل های مربوط به کامپوننت های تیلویند
#tailwind #tailwind_2
Please open Telegram to view this post
VIEW IN TELEGRAM
Tailwindcss
Installing with Vite - Installation
Integrate Tailwind CSS with frameworks like Laravel, SvelteKit, React Router, and SolidJS.
❤🔥13⚡4🔥2
دقت کنین که اندازه های صرفا واحد هایی هستن که میگیم و میشه برای اکثر کلاس های مربوط به اندازه استفاده کرد، مثلا عرض و ارتفاع و...
حالا این اندازه های چطورین؟ برای مثال :
class="w-0"
اینجا داریم به width اندازه 0 رو میدیم که معلومه اصن، ولی
class="w-4"
اینجا دیگه این المنت ما میاد عرض 16 پیکسل میگیره یا همون 1rem
اگرم از خود size استفاده کنین، عرض و ارتفاع رو میده:
class="size-24"
البته برای تعیین اندازه ها برای ارتفاع میتونیم از h استفاده کنیم، و اینم بگم که اگه بخایم 1 پیکسل اندازه بدیم از کد زیر استفاده میکنیم:
class="h-px"
اینجا px یعنی یک پیکسل
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 نیستش! صرفا داریم مثالش رو با این میزنیم
اون واحد های پیکسلی رو که داریم و سر جاشونن
علاوه بر اون ها موارد 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>
خب دیگه مباحث کلی اندازه های تموم شد و اینکه دقت کنین لیستش خیلی زیاد و بزرگه برای همین داخل لینک های پایین میتونین اینارو کامل ببینین:
#tailwind #tailwind_3
Please open Telegram to view this post
VIEW IN TELEGRAM
Tailwindcss
width - Sizing
Utilities for setting the width of an element.
⚡10🔥3❤🔥1
خب اول اینکه منظور از Spacing ها همین فاصله ها هستن که شامل padding و margin و یه مبحث جدید و مرتبط به تیلویند به اسم Space Between ( که از اسمشم مشخصه چیه ) میشه
p-0
px-0
py-0
ps-0
pe-0
pt-0
pb-0
pr-0
pl-0
دقت کنین به جای 0 میتونین از اون اندازه هایی که جلسه قبل باهم حرف زدیم دربارش استفاده کنین، مثلا : p-24
برای مارجین هم دقیقا به همین صورته فقط به جای p از m استفاده کنین
استفادش خیلی سادس، شما میاین یه جهت و اندازه میدین و تمام، اینم مثالش:
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
Please open Telegram to view this post
VIEW IN TELEGRAM
⚡10❤🔥4🔥2
خب ببینین دوستان خود تیلویند یه لیست عظیمی از پالت رنگی های مختلف و قشنگ داره که کامل کارتون رو راه میندازه
red-50
red-100
red-200
...
red-800
red-900
red-950
فرض کنین قراره به متن یه رنگی بدیم، میایم از کد زیر استفاده میکنیم:
class="text-red-500"
یا اگه بخایم به بک گراند رنگ بدیم:
class="bg-green-200"
و کلی چیز دیگه که میتونین داخلش رنگ هارو به کار ببرین
اما خب برای اینکه مبحث رنگ ها زیاد طولانی نبود میخایم راجب یه سینتکس خیلی قشنگ و جمع و جور داخل تیلویند صحبت کنیم که خیلی انعطاف زیادی به ما میده
ببینین دوستان شما میتونین مقدار هایی که حتی داخل خود تیلویند نیست و کانفیگ هم نشده رو داخل کلاس همینطوری بنویسین
مثلا فرض کنین اندازه 5 پیکسل داخل خود تیلویند نیست ولی من یه المنت دارم که 5 پیکسل عرض میخاد، میام داخل [] مقدارمو میدم، اینطوری:
class="w-[5px]"
البته واحد اندازه گیریش نسبت به پراپرتی هست مثلا من اینجا میتونم درصد و vw و... استفاده کنم به جای پیکسل
یا فرض کنین یه رنگی میخام که داخل تیلویند نیست:
class="bg-[#123456]
به همین راحتی!
#tailwind #tailwind_5
Please open Telegram to view this post
VIEW IN TELEGRAM
Tailwindcss
Colors - Core concepts
Using and customizing the color palette in Tailwind CSS projects.
❤🔥17⚡3🔥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 میره بالا
برای اندازه فونت ها میتونین این کلاس هارو به المنتتون اضافه کنین:
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
Please open Telegram to view this post
VIEW IN TELEGRAM
❤🔥12⚡3🔥1
همونطوری که میدونین ما توی اموزش قبلی درباره کار با متن ها صحبت کردیم و خب خیلی طولانی بود این مبحث و نصفش به این سمت افتاد که الان قراره توی این پست باهم پیش ببریمش
اول از همه راجب شکستگی متن ها میخایم صحبت کنیم یا همون text-wrap که اصولا خیلی اسون میتونه باشه براتون و یه همچین لیست کوتاهی از کلاس هارو سمت تیلویند برای استفاده ازش داریم:
text-wrap
text-nowrap
text-balance
text-pretty
موضوع بعدی مربوط به مبحث فاصله 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
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
خب حالا اگه بخایم به حرف معلمای انشا گوش بدیم و شروع متن هامون که اول بند هستن با یکم فاصله باشه، نیاز به یسری کلاس داریم تا بیایم اون فاصله از شروع متن رو اعمال کنیم:
indent-0.5
indent-1
...
indent-96
با این کلاس و اندازه ها شما هرطوری خاستین فاصله بدین
text-center
text-start
text-end
#tailwind #tailwind_7
Please open Telegram to view this post
VIEW IN TELEGRAM
⚡10🔥3❤🔥2
خب اول از همه باید بگم ما وقتی از تیلویند استفاده میکنیم دیگه نیاز نیست پاشیم بریم برای افکت های 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>
<div class="before::text-xl after:border"></div>
یه وقتایی هم پیش میاد که بخایم بگیم اره اگه فلان المنت راست چین یا چپ چین بود ( همون direction ) یسری استایل های متفاوت بگیره:
<div class="rtl:text-2xl ltr:bg-green-200"></div>
خب تا اینجا که هم اسون بود هم جذاب و منم فقط لیست کردم واستون
اما میخایم حالا راجب یه کار خفن دیگه صحبت کنیم باهم
شما اول از همه میاین یه گروه تشکیل میدین با استفاده از کلاس 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>
ما این مورد رو فقط برای hover نداریم، برای focus و active و حتی odd و even هم داریمش فقط متنش عوض میشه و کاربردش که بلدین
این مبحث سلکتور ها خیلی خیلی طولانیه و اگر وقت شد در آینده باز هم دربارش توضیح میدیم
#tailwind #tailwind_8
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥11⚡2❤🔥2
توی این مسابقه قراره یه پروژه با Tailwind طراحی بشه و در آخر ببینیم کی از نظر Clean Code و ساختار کد بهتر کار کرده؟
به نظر شما برنده ی این مسابقه کیه ؟
#tailwind #event #cleancode
Please open Telegram to view this post
VIEW IN TELEGRAM
YouTube
کی بهتر کد میزنه ؟ | تورنومنت برنامه نویسی
درود رفقا , اینم از پارت اول “کی بهتر کد میزنه” امیدوارم دوست داشته باشید
چنل اسپانسر و داور مون ( آقا حمید عزیز )
https://t.me/hamidreza01
چنل کولی کد ( محمد حسین )
https://www.youtube.com/@coolycode
چنل کد اکسپلور ( رضا )
https://t.me/CodeExplore
چنل…
چنل اسپانسر و داور مون ( آقا حمید عزیز )
https://t.me/hamidreza01
چنل کولی کد ( محمد حسین )
https://www.youtube.com/@coolycode
چنل کد اکسپلور ( رضا )
https://t.me/CodeExplore
چنل…
⚡17🔥5❤🔥3😁1
حالا امروز میخام بیشتر عمیق بشیم توی این مبحث و جزئیات بیشتری رو پیش ببریم
ببینین اول از همه بزارین من مثال کدشو که از داک خود تیلویند اوردم نشونتون بدم:
<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}الان ما با این اسم حرکت به المنت خودمون یه اسم میدیم تا توی گروهی که ساختیم انتخابش کنیم و با اون اسم بهش دسترسی داشته باشیم
حالا پایین تر رو ببینین:
<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حالا ما اون اسم دهی که داخل گروه ها گفتیم رو اینجا هم داریم این مثال رو دقت کنین:
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
Please open Telegram to view this post
VIEW IN TELEGRAM
⚡10🔥3❤🔥2
توی این پست قصد داریم راجب flex و grid داخل تیلویند صحبت کنیم و خب شاید نشه توی یه پارت جمعش کرد
خب ما برای اینکه بخایم 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-row
flex-row-reverse
flex-col
flex-col-reverse
نکته بعدی راجب flex-wrap هستش که اینم خب توضیح خاصی نداره خداییش چی بگم لیستش خدمتتون:
flex-wrap
flex-wrap-reverse
flex-nowrap
flex-1 // 1 1 0%
flex-auto // 1 1 auto
flex-initial // 0 1 auto
flex-none // none
grow // flex-grow: 1;
grow-0 //flex-grow: 0;
از order-1 تا order-12 داریم ولی برای اولین و اخرین هم دوتا order-first و order-last هستن که کارمون رو راحت میکنن
اینم بگم دوستان اموزش تیلویند بر فرض این میره جلو که شما عزیزان Css رو بلدین و خب برای همین وقتی استایل هارو بلد باشین توضیح خاصی واقعا نمیتونم بدم چون خیلی از کلاس های تیلویند اصن با اسمشون معلومه چیکار میکنن
ادامه مباحث که درباره گرید هست بره برای پست بعدی خسته نشین
#tailwind #tailwind_10
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥11❤🔥3⚡1
بعد از اون دیگه خیلی راحت میتونیم ستون و ردیف هاشو تنظیم کنیم
داخل تیلویند به صورت پیش فرض از 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
و اما مبحث مهم آخر که هم برای فلکس هستش هم گرید، فاصله بین ایتم هاس که همون gap هستش
برای تنظیم gap، ما هم میتونیم از اندازه های تیلویند که قبلا یاد گرفتیم استفاده کنیم هم جهت محورش یعنی افقی یا عمودی یا هردو رو مشخص کنیم:
gap-1
gap-x-1
gap-y-1
#tailwind #tailwind_10
Please open Telegram to view this post
VIEW IN TELEGRAM
⚡8🔥3❤🔥1
حاشیه نریم و بریم لیست کلاس هارو ببینیم
برای اینکه z-index رو تنظیم کنیم ده تا ده تا طبقه بندی داریم براش و خب اینطوری داخل تیلویند هستش:
z-0
z-10
z-20
...
z-50
برای تنظیم visibility هم اینارو داریم:
visible
invisible //hidden
collapse
برای تنظیم overflow هم لیست زیر رو داریم:
overflow-auto
overflow-hidden
overflow-clip
overflow-visible
overflow-x-...
overflow-y-...
خب دوستان عزیز این پست برای این بود که یکم موارد متفرقه رو ببریم جلو، از پست های بعد قراره وارد مباحث جزئی تر بشیم
شماهم خودتون این صفحه رو نگاه کنین جالبه برای دیسپلی ها:
#tailwind #tailwind_11
Please open Telegram to view this post
VIEW IN TELEGRAM
Tailwindcss
display - Layout
Utilities for controlling the display box type of an element.
⚡14❤🔥4🔥1
ببینین ما تا الان یسری کلاس هایی رو باهم کار کردیم که خب خیلی نیازهامون رفع میشه ولی هنوز کلی کار هست که نمیتونیم انجام بدیم!
بحث امروز رسپونسیو کردن با استفاده از تیلویند هست و میخایم بریک پوینت هاشو یاد بگیریم و استفاده کنیم
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
Please open Telegram to view this post
VIEW IN TELEGRAM
❤🔥15🔥2⚡1
چرا مهم ترین؟ چون امروز میخایم راجب کانفیگ کردن تیلویند صحبت کنیم و یادبگیریم چطور مواردی که میخایم و داخل تیلویند به صورت دیفالت وجود نداره رو اضافه کنیم
درحالت عادی و خالی، فایل شما به این صورته:
/** @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 هم مثل همه و محدودیتی ندارین
class="text-primary bg-primary"
#tailwind #tailwind_13
Please open Telegram to view this post
VIEW IN TELEGRAM
⚡16❤🔥3🔥2
سلام خوش اومدین به یه آموزش دیگه از تیلویند 🔥
تو مباحث قبلی ما درباره کانفیگ کردن تیلویند صحبت کردیم و خب برای بحث کانفیگ کردن فونت ها امروز قراره این پست کوتاه رو ببینیم⚡️
خب اول از همه شما نیاز به ادرس فونت یا فایلش دارین، بعد از اون خب داخل نصب تیلویند یه فایل css داریم که لایه های تیلویند رو اضافه کردیم داخلش
مثلا فایل main.css که داخلش این موارد هست هرچند توی نصب تیلویند تو همون مباحث اولیه گفتیم:
🟢 خب حالا ما میتونیم اینجا به لایه های مختلف تیلویند یسری چیزارو اضافه کنیم، اگر قرار باشه فونت اضافه کنیم باید داخل لایه base باشه چون که مربوط به چیزای ریشه‌ای میشه.
این کارو میکنیم:
حالا داخل فایل tailwind.config.ts میایم و فونتمون رو اضافه میکنیم:
💡 تبریک میگم فونت شما اضافه شد به تیلویند
استفادش:
#tailwind #tailwind_14
☕️ @CodeExplore
تو مباحث قبلی ما درباره کانفیگ کردن تیلویند صحبت کردیم و خب برای بحث کانفیگ کردن فونت ها امروز قراره این پست کوتاه رو ببینیم
خب اول از همه شما نیاز به ادرس فونت یا فایلش دارین، بعد از اون خب داخل نصب تیلویند یه فایل css داریم که لایه های تیلویند رو اضافه کردیم داخلش
مثلا فایل main.css که داخلش این موارد هست هرچند توی نصب تیلویند تو همون مباحث اولیه گفتیم:
@tailwind base;
@tailwind components;
@tailwind utilities;
این کارو میکنیم:
@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
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥12❤🔥2⚡2
خوش اومدین به یه قسمت دیگه از آموزش TailwindCss ☄️
🗣️ برای امروز مبحث خاصی نداریم و میخایم چند تا چیز مختلف رو از تیلویند بررسی کنیم.
💡 اولین چیزی که مد نظرمونه یه سینتکس قشنگ برای کاستوم کردن کلاس هاس یا شرایطی که بخاین استایل هارو جای دیگه بزنین یا کامپوننتون رو درست کنین
ما داخل تیلویند یه چیزی داریم به اسم apply@ که میتونین داخل css و نه داخل html استایل های تیلویند رو اعمال کنین
یه مثال:
الان اینجا ما اومدیم داخل استایل های تگی که کلاس المنت داره یه استایل دیفالت css رو کنار استایل های تتیلویند زدیم و حله
خیلی وقت ها نیاز داریم فیلتر های css رو روی المنت هامون اعمال کنیم و کلی کلاس هست که یسریاشو مثال میزنیم:
برای اعمال ترنسفورم به امنت هم این سری استایل هارو داریم:
#tailwind #tailwind_15
☕️ @CodeExplore
ما داخل تیلویند یه چیزی داریم به اسم 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
Please open Telegram to view this post
VIEW IN TELEGRAM
⚡9🔥4❤🔥3
خب بچه ها یسری چیزای جالب ازش بگم و تمومش کنیم:
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"
داخل این قسمت خب ما میدونیم که باید به صورت دیفالت، رنگی که ازش شروع میشه، درصدش، رنگ بعدی و درصدش و رنگ اخری و درصدش رو کامل مشخص کنیم، حالا داخل تیلویند اینطوری راحت میتونین بک گراند گرادینت ست کنین:
اول کلاس هارو ببینیم
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
Please open Telegram to view this post
VIEW IN TELEGRAM
⚡13❤🔥4🔥3
#tailwind #event
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥22❤🔥6⚡4
توی این سایت میتونید به کلی از انیمیشن های جذاب و باحال که با Tailwind CSS پیاده شدن دسترسی داشته باشید🔥
روی هر آیتم هاور کنی انیمیشن مربوط بهش نمایش داده میشه و از سمت راست بالای هر انیمیشن یا با کلیک روی اون میتونی کپی و استفادش کنی✅
⚠️ اگر براتون باز نشد با VPN سایت رو باز کنید.
https://tailwindcss-animations.vercel.app
#tailwind #css #animations
☕️Telegram | Website | Discord
روی هر آیتم هاور کنی انیمیشن مربوط بهش نمایش داده میشه و از سمت راست بالای هر انیمیشن یا با کلیک روی اون میتونی کپی و استفادش کنی✅
⚠️ اگر براتون باز نشد با VPN سایت رو باز کنید.
https://tailwindcss-animations.vercel.app
#tailwind #css #animations
☕️Telegram | Website | Discord
1❤🔥10🔥2⚡1