چجوری توی تیلویند کامپوننت ایجاد کنیم؟

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

برای ایجاد کامپوننت توی تیلویند سی اس اس به سند input.css باید بریم و اونجا کامپوننت های خودمون رو بزاریم
حالا چجوری ؟
ما باید با کد زیر مشخص کنیم که میخوایم کامپوننت ایجاد کنیم:

@layer  components {}

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

@layer  components {
 .btn{
   display:flex;
   justify-content: center;
   align-items: center;
}
}

با سی اس اس خام مثل مثال بالا میتونید استایلتون رو بدید و کلاس btn رو به سکشن یا دکمتون بدید
اگر میخواید استایل هاتون رو توی کامپوننت هم بصورت تیلویند باشه باید با

@apply

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

@layer  components {
 .btn{
@apply flex justify-center items-center;
}
}

میتونید مثل کد بالا استایلتون رو بصورت تیلویند تعریف کنید.
اگ کاربردی بود براتون لایک کنید حتمی
باتشکر.

< @undefinedee />

گزارش جدید Anthropic درباره سوءاستفاده از Claude منتشر شده و بخش مربوط به ایرانش خیلی جالبه:

چند نهاد حکومتی ایران از Claude برای «جنگ شناختی» و تبلیغات استفاده کردن؛ از طراحی عملیات و ساخت پرسونای جعلی تا تولید محتوای چندزبانه.

حالا فهمدید چرا آنتروپیک حساب کلاد ایرانی‌هارو درجا می‌بست؟

🎨 ساخت شکل‌های جذاب با CSS و Clip-Path!
تا حالا خواستی یک عکس یا المان رو به شکل مثلث، ستاره، چندضلعی یا حتی شکل‌های خاص نمایش بدی؟ 🤩

اینجاست که clip-path وارد میشه!
🔹 با clip-path می‌تونیم قسمت مشخصی از یک عنصر رو نمایش بدیم و بقیه قسمت‌ها رو برش بزنیم.
مثلاً:

.box {
  width: 200px;
  height: 200px;
  background: dodgerblue;

  clip-path: polygon(
    50% 0%,
    100% 100%,
    0% 100%
  );
}

📌 کد بالا یک عنصر مربعی رو به شکل مثلث درمیاره. 🔺
چند مقدار پرکاربرد:
🔸 circle() → دایره

🔸 ellipse() → بیضی

🔸 polygon() → چندضلعی

🔸 inset() → برش از داخل
💡 نکته: clip-path برای طراحی کارت‌ها، تصاویر، بنرها و افکت‌های مدرن سایت خیلی کاربردیه.

روز برنامه نویس مبارک باشه❤️

برای نصب Font Awesome با استفاده از npm، می‌توانید مراحل زیر را دنبال کنید:

▎1. نصب npm

مطمئن شوید که Node.js و npm بر روی سیستم شما نصب شده‌اند. اگر Node.js را نصب کرده‌اید، npm به‌طور خودکار نصب می‌شود.

▎2. ایجاد پروژه جدید (اختیاری)

اگر هنوز یک پروژه جدید ندارید، می‌توانید با استفاده از دستورات زیر یک پروژه جدید ایجاد کنید:

mkdir my-project
cd my-project
npm init -y

▎3. نصب Font Awesome

برای نصب Font Awesome، دستور زیر را در ترمینال اجرا کنید:

npm install --save @fortawesome/fontawesome-free

▎4. استفاده از Font Awesome در پروژه

پس از نصب، شما باید فایل‌های CSS و JS مربوط به Font Awesome را در پروژه خود وارد کنید. برای این کار، می‌توانید به فایل CSS خود (مثلاً style.css) و یا به HTML خود (مثلاً index.html) لینک دهید.

▎روش اول: استفاده در HTML

در فایل HTML خود، قبل از تگ </head>، لینک CSS و JS را اضافه کنید:

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/all.min.css">
    <title>Font Awesome Example</title>
</head>
<body>
    <h1>مثال آیکون Font Awesome</h1>
    <i class="fas fa-camera"></i> <!-- آیکون دوربین -->
</body>
</html>

▎روش دوم: استفاده در CSS

اگر می‌خواهید از Font Awesome در CSS استفاده کنید، می‌توانید به صورت زیر عمل کنید:

@import '~@fortawesome/fontawesome-free/css/all.min.css';

▎5. استفاده از آیکون‌ها

حالا شما می‌توانید از آیکون‌های Font Awesome در HTML خود استفاده کنید. به عنوان مثال:

