Build custom React components with Tailwind CSS. Create buttons, inputs, textareas, selects, and breadcrumbs with real-time preview and generated code ready to use in your projects.
Build React components with Tailwind CSS and see a live preview
<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" komponentų kūrimo įrankis yra galingas vizualus redaktorius, padedantis greitai sukurti pasirinktines "React" komponentus su "Tailwind CSS". Ši nemokama internetinė "React Tailwind" komponentų kūrimo priemonė leidžia kūrėjams ir dizaineriams kurti, pritaikyti ir eksportuoti gamybai paruoštus vartotojo sąsajos komponentus be rankinio CSS kodo rašymo. Naudodami mūsų tiesioginės peržiūros "React Tailwind" kūrimo įrankį, galite matyti realaus laiko pakeitimus, kai projektuojate mygtukus, formas, įvesties laukus ir navigacijos komponentus, naudodami "Tailwind" utilitarinį CSS karkasą.
Mūsų "React Tailwind" komponentų kūrimo įrankis palaiko esminių vartotojo sąsajos elementų, įskaitant mygtukus, teksto įvesties laukus, teksto sritis, išskleidžiamuosius meniu ir išplėstinę navigaciją, kūrimą. Kiekvienas "React" komponentas gali būti visiškai pritaikytas naudojant "Tailwind CSS" utilitarinius stilius spalvoms, tarpams, tipografijai, sienoms ir pritaikomajam dizainui - visa tai su akimirksniu tiesioginiu peržiūros režimu, kuris dinamiškai atnaujinamas keičiant savybes. Puikiai tinka greitam prototipavimui ir komponentų kūrimui.
Pradėkite pasirinkdami komponento tipą, kurį norite sukurti iš galimų parinkčių:
Kiekvienas komponento tipas turi savo rinkinį pasirinktinų savybių, kurios bus rodomos savybių skydelyje.
Pasirinkę komponento tipą, galite pritaikyti jo išvaizdą ir elgseną naudodami savybių skydelį. Įprastos savybės apima:
Konkretiems komponento tipams prieinamos papildomos savybės:
Keisdami savybes, tiesioginė peržiūra atnaujinasi realiuoju laiku, rodydama tiksliai, kaip atrodys jūsų komponentas. Taip pat galite:
Kai būsite patenkintas savo komponentu, įrankis automatiškai sugeneruoja atitinkamą "React" kodą su "Tailwind CSS" klasėmis. Galite:
Mygtukai yra esminiai vartotojo sąsajos elementai sąveikoms. Naudodami mūsų kūrimo įrankį, galite sukurti įvairius mygtukų stilius:
Pagrindinės pritaikymo parinktys:
Pavyzdinis sugeneruotas kodas:
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 Pateikti
5</button>
6Teksto įvesties laukai leidžia vartotojams įvesti vienos eilutės tekstą formose. Mūsų kūrimo įrankis padeda sukurti įvesties laukus, atitinkančius jūsų dizaino sistemą:
Pagrindinės pritaikymo parinktys:
Pavyzdinis sugeneruotas kodas:
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="Įveskite savo vardą"
5 required
6/>
7Teksto sritys naudojamos daugiaeiliams teksto įvestims, pvz., komentarams ar aprašymams:
Pagrindinės pritaikymo parinktys:
Pavyzdinis sugeneruotas kodas:
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="Įveskite savo žinutę"
4 rows={4}
5></textarea>
6Išskleidžiamieji meniu leidžia vartotojams pasirinkti iš sąrašo parinkčių:
Pagrindinės pritaikymo parinktys:
Pavyzdinis sugeneruotas kodas:
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 parinktis</option>
6 <option value="option2">2 parinktis</option>
7 <option value="option3">3 parinktis</option>
8</select>
9Išplėstinė navigacija padeda vartotojams suprasti jų vietą svetainės hierarchijoje:
Pagrindinės pritaikymo parinktys:
Pavyzdinis sugeneruotas kodas:
1<nav className="flex" aria-label="Išplėstinė navigacija">
2 <ol className="flex space-x-2 text-gray-700">
3 <li className="flex items-center">
4 <a href="/" className="hover:text-blue-600">Pradžia</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">Produktai</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">Kategorija</a>
13 </li>
14 </ol>
15</nav>
16Mūsų komponentų kūrimo įrankis naudoja "Tailwind CSS" utilitarines klases komponentams stilizuoti. Čia pateikiama greitoji nuoroda dažniausiai naudojamoms savybėms:
"Tailwind" pateikia išsamią spalvų paletę. Keletas pavyzdžių:
text-{color}-{shade} (pvz., text-blue-500, text-red-600)bg-{color}-{shade} (pvz., bg-green-500, bg-gray-100)border-{color}-{shade} (pvz., border-gray-300)Valdykite užpildymą ir paraštę su šiomis klasėmis:
p-{size}, px-{size}, py-{size} (pvz., p-4, px-3 py-2)m-{size}, mx-{size}, my-{size} (pvz., m-2, mx-auto)Koreguokite teksto išvaizdą su:
text-{size} (pvz., text-sm, text-lg)font-{weight} (pvz., font-bold, font-medium)text-{alignment} (pvz., text-center, text-right)Pritaikykite sienas su:
border,Raskite daugiau įrankių, kurie gali būti naudingi jūsų darbo eiga.