Прескочи към съдържанието
🛠️
Whiz Tools

Инструмент за изграждане на React Tailwind компоненти - Директен преглед и генератор на код

Безплатен инструмент за изграждане на React Tailwind компоненти с директен преглед. Създавайте бутони, входни полета, текстови области, селекции и хлебни трохи с Tailwind CSS. Експортирайте готов за производство React код мигновено.

Инструмент за изграждане на React компоненти с Tailwind CSS

Създайте React компоненти с Tailwind CSS и вижте директно Preview

Тип Компонент

Свойства

Responsive Изглед

Preview на Състояние

Директно Preview

Генериран Код

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.