سازنده کامپوننت React Tailwind با پیش‌نمایش زنده

مقدمه

سازنده کامپوننت React Tailwind ابزاری قدرتمند و کاربرپسند است که به توسعه‌دهندگان این امکان را می‌دهد تا به‌صورت بصری کامپوننت‌های React را با استفاده از کلاس‌های Tailwind CSS ایجاد و سفارشی‌سازی کنند. چه در حال پروتوتایپ کردن یک رابط کاربری جدید باشید، چه در حال یادگیری Tailwind CSS، یا به سادگی نیاز به تولید سریع کد کامپوننت داشته باشید، این سازنده تعاملی پیش‌نمایش‌های زنده را ارائه می‌دهد و کد تمیز و آماده برای تولید را تولید می‌کند. با ترکیب انعطاف‌پذیری React با رویکرد مبتنی بر ابزار Tailwind CSS، می‌توانید به سرعت کامپوننت‌های زیبای واکنش‌گرا را بدون نوشتن CSS از ابتدا بسازید.

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

ویژگی‌های کلیدی

• انواع مختلف کامپوننت: ایجاد دکمه‌ها، ورودی‌های متنی، نواحی متنی، منوهای انتخاب و ناوبری نان‌خود
• پیش‌نمایش زنده: مشاهده به‌روزرسانی کامپوننت‌ها در زمان واقعی به محض اصلاح ویژگی‌ها
• آزمایش پاسخگو: پیش‌نمایش کامپوننت‌های خود در نماهای موبایل، تبلت و دسکتاپ
• تصویرسازی وضعیت: آزمایش اینکه کامپوننت‌های شما در وضعیت‌های مختلف (عادی، هاور، فوکوس، فعال) چگونه به نظر می‌رسند
• تولید کد: دریافت کد React تمیز و آماده استفاده با کلاس‌های Tailwind CSS
• کپی به کلیپ‌بورد: به راحتی کد تولید شده را با یک کلیک کپی کنید
• بدون وابستگی: کاملاً در مرورگر کار می‌کند و نیازی به تماس با API خارجی یا الزامات پشتیبان ندارد

نحوه استفاده از سازنده کامپوننت

مرحله ۱: انتخاب نوع کامپوننت

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

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

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

مرحله ۲: سفارشی‌سازی ویژگی‌های کامپوننت

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

• محتوای متنی: تنظیم متن نمایش داده شده روی دکمه‌ها یا متن جایگزین برای ورودی‌ها
• رنگ‌ها: انتخاب رنگ‌های متن و پس‌زمینه از پالت رنگ Tailwind
• پدینگ: تنظیم فاصله داخلی کامپوننت
• مارژین: تنظیم فاصله خارجی اطراف کامپوننت
• مرز: افزودن مرزها با سبک‌ها، عرض‌ها و رنگ‌های مختلف
• شکل‌گیری مرز: گرد کردن گوشه‌های کامپوننت
• عرض: تنظیم عرض کامپوننت (خودکار، کامل یا مبتنی بر درصد)
• تایپوگرافی: تنظیم اندازه، وزن و سایر ویژگی‌های متنی

برای انواع خاص کامپوننت، ویژگی‌های اضافی در دسترس است:

• ورودی متنی/نواحی متنی: تنظیم متن جایگزین، وضعیت الزامی و حالت غیرفعال
• نواحی متنی: تنظیم تعداد ردیف‌ها
• انتخاب: افزودن، ویرایش یا حذف گزینه‌ها
• نان‌خود: پیکربندی موارد و لینک‌های ناوبری

مرحله ۳: پیش‌نمایش کامپوننت خود

به محض اینکه ویژگی‌ها را تنظیم کردید، پیش‌نمایش زنده در زمان واقعی به‌روزرسانی می‌شود و نشان می‌دهد که کامپوننت شما چگونه به نظر می‌رسد. همچنین می‌توانید:

• آزمایش رفتار پاسخگو: بین نماهای موبایل، تبلت و دسکتاپ جابجا شوید تا اطمینان حاصل کنید که کامپوننت شما در تمام اندازه‌های صفحه خوب به نظر می‌رسد
• بررسی وضعیت‌های مختلف: ببینید کامپوننت شما در وضعیت‌های عادی، هاور، فوکوس و فعال چگونه به نظر می‌رسد