<i class="fas fa-user"></i> <!-- آیکون کاربر -->
<i class="fab fa-github"></i> <!-- آیکون گیت‌هاب -->

با دنبال کردن این مراحل، شما می‌توانید Font Awesome را به پروژه خود اضافه کرده و از آن استفاده کنید.

🔶 سایت Upload.am یک سرویس آپلود و دانلود ارمنستانی است که ۲۵ گیگابایت فضای رایگان در اختیار کاربران قرار می‌دهد.

همچنین، امکان خرید پلن ‌های آن با ارز های دیجیتال فراهم است؛ بنابراین کاربران ایرانی می‌توانند بدون دردسر و با استفاده از ارز دیجیتال، پلن خود را ارتقا دهند.

البته نسخه Free فقط فایل ها در ۳۰ روز نگه می دارد و بعد از آن حذف می شوند و اگر می خوای فایل ها حذف نشوند باید نسخه Keep رو خریداری کنید.

https://upload.am

#معرفی

سلام، خسته نباشید 🌱
یه نکته‌ی کوچیک راجع به Tailwind CSS می‌خواستم بگم که شاید به کارتون بیاد.

توی طراحی معمولاً برای هر سکشن یا بخشی که می‌خوایم پیاده‌سازی کنیم، یه Width، Height و... مشخص شده که معمولاً بر اساس Pixel هست.

حالا برای تبدیل این مقدارها به مقادیر Tailwind، معمولاً می‌تونیم از مقادیر موجود توی داکیومنت خود Tailwind استفاده کنیم؛ ولی خب بعضی وقتا ممکنه داکیومنت برامون باز نشه، بهش دسترسی نداشته باشیم یا اصلاً حوصله‌ی باز کردنش رو نداشته باشیم 😄

اینجا یه راه خیلی ساده داریم 👇

مثلاً فرض کنید عرض سکشن ما 250px هست و می‌خوایم مقدار مناسبش رو برای Tailwind پیدا کنیم.

کافیه 250 رو تقسیم بر 4 کنیم:

250 ÷ 4 = 62.5

پس مقدار Tailwind ما میشه:

w-62.5

البته بسته به نیازتون می‌تونید مقدار رو گرد کنید و از "w-62" یا مقدار دقیق‌تر استفاده کنید.

🔸 دلیلش هم اینه که مقیاس پیش‌فرض Tailwind معمولاً بر اساس هر واحد = 0.25rem هست که در تنظیمات پیش‌فرض، معادل 4px در نظر گرفته میشه.

پس به‌صورت خلاصه:

Pixel ÷ 4 = مقدار Tailwind

مثلاً:

100px → 25
200px → 50
250px → 62.5
400px → 100

یه ترفند ساده‌ست، ولی وقتی زیاد با Tailwind کار کنید، خیلی به دردتون می‌خوره. 🚀

📌 حلقه‌ها در جاوااسکریپت؛ کدت رو چندباره کن بدون خستگی!

حلقه‌ها بهت اجازه میدن یه کار رو تکراری اجرا کنی. تو جاوااسکریپت چند نوع حلقه داریم که هرکدوم جایگاه خودشون رو دارن:



🔁 for کلاسیک
وقتی تعداد دفعات مشخصه:

for (let i = 0; i < 5; i++) {
  console.log(i); // 0 1 2 3 4
}

🔁 while
وقتی شرط نامشخصه و ممکنه اصلاً اجرا نشه:

let n = 3;
while (n > 0) {
  console.log(n--);
}

🔁 do...while
حداقل یک بار اجرا میشه، حتی اگر شرط غلط باشه:

let x = 10;
do {
  console.log(x);
} while (x < 5); // چاپ ۱۰

🔁 for...of (مدرن)
برای آرایه‌ها و اشیاء قابل تکرار (iterable):

const colors = ['red', 'green', 'blue'];
for (let c of colors) {
  console.log(c);
}

🔁 for...in
برای کلیدهای object (با احتیاط استفاده کن):

const user = {name: 'Ali', age: 25};
for (let key in user) {
  console.log(key, user[key]);
}

⚠️ نکته مهم:
از for...in روی آرایه استفاده نکن (ترتیب رو رعایت نمیکنه و خواص اضافی رو هم میاره). به جاش از for...of یا forEach استفاده کن.

✅ عملکرد:
حلقه‌های for و while سرعت بالایی دارن، ولی برای خوانایی کد، for...of و متدهای مدرن مثل map، filter رو ترجیح بده.