Перейти до вмісту
🛠️
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.