مرحله ۴: دریافت کد

پس از اینکه از کامپوننت خود راضی بودید، ابزار به‌طور خودکار کد مربوط به React را با کلاس‌های Tailwind CSS تولید می‌کند. شما می‌توانید:

• بررسی کد تولید شده: مشاهده کد JSX دقیق React با تمام کلاس‌های اعمال شده Tailwind
• کپی به کلیپ‌بورد: روی دکمه "کپی کد" کلیک کنید تا کد را به کلیپ‌بورد خود کپی کنید
• استفاده در پروژه خود: کد را مستقیماً در پروژه React خود بچسبانید

انواع کامپوننت‌ها به تفصیل

دکمه‌ها

دکمه‌ها عناصر اساسی رابط کاربری برای تعامل کاربران هستند. با سازنده ما، می‌توانید سبک‌های مختلف دکمه را ایجاد کنید:

• دکمه‌های اقدام اولیه
• دکمه‌های ثانویه یا حاشیه‌دار
• دکمه‌های آیکونی
• دکمه‌های تمام‌عرض
• دکمه‌های غیرفعال

گزینه‌های سفارشی‌سازی کلیدی:

• محتوای متنی
• رنگ‌های پس‌زمینه و متن
• پدینگ و مارژین
• مرز و شکل‌گیری مرز
• عرض و ارتفاع
• اندازه و وزن فونت
• وضعیت‌های هاور، فوکوس و فعال

کد تولید شده مثال:

1<button 
2  className="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 focus:ring-2 focus:ring-blue-300 focus:outline-none"
3>
4  ارسال
5</button>
6

ورودی‌های متنی

ورودی‌های متنی به کاربران اجازه می‌دهند تا متن یک‌خطی را در فرم‌ها وارد کنند. سازنده ما به شما کمک می‌کند تا ورودی‌هایی را ایجاد کنید که با سیستم طراحی شما مطابقت داشته باشد:

گزینه‌های سفارشی‌سازی کلیدی:

• متن جایگزین
• سبک‌ها و رنگ‌های مرز
• پدینگ و عرض
• وضعیت الزامی و غیرفعال
• سبک‌های فوکوس

کد تولید شده مثال:

1<input
2  type="text"
3  className="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
4  placeholder="نام خود را وارد کنید"
5  required
6/>
7

نواحی متنی

نواحی متنی برای ورودی متن چندخطی، مانند نظرات یا توضیحات استفاده می‌شوند:

گزینه‌های سفارشی‌سازی کلیدی:

• تعداد ردیف‌ها
• متن جایگزین
• رفتار تغییر اندازه
• مرز و پدینگ
• وضعیت الزامی و غیرفعال

کد تولید شده مثال:

1<textarea
2  className="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
3  placeholder="پیام خود را وارد کنید"
4  rows={4}
5></textarea>
6

منوهای کشویی انتخاب

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

گزینه‌های سفارشی‌سازی کلیدی:

• موارد گزینه (متن و مقدار)
• مرز و پدینگ
• عرض و ظاهر
• وضعیت الزامی و غیرفعال

کد تولید شده مثال:

1<select
2  className="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
3  required
4>
5  <option value="option1">گزینه ۱</option>
6  <option value="option2">گزینه ۲</option>
7  <option value="option3">گزینه ۳</option>
8</select>
9

ناوبری نان‌خود

نان‌خودها به کاربران کمک می‌کنند تا مکان خود را در سلسله‌مراتب یک وب‌سایت درک کنند:

گزینه‌های سفارشی‌سازی کلیدی:

• موارد ناوبری و لینک‌ها
• سبک جداکننده
• رنگ‌های متن و هاور
• فاصله بین موارد

کد تولید شده مثال:

1<nav className="flex" aria-label="Breadcrumb">
2  <ol className="flex space-x-2 text-gray-700">
3    <li className="flex items-center">
4      <a href="/" className="hover:text-blue-600">خانه</a>
5    </li>
6    <li className="flex items-center">
7      <span className="mx-2 text-gray-400">/</span>
8      <a href="/products" className="hover:text-blue-600">محصولات</a>
9    </li>
10    <li className="flex items-center">
11      <span className="mx-2 text-gray-400">/</span>
12      <a href="/products/category" className="hover:text-blue-600">دسته‌بندی</a>
13    </li>
14  </ol>
15</nav>
16

