Створюйте власні компоненти React з Tailwind CSS. Створюйте кнопки, поля введення, текстові області, випадаючі списки та хлібні крихти з реальним часом попереднього перегляду та згенерованим кодом, готовим до використання у ваших проектах.
Створюйте компоненти React з Tailwind CSS та переглядайте живий попередній перегляд
<button className="text-white bg-blue-500 py-2 px-4 m-0 border border-transparent rounded text-base font-medium hover:bg-opacity-90 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 cursor-pointer" > Button </button>
Конструктор компонентів React Tailwind - це потужний візуальний редактор, який допомагає вам миттєво створювати власні React-компоненти з Tailwind CSS. Цей безкоштовний онлайн-конструктор компонентів React Tailwind дозволяє розробникам та дизайнерам створювати, налаштовувати та експортувати готові до виробництва UI-компоненти без ручного написання CSS-коду. Завдяки нашому конструктору React Tailwind з живим переглядом ви можете бачити зміни в реальному часі під час проектування кнопок, форм, введення тексту та компонентів навігації з використанням утилітарного CSS-фреймворку Tailwind.
Наш конструктор компонентів React Tailwind підтримує створення основних UI-елементів, включаючи кнопки, текстові введення, текстові області, випадаючі списки та навігаційні хлібні крихти. Кожен React-компонент можна повністю налаштувати за допомогою класів утиліт Tailwind CSS для кольорів, відступів, типографіки, меж та адаптивного дизайну - все з миттєвим живим переглядом, який динамічно оновлюється під час зміни властивостей. Ідеально підходить для швидкого прототипування та розробки компонентів.
Почніть з вибору типу компонента, який ви хочете створити з доступних варіантів:
Кожен тип компонента має власний набір налаштовуваних властивостей, які з'являться на панелі властивостей.
Після вибору типу компонента ви можете налаштувати його зовнішній вигляд і поведінку за допомогою панелі властивостей. Загальні властивості включають:
Для конкретних типів компонентів доступні додаткові властивості:
Під час налаштування властивостей живий перегляд оновлюється в реальному часі, показуючи точно, як буде виглядати ваш компонент. Ви також можете:
Коли ви будете задоволені своїм компонентом, інструмент автоматично генерує відповідний React-код з класами Tailwind CSS. Ви можете:
Кнопки - це основні UI-елементи для взаємодії користувачів. За допомогою нашого конструктора ви можете створювати різні стилі кнопок:
Ключові параметри налаштування:
Приклад згенерованого коду:
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">Параметр 1</option>
6 <option value="option2">Параметр 2</option>
7 <option value="option3">Параметр 3</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 надає всеосяжну палітру кольорів. Деякі приклади:
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} (Відкрийте більше інструментів, які можуть бути корисними для вашого робочого процесу