Looge kohandatud React-komponente Tailwind CSS-iga. Looge nuppe, sisendeid, tekstipiirkondi, ripploendeid ja leivakuulikuid reaalajas eelvaatega ja genereeritud koodiga, mida saate oma projektides kasutada.
Koostage React-komponente koos Tailwind CSS-iga ja vaadake elavat eelvaadet
<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 Komponendi Koostaja on võimas visuaalne redaktor, mis aitab teil luua kohandatud React-komponente Tailwind CSS-iga kohe. See tasuta veebipõhine React Tailwind-komponendi koostaja võimaldab arendajatel ja disaineritel luua, kohandada ja eksportida tootmiseks valmis UI-komponente ilma CSS-koodi käsitsi kirjutamata. Meie React Tailwind-koostaja reaalajas eelvaatega saate näha reaalajas muudatusi, kui kujundate nuppe, vorme, sisendeid ja navigatsioonikomponente, kasutades Tailwind'i utiliidi-esimese CSS-raamistikku.
Meie React Tailwind-komponendi koostaja toetab põhiliste UI-elementide loomist, sealhulgas nuppe, tekstisisendeid, tekstipiirkondi, valiku rippmenüüsid ja leivapuru navigatsiooni. Iga React-komponent saab täielikult kohandada, kasutades Tailwind CSS-i utiliidiklasse värvide, vahemaa, tipograafia, piiride ja reaktiivse disaini jaoks - kõik reaalajas eelvaatega, mis uueneb dünaamiliselt, kui te atribuute muudate. Ideaalne kiireks prototüüpimiseks ja komponentide arenduseks.
Alustage, valides tĂĽĂĽpi komponenti, mida soovite luua saadaolevate valikute seast:
Iga komponenttĂĽĂĽp on oma kohandatavate atribuutidega, mis ilmuvad atribuutide paneelile.
Pärast komponenttüübi valimist saate selle välimust ja käitumist kohandada atribuutide paneeli abil. Levinud atribuudid on:
Konkreetsetele komponenttüüpidele on saadaval täiendavad atribuudid:
Kui te atribuute reguleerite, uueneb reaalajas eelvaade reaalajas, näidates täpselt, kuidas teie komponent välja näeb. Samuti saate:
Kui olete oma komponendiga rahul, genereerib tööriist automaatselt vastava React-koodi Tailwind CSS-i klassidega. Saate:
Nupud on olulised UI-elemendid kasutaja interaktsioonideks. Meie koostajaga saate luua erinevaid nuputiile:
Peamised Kohandamisvõimalused:
Näide Genereeritud Koodist:
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 Esita
5</button>
6Tekstisisendid võimaldavad kasutajatel sisestada ühereaülise teksti vormidesse. Meie koostaja aitab teil luua sisendeid, mis sobivad teie disaini süsteemiga:
Peamised Kohandamisvõimalused:
Näide Genereeritud Koodist:
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="Sisestage oma nimi"
5 required
6/>
7Tekstipiirkonnad on mõeldud mitmerealise tekstisisendi jaoks, nagu kommentaarid või kirjeldused:
Peamised Kohandamisvõimalused:
Näide Genereeritud Koodist:
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="Sisestage oma sõnum"
4 rows={4}
5></textarea>
6Valiku rippmenüüd võimaldavad kasutajatel valida loendist suvandeid:
Peamised Kohandamisvõimalused:
Näide Genereeritud Koodist:
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">Valik 1</option>
6 <option value="option2">Valik 2</option>
7 <option value="option3">Valik 3</option>
8</select>
9Leivapuru aitab kasutajatel mõista oma asukohta veebisaidi hierarhias:
Peamised Kohandamisvõimalused:
Näide Genereeritud Koodist:
1<nav className="flex" aria-label="Leivapuru">
2 <ol className="flex space-x-2 text-gray-700">
3 <li className="flex items-center">
4 <a href="/" className="hover:text-blue-600">Avaleht</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">Tooted</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">Kategooria</a>
13 </li>
14 </ol>
15</nav>
16Meie komponendi koostaja kasutab Tailwind CSS-i utiliidiklasse komponentide stiilimiseks. Siin on kiire viide kõige sagedamini kasutatavatele omadustele:
Tailwind pakub ulatuslikku värvivalikut. Mõned näited:
text-{color}-{shade} (nt text-blue-500, text-red-600)bg-{color}-{shade} (nt bg-green-500, bg-gray-100)border-{color}-{shade} (nt border-gray-300)Kontrollige paddingut ja marginit nende klassidega:
p-{size}, px-{size}, py-{size} (nt p-4, px-3 py-2)m-{size}, mx-{size}, my-{size} (nt m-2, mx-auto)Reguleerige teksti välimust:
text-{size} (nt text-sm, text-lg)font-{weight} (nt font-bold, font-medium)text-{alignment} (nt text-center, text-right)Kohandage piire:
border, border-{width} (nt border-2)rounded, rounded-{size} (nt rounded-md, rounded-full)Määrake mõõtmed:
w-{size} (nt w-full, w-1/2)h-{size} (nt h-10, h-auto)Stiilitage erinevaid olekuid:
hover:{property} (nt hover:bg-blue-600)focus:{property} (nt focus:ring-2)active:{property} (nt active:bg-blue-700)disabled:{property} (nt disabled:opacity-50)React Tailwind Komponendi Koostaja on ideaalne UI-komponentide kiireks prototüüpimiseks enne nende tegelikku rakendamist teie koodibaasis. See võib oluliselt säästa arendusaega, võimaldades disaineritel ja arendajatel eksperimenteerida erinevate stiilide ja konfiguratsioonidega ilma koodi algusest kirjutamata.
**Näidisprotsess
Avasta rohkem tööriistu, mis võivad olla kasulikud teie töövoos