Создавайте пользовательские компоненты 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} (например, h-10, h-auto)Стилизуйте различные состояния с помощью:
hover:{property} (например, `hover:bg-blue-600Откройте больше инструментов, которые могут быть полезны для вашего рабочего процесса