Изградете персонализирани 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 с живо предварително разглеждане можете да виждате промените в реално време, докато проектирате бутони, форми, входове и навигационни компоненти, използвайки Tailwind's utility-first CSS framework.
Нашият конструктор на React Tailwind компоненти поддържа създаването на основни UI елементи, включително бутони, текстови входове, текстови полета, падащи менюта за избор и навигация с хлебни трохи. Всеки React компонент може да бъде напълно персонализиран, използвайки Tailwind CSS utility класове за цветове, интервали, типография, граници и responsive дизайн - всичко това с моментално живо предварително разглеждане, което се актуализира динамично, докато променяте свойствата. Идеално за бързо прототипиране и разработка на компоненти.
Започнете, като изберете типа на компонента, който искате да създадете, от наличните опции:
Всеки тип компонент има собствен набор от персонализируеми свойства, които ще се появят в панела със свойства.
След като изберете тип на компонент, можете да персонализирате неговия външен вид и поведение, използвайки панела със свойства. Общите свойства включват:
За конкретни типове компоненти са налични допълнителни свойства:
Докато регулирате свойствата, живото предварително разглеждане се актуализира в реално време, показвайки точно как ще изглежда вашият компонент. Можете също:
Веднъж като сте доволни от вашия компонент, инструментът автоматично генерира съответния 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Нашият конструктор на компоненти използва utility класовете на 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)Контролирайте padding и margin с тези класове:
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)focus:{property} (напр., focus:ring-2)active:{property} (напр., active:bg-blue-700)Открийте още инструменти, които може да бъдат полезни за вашия работен процес