ویژگی‌های Tailwind CSS توضیح داده شده

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

رنگ‌ها

Tailwind یک پالت رنگ جامع ارائه می‌دهد. برخی مثال‌ها:

• رنگ‌های متن: text-{color}-{shade} (مثلاً text-blue-500، text-red-600)
• رنگ‌های پس‌زمینه: bg-{color}-{shade} (مثلاً bg-green-500، bg-gray-100)
• رنگ‌های مرز: border-{color}-{shade} (مثلاً border-gray-300)

فاصله‌ها

کنترل پدینگ و مارژین با این کلاس‌ها:

• پدینگ: p-{size}، px-{size}، py-{size} (مثلاً p-4، px-3 py-2)
• مارژین: m-{size}، mx-{size}، my-{size} (مثلاً m-2، mx-auto)

تایپوگرافی

تنظیم ظاهر متن با:

• اندازه فونت: text-{size} (مثلاً text-sm، text-lg)
• وزن فونت: font-{weight} (مثلاً font-bold، font-medium)
• چیدمان متن: text-{alignment} (مثلاً text-center، text-right)

مرزها

سفارشی‌سازی مرزها با:

• عرض مرز: border، border-{width} (مثلاً border-2)
• شکل‌گیری مرز: rounded، rounded-{size} (مثلاً rounded-md، rounded-full)

عرض و ارتفاع

تنظیم ابعاد با:

• عرض: w-{size} (مثلاً w-full، w-1/2)
• ارتفاع: h-{size} (مثلاً h-10، h-auto)

وضعیت‌های تعاملی

استایل‌دهی به وضعیت‌های مختلف با:

• هاور: hover:{property} (مثلاً hover:bg-blue-600)
• فوکوس: focus:{property} (مثلاً focus:ring-2)
• فعال: active:{property} (مثلاً active:bg-blue-700)
• غیرفعال: disabled:{property} (مثلاً disabled:opacity-50)

موارد استفاده

۱. پروتوتایپ سریع

سازنده کامپوننت React Tailwind برای پروتوتایپ سریع کامپوننت‌های رابط کاربری قبل از پیاده‌سازی در کد واقعی شما عالی است. این می‌تواند زمان توسعه قابل توجهی را با اجازه دادن به طراحان و توسعه‌دهندگان برای آزمایش سبک‌ها و پیکربندی‌های مختلف بدون نوشتن کد از ابتدا صرفه‌جویی کند.

جریان کار مثال:

1. از سازنده کامپوننت برای طراحی یک سیستم دکمه استفاده کنید
2. با رنگ‌ها، اندازه‌ها و وضعیت‌های مختلف آزمایش کنید
3. پس از راضی شدن، کد تولید شده را کپی کنید
4. در پروژه React خود پیاده‌سازی کنید

۲. یادگیری Tailwind CSS

برای توسعه‌دهندگانی که تازه با Tailwind CSS آشنا شده‌اند، این ابزار به‌عنوان یک منبع یادگیری عالی عمل می‌کند. با تنظیم ویژگی‌ها و مشاهده تغییرات در زمان واقعی، می‌توانید درک بهتری از نحوه کار کلاس‌های ابزاری Tailwind در کنار هم برای ایجاد طراحی‌های هماهنگ پیدا کنید.

مزایای یادگیری:

• تجسم اثر کلاس‌های مختلف Tailwind
• درک ترکیب کلاس‌ها برای الگوهای رایج رابط کاربری
• یادگیری بهترین شیوه‌ها برای سازمان‌دهی کلاس‌های Tailwind

۳. توسعه سیستم طراحی

هنگام ایجاد یک سیستم طراحی برای پروژه یا سازمان خود، سازنده کامپوننت می‌تواند به ایجاد سبک‌های کامپوننت سازگار که با راهنمایی‌های برند شما مطابقت دارند کمک کند.

فرایند:

1. پالت رنگ و تایپوگرافی خود را تعریف کنید
2. کامپوننت‌های پایه برای هر نوع (دکمه‌ها، ورودی‌ها و غیره) ایجاد کنید
3. کد تولید شده را برای تیم خود مستند کنید
4. اطمینان حاصل کنید که در سراسر برنامه شما سازگاری وجود دارد

۴. ارائه به مشتریان

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

رویکرد ارائه:

1. چندین واریانت کامپوننت را آماده کنید
2. پیش‌نمایش زنده را در جلسات مشتری نشان دهید
3. بر اساس بازخورد، تغییرات را در زمان واقعی ایجاد کنید
4. پس از تأیید نهایی، کد را صادر کنید

گزینه‌های دیگر

در حالی که سازنده کامپوننت React Tailwind ما تجربه‌ای ساده برای ایجاد کامپوننت‌های فردی ارائه می‌دهد، ابزارهای دیگری وجود دارند که ممکن است بسته به نیازهای شما در نظر گرفته شوند:

1. Tailwind UI: یک کتابخانه کامپوننت پریمیوم با کامپوننت‌های از پیش ساخته شده. بر خلاف ابزار رایگان ما، Tailwind UI کامپوننت‌های کامل و حرفه‌ای طراحی شده را ارائه می‌دهد اما نیاز به خرید دارد.

2. Headless UI: برای کامپوننت‌های تعاملی پیچیده‌تر با منطق دسترسی و رفتار داخلی. ابزار ما بر روی استایل‌دهی بصری تمرکز دارد نه تعاملات پیچیده.

3. Tailwind CSS Playground: زمین بازی رسمی Tailwind که به شما اجازه می‌دهد با صفحات HTML کامل آزمایش کنید نه کامپوننت‌های فردی.

4. Figma/Sketch + افزونه‌ها: ابزارهای طراحی با افزونه‌های Tailwind که می‌توانند برای طراحی بصری استفاده شوند اما مانند ابزار ما کد React تولید نمی‌کنند.

ملاحظات فنی

سازگاری مرورگر

سازنده کامپوننت React Tailwind در تمام مرورگرهای مدرن کار می‌کند، از جمله:

• Chrome (نسخه ۶۰+)
• Firefox (نسخه ۵۵+)
• Safari (نسخه ۱۱+)
• Edge (نسخه ۷۹+)

برای بهترین تجربه، توصیه می‌کنیم از آخرین نسخه مرورگر مورد نظر خود استفاده کنید.

بهینه‌سازی عملکرد

هنگام استفاده از کامپوننت‌های تولید شده در تولید، نکات زیر را در نظر بگیرید:

1. پالایش سبک‌های غیر استفاده: از گزینه پالایش Tailwind در تولید برای حذف CSS غیر استفاده استفاده کنید
2. استخراج کامپوننت: برای کامپوننت‌های تکراری، کامپوننت‌های قابل استفاده مجدد React ایجاد کنید به جای تکرار JSX
3. سازمان‌دهی کلاس‌ها: گروه‌بندی کلاس‌های مرتبط Tailwind برای بهبود نگهداری کد

ملاحظات دسترسی

سازنده ما بهترین شیوه‌های دسترسی را تشویق می‌کند:

• ورودی‌های متنی و نواحی متنی شامل برچسب‌گذاری مناسب هستند
• دکمه‌ها نسبت‌های کنتراست مناسب دارند
• وضعیت‌های فوکوس به وضوح قابل مشاهده هستند
• نان‌خودها شامل برچسب‌های ARIA هستند

با این حال، همیشه باید پیاده‌سازی نهایی خود را با خوانندگان صفحه و ناوبری صفحه کلید آزمایش کنید تا اطمینان حاصل کنید که کاملاً با الزامات دسترسی مطابقت دارد.

سوالات متداول

آیا می‌توانم کامپوننت‌های ایجاد شده خود را برای استفاده بعدی ذخیره کنم؟

در حال حاضر، ابزار شامل ویژگی ذخیره‌سازی نیست. با این حال، می‌توانید کد تولید شده را کپی کرده و در فایل‌های خود ذخیره کنید. برای استفاده مکرر، در نظر بگیرید که یک کتابخانه کامپوننت در پروژه خود ایجاد کنید.

آیا ابزار کد TypeScript تولید می‌کند؟

نسخه فعلی کد JavaScript React تولید می‌کند. برای TypeScript، باید تعریف‌های نوع را به‌صورت دستی اضافه کنید. ما در نظر داریم که پشتیبانی TypeScript را در به‌روزرسانی‌های آینده اضافه کنیم.

آیا می‌توانم کامپوننت‌های پاسخگو ایجاد کنم؟

بله! ابزار به شما اجازه می‌دهد تا کامپوننت‌های خود را در اندازه‌های مختلف صفحه (موبایل، تبلت، دسکتاپ) پیش‌نمایش کنید و شامل کلاس‌های ابزاری پاسخگو Tailwind است. می‌توانید از ویژگی پیش‌نمایش پاسخگو برای اطمینان از اینکه کامپوننت‌های شما در تمام دستگاه‌ها خوب به نظر می‌رسند استفاده کنید.

چگونه می‌توانم رنگ‌های سفارشی که در پالت Tailwind نیستند را اضافه کنم؟

در حالی که ابزار از پالت رنگ پیش‌فرض Tailwind استفاده می‌کند، می‌توانید رنگ‌ها را در پروژه خود با گسترش پیکربندی Tailwind سفارشی کنید. کد تولید شده در صورت پیروی از نام‌گذاری کلاس‌های Tailwind با رنگ‌های سفارشی شما کار خواهد کرد.

آیا می‌توانم واریانت‌های حالت تاریک کامپوننت‌های خود را ایجاد کنم؟

نسخه فعلی به‌طور خاص به حالت تاریک هدف‌گذاری نمی‌کند. با این حال، می‌توانید از کد تولید شده به‌عنوان نقطه شروع استفاده کنید و کلاس‌های حالت تاریک Tailwind (dark:) را در پروژه خود اضافه کنید.

آیا کامپوننت‌های تولید شده قابل دسترسی هستند؟

ابزار بهترین شیوه‌های دسترسی را تشویق می‌کند، اما شما باید همیشه پیاده‌سازی نهایی خود را برای انطباق با الزامات دسترسی آزمایش کنید. به‌ویژه به کنتراست رنگ، ناوبری صفحه کلید و سازگاری با خوانندگان صفحه توجه کنید.

آیا می‌توانم از این ابزار با Next.js یا Gatsby استفاده کنم؟

بله! کامپوننت‌های تولید شده مستقل از فریم‌ورک هستند و با هر فریم‌ورک مبتنی بر React، از جمله Next.js، Gatsby، Create React App و دیگران کار خواهند کرد.

چگونه می‌توانم آیکون‌ها را به کامپوننت‌های خود اضافه کنم؟

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

آیا این ابزار رایگان است؟

بله، سازنده کامپوننت React Tailwind کاملاً رایگان است و نیازی به حساب کاربری ندارد.

آیا می‌توانم در بهبود این ابزار مشارکت کنم؟

ما از مشارکت‌ها استقبال می‌کنیم! برای اطلاعات در مورد نحوه مشارکت در توسعه این ابزار، به مخزن GitHub ما مراجعه کنید.

نتیجه‌گیری

سازنده کامپوننت React Tailwind با پیش‌نمایش زنده یک راه قدرتمند و ساده برای ایجاد کامپوننت‌های زیبای سفارشی بدون نوشتن CSS از ابتدا ارائه می‌دهد. با ترکیب انعطاف‌پذیری React با رویکرد مبتنی بر ابزار Tailwind CSS، می‌توانید به سرعت کامپوننت‌هایی را پروتوتایپ و بسازید که با نیازهای طراحی دقیق شما مطابقت دارند.

شروع به آزمایش با انواع مختلف کامپوننت‌ها کنید، ویژگی‌های آن‌ها را سفارشی‌سازی کنید و تغییرات را در زمان واقعی مشاهده کنید. زمانی که از طراحی خود راضی بودید، به سادگی کد تولید شده را کپی کرده و آن را در پروژه React خود ادغام کنید. چه شما یک توسعه‌دهنده با تجربه باشید یا تازه با React و Tailwind شروع کرده باشید، این ابزار به شما کمک می‌کند تا فرآیند توسعه UI خود را تسریع کنید.

آماده‌اید تا اولین کامپوننت خود را بسازید؟ از گزینه‌های بالا یک نوع کامپوننت انتخاب کنید و شروع به سفارشی‌سازی کنید!