Vytvářejte vlastní React komponenty s Tailwind CSS. Vytvářejte tlačítka, vstupy, textová pole, rozbalovací seznamy a drobečkové navigace s okamžitým náhledem a vygenerovaným kódem připraveným k použití ve vašich projektech.
Vytvářejte komponenty React s Tailwind CSS a sledujte živý náhled
<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>
Tvůrce komponent React Tailwind je výkonný vizuální editor, který vám pomůže vytvářet vlastní komponenty React s Tailwind CSS okamžitě. Tento bezplatný online tvůrce komponent React Tailwind umožňuje vývojářům a designérům budovat, přizpůsobovat a exportovat připravené komponenty uživatelského rozhraní bez ručního psaní CSS kódu. S naším živým náhledem tvůrce React Tailwind můžete vidět změny v reálném čase, když navrhujete tlačítka, formuláře, vstupy a navigační komponenty pomocí utility-first CSS frameworku Tailwind.
Náš tvůrce komponent React Tailwind podporuje vytváření základních prvků uživatelského rozhraní včetně tlačítek, textových vstupů, textových oblastí, rozbalovacích nabídek a navigace pomocí drobečkové navigace. Každá komponenta React může být plně přizpůsobena pomocí tříd utility Tailwind CSS pro barvy, rozestupy, typografii, okraje a responzivní design - vše s okamžitým živým náhledem, který se dynamicky aktualizuje při úpravě vlastností. Perfektní pro rychlé prototypování a vývoj komponent.
Začněte výběrem typu komponenty, kterou chcete vytvořit z dostupných možností:
Každý typ komponenty má vlastní sadu přizpůsobitelných vlastností, které se zobrazí v panelu vlastností.
Po výběru typu komponenty můžete upravit její vzhled a chování pomocí panelu vlastností. Běžné vlastnosti zahrnují:
Pro konkrétní typy komponent jsou k dispozici další vlastnosti:
Při úpravě vlastností se živý náhled aktualizuje v reálném čase a ukazuje přesně, jak bude vaše komponenta vypadat. Můžete také:
Jakmile budete s vaší komponentou spokojeni, nástroj automaticky vygeneruje odpovídající kód React s třídami Tailwind CSS. Můžete:
Tlačítka jsou nezbytné prvky uživatelského rozhraní pro interakce uživatelů. S naším tvůrcem můžete vytvářet různé styly tlačítek:
Klíčové možnosti přizpůsobení:
Příklad vygenerovaného kódu:
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 Odeslat
5</button>
6Textové vstupy umožňují uživatelům zadávat jednořádkový text do formulářů. Náš tvůrce vám pomůže vytvořit vstupy, které odpovídají vašemu systému designu:
Klíčové možnosti přizpůsobení:
Příklad vygenerovaného kódu:
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="Zadejte své jméno"
5 required
6/>
7Textové oblasti se používají pro víceřádkový vstup textu, jako jsou komentáře nebo popisy:
Klíčové možnosti přizpůsobení:
Příklad vygenerovaného kódu:
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="Zadejte svou zprávu"
4 rows={4}
5></textarea>
6Rozbalovací nabídky umožňují uživatelům vybírat z seznamu možností:
Klíčové možnosti přizpůsobení:
Příklad vygenerovaného kódu:
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">Možnost 1</option>
6 <option value="option2">Možnost 2</option>
7 <option value="option3">Možnost 3</option>
8</select>
9Drobečková navigace pomáhá uživatelům pochopit jejich umístění v hierarchii webových stránek:
Klíčové možnosti přizpůsobení:
Příklad vygenerovaného kódu:
1<nav className="flex" aria-label="Drobečková navigace">
2 <ol className="flex space-x-2 text-gray-700">
3 <li className="flex items-center">
4 <a href="/" className="hover:text-blue-600">Domů</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">Produkty</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">Kategorie</a>
13 </li>
14 </ol>
15</nav>
16Náš tvůrce komponent využívá utility třídy Tailwind CSS k stylování komponent. Zde je stručná referenční příručka pro nejčastěji používané vlastnosti:
Tailwind poskytuje komplexní barevnou paletu. Některé příklady:
text-{color}-{shade} (např. text-blue-500, text-red-600)bg-{color}-{shade} (např. bg-green-500, bg-gray-100)border-{color}-{shade} (např. border-gray-300)Ovládejte vnitřní a vnější okraje pomocí těchto tříd:
p-{size}, px-{size}, py-{size} (např. p-4, px-3 py-2)m-{size}, mx-{size}, my-{size} (např. m-2, mx-auto)Upravujte vzhled textu pomocí:
text-{size} (např. text-sm, text-lg)font-{weight} (např. font-bold, font-medium)text-{alignment} (např. text-center, text-right)Přizpůsobujte okraje pomocí:
border, border-{width} (např. border-2)rounded, rounded-{size} (např. rounded-md, rounded-full)Nastavujte rozměry pomocí:
w-{size} (např. w-full, w-1/2)h-{size} (např. h-10, h-auto)Stylizujte různé stavy pomocí:
hover:{property} (např. hover:bg-blue-600)focus:{property} (např. focus:ring-2)active:{property} (např. active:bg-blue-700)disabled:{property} (např. disabled:opacity-50)Tvůrce komponent React Tailwind je perfektní pro rychlé prototypování komponent uživatelského rozhraní před jejich implementací v samotném kódu. To může ušetřit významný čas na vývoji tím, že umožňuje designérům a vývojářům experimentovat s různými styly a konfiguracemi bez nutnosti psát kód od začátku.
Příklad pracovního postupu:
Pro vývoj
Objevte další nástroje, které by mohly být užitečné pro vaši pracovní postup.