Перейти к содержимому
🛠️
Whiz Tools

Конструктор компонентов React Tailwind - Живой предпросмотр и Генератор кода

Бесплатный конструктор компонентов React Tailwind с живым предпросмотром. Создавайте кнопки, поля ввода, текстовые области, выпадающие списки и навигационные цепочки с Tailwind CSS. Мгновенный экспорт готового к производству React-кода.

Конструктор React-компонентов с Tailwind CSS

Создавайте React-компоненты с Tailwind CSS и смотрите живой предварительный просмотр

Тип компонента

Свойства

Адаптивный вид

Предварительный просмотр состояния

Живой предварительный просмотр

Сгенерированный код

jsx
<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 — это бесплатный браузерный инструмент, который создаёт компонент React, стилизованный с помощью Tailwind CSS. Пользователь выбирает тип компонента, например кнопку или текстовое поле, настраивает несколько параметров стиля, а инструмент показывает интерактивный предварительный просмотр рядом с соответствующим кодом JSX. Всё выполняется в браузере. Учётная запись и обращение к серверу не требуются.

Типы компонентов

Инструмент может создавать пять видов компонентов:

  • Кнопка — кнопка, по которой можно щёлкнуть, с произвольным текстом
  • Текстовое поле — однострочное поле формы с текстом-заполнителем
  • Многострочное текстовое поле — многострочное поле формы с заданным числом строк
  • Раскрывающийся список — список, созданный из набора вариантов
  • Хлебные крошки — ряд ссылок, показывающих расположение страницы на сайте, например Главная / Товары / Категория

Какие свойства можно изменять

К каждому типу компонента применяются пять свойств стиля:

  • Цвет текста — белый, чёрный, серый, синий, красный или зелёный
  • Цвет фона — отсутствует, белый, светло-серый, синий, красный или зелёный
  • Внутренний отступ — отсутствует, малый, средний, большой или значение по умолчанию для кнопки
  • Радиус границы — отсутствует, малый, средний, большой или полностью скруглённые углы
  • Ширина — автоматическая, полная, половина, одна треть или одна четверть

Некоторые свойства отображаются только для определённых типов компонентов: текст кнопки, текст-заполнитель текстового поля или многострочного текстового поля, число строк многострочного текстового поля, список вариантов раскрывающегося списка и список элементов хлебных крошек. Для текстовых полей, многострочных текстовых полей и раскрывающихся списков также есть флажки «обязательное» и «отключено»; у кнопок тоже есть флажок «отключено».

Четыре свойства зафиксированы и не могут быть изменены через интерфейс: внешний отступ (всегда m-0), стиль границы (всегда border border-transparent), размер шрифта (всегда text-base) и насыщенность шрифта (всегда font-medium). Каждый созданный компонент содержит эти четыре класса. Чтобы использовать другой внешний отступ, границу или размер шрифта, отредактируйте скопированный код вручную.

Как формируется список классов

Инструмент формирует строку классов Tailwind для каждого компонента в фиксированном порядке:

  1. Класс цвета текста, если цвет задан
  2. Класс цвета фона, если цвет задан
  3. Классы внутреннего отступа, внешнего отступа, границы и радиуса границы
  4. Класс ширины, если для ширины не задано значение «автоматическая»
  5. Зафиксированные классы размера и насыщенности шрифта
  6. Классы интерактивных состояний (при наведении, фокусе и нажатии), различающиеся в зависимости от типа компонента
  7. Классы отключённого состояния, если установлен флажок «отключено»

Кнопки получают hover:bg-opacity-90, focus:ring-2, focus:ring-offset-2 и focus:ring-blue-500. Неотключённая кнопка также получает cursor-pointer. Текстовые поля, многострочные текстовые поля и раскрывающиеся списки вместо этого получают focus:outline-none, focus:ring-2, focus:ring-blue-500 и focus:border-blue-500. Для хлебных крошек ни один из этих интерактивных классов не используется, а отключённое состояние к ним неприменимо, поскольку навигационный список нельзя отключить.

Пример: кнопка

При настройках по умолчанию (белый текст, синий фон 500, средний внутренний отступ и скруглённые углы) инструмент выдаёт:

1<button
2  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"
3>
4  Button
5</button>
6

Пример: текстовое поле

Для серого текста, белого фона, малого внутреннего отступа, большого радиуса границы, полной ширины и установленного флажка «обязательное»:

1<input
2  type="text"
3  className="text-gray-700 bg-white p-2 m-0 border border-transparent rounded-lg w-full text-base font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
4  placeholder="Enter your name"
5  required
6/>
7

Пример: многострочное текстовое поле и раскрывающийся список

Многострочные текстовые поля и раскрывающиеся списки формируются по тому же правилу, что и текстовые поля. Многострочное текстовое поле с чёрным текстом, средним внутренним отступом, средним скруглением, полной шириной и 4 строками:

1<textarea
2  className="text-black p-4 m-0 border border-transparent rounded w-full text-base font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
3  placeholder="Enter your message"
4  rows={4}
5></textarea>
6

Раскрывающийся список с теми же цветами и отступами, что и в приведённом выше примере текстового поля, и с тремя вариантами:

1<select
2  className="text-gray-700 bg-white p-2 m-0 border border-transparent rounded w-full text-base font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
3  required
4>
5  <option value="option1">Option 1</option>
6  <option value="option2">Option 2</option>
7  <option value="option3">Option 3</option>
8</select>
9

Пример: хлебные крошки

Ссылки и разделители хлебных крошек всегда используют зафиксированные классы (hover:text-blue-600 для ссылок, mx-2 text-gray-400 для разделителя «/»). Только внешний список получает пять общих свойств стиля. Для серого текста без внутреннего отступа и скругления:

1<nav className="flex" aria-label="Breadcrumb">
2  <ol className="text-gray-700 p-0 m-0 border border-transparent text-base font-medium flex space-x-2">
3  <li className="flex items-center">
4    <a href="/" className="hover:text-blue-600">Home</a>
5  </li>
6  <li className="flex items-center">
7    <span className="mx-2 text-gray-400">/</span>
8    <a href="/components" className="hover:text-blue-600">Components</a>
9  </li>
10  </ol>
11</nav>
12

Адаптивный предварительный просмотр и адаптивные классы

В инструменте есть элемент управления «Адаптивный вид» с тремя вариантами: мобильный, планшет и компьютер. Переключение между ними изменяет только ширину области предварительного просмотра, чтобы пользователь мог примерно увидеть, как компонент будет выглядеть на более узком экране. При этом в созданный код не добавляются префиксы контрольных точек Tailwind, такие как sm:, md:, lg: или xl:. Вывод JSX одинаков независимо от выбранного адаптивного вида. Если компонент должен выглядеть по-разному при разной ширине экрана, эти классы контрольных точек нужно добавить в скопированный код вручную.

Как добавить Tailwind CSS в проект React

  1. Установите пакеты: npm install -D tailwindcss postcss autoprefixer
  2. Настройте файлы конфигурации: npx tailwindcss init -p
  3. Укажите исходные файлы проекта в tailwind.config.js в разделе content
  4. Добавьте три директивы Tailwind в основной файл CSS: @tailwind base; @tailwind components; @tailwind utilities;
  5. Вставьте созданный компонент в файл React

Часто задаваемые вопросы

Что делает конструктор компонентов React Tailwind? Он создаёт стилизованный компонент React и соответствующие ему классы Tailwind CSS, а также показывает интерактивный предварительный просмотр во время настройки параметров.

Добавляет ли инструмент автоматически адаптивные классы контрольных точек, например sm: или md:? Нет. Элемент управления мобильным, планшетным и компьютерным видами только изменяет размер области предварительного просмотра. В экспортированном коде нет классов sm:, md:, lg: или xl:; при необходимости их нужно добавить вручную.

Можно ли изменить внешний отступ, стиль границы или размер шрифта? Не через интерфейс. Каждый созданный компонент использует одинаковые зафиксированные внешний отступ (m-0), границу (border border-transparent), размер шрифта (text-base) и насыщенность шрифта (font-medium). Измените их, отредактировав скопированный код напрямую.

Сохраняет ли инструмент мои компоненты? Нет. Функции сохранения нет. Скопируйте созданный код и сохраните его в собственных файлах проекта.

Создаёт ли он код TypeScript? Инструмент выдаёт JSX (синтаксис JavaScript). Результат представляет собой обычную разметку JSX, поэтому его можно без изменений вставить в файл .tsx, хотя определения типов не создаются.

Бесплатен ли инструмент? Да. Он полностью работает в браузере, без учётной записи и без отправки запросов на сервер.

Работает ли он с Next.js, Gatsby и другими фреймворками React? Да. Созданный код представляет собой обычный JSX с классами Tailwind, поэтому он работает в любом фреймворке на основе React, в котором настроен Tailwind CSS.