Przejdź do treści
🛠️
Whiz Tools

Kreator Komponentów React Tailwind - Podgląd na Żywo i Generator Kodu

Darmowy Kreator Komponentów React Tailwind z podglądem na żywo. Twórz przyciski, pola wprowadzania, obszary tekstowe, select'y i breadcrumbs z Tailwind CSS. Natychmiastowy eksport gotowego do produkcji kodu React.

Kreator Komponentów React z Tailwind CSS

Twórz komponenty React z Tailwind CSS i oglądaj podgląd na żywo

Typ Komponentu

Właściwości

Widok Responsywny

Podgląd Stanów

Podgląd Na Żywo

Wygenerowany Kod

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>
Kalkulator załadunku...
📚

Dokumentacja

Czym jest generator komponentów React Tailwind?

Generator komponentów React Tailwind to bezpłatne narzędzie przeglądarkowe, które tworzy komponent React ostylowany za pomocą Tailwind CSS. Użytkownik wybiera typ komponentu, na przykład przycisk lub pole tekstowe, dostosowuje kilka opcji stylu, a narzędzie wyświetla podgląd na żywo obok odpowiadającego mu kodu JSX. Wszystko działa w przeglądarce. Konto ani połączenie z serwerem nie są potrzebne.

Typy komponentów

Narzędzie może generować pięć rodzajów komponentów:

  • Przycisk — klikalny przycisk z niestandardowym tekstem
  • Pole tekstowe — jednowierszowe pole formularza z tekstem zastępczym
  • Obszar tekstowy — wielowierszowe pole formularza z określoną liczbą wierszy
  • Lista wyboru — rozwijana lista utworzona z listy opcji
  • Okruchy nawigacyjne — wiersz linków pokazujących położenie strony w witrynie, na przykład Strona główna / Produkty / Kategoria

Które właściwości można zmieniać

Do każdego typu komponentu stosuje się pięć właściwości stylu:

  • Kolor tekstu — biały, czarny, szary, niebieski, czerwony lub zielony
  • Kolor tła — brak, biały, jasnoszary, niebieski, czerwony lub zielony
  • Dopełnienie (odstęp wewnętrzny) — brak, małe, średnie, duże lub domyślne dla przycisku
  • Promień zaokrąglenia obramowania (zaokrąglenie narożników) — brak, mały, średni, duży lub pełne zaokrąglenie
  • Szerokość — automatyczna, pełna, połowa, jedna trzecia lub jedna czwarta

Niektóre właściwości są dostępne tylko dla określonych typów komponentów: tekst przycisku, tekst zastępczy w polu tekstowym lub obszarze tekstowym, liczba wierszy w obszarze tekstowym, lista opcji w liście wyboru oraz lista elementów w okruszkach nawigacyjnych. Pola tekstowe, obszary tekstowe i listy wyboru mają także pola wyboru „wymagane” i „wyłączone”; przyciski również mają pole wyboru „wyłączone”.

Cztery właściwości są stałe i nie można ich zmienić za pomocą interfejsu: margines (zawsze m-0), styl obramowania (zawsze border border-transparent), rozmiar czcionki (zawsze text-base) oraz grubość czcionki (zawsze font-medium). Każdy wygenerowany komponent zawiera te same cztery klasy. Aby użyć innego marginesu, obramowania lub rozmiaru czcionki, należy ręcznie edytować skopiowany kod.

Jak tworzona jest lista wygenerowanych klas

Narzędzie tworzy ciąg klas Tailwind dla każdego komponentu w stałej kolejności:

  1. Klasa koloru tekstu, jeśli została ustawiona
  2. Klasa koloru tła, jeśli została ustawiona
  3. Klasy dopełnienia, marginesu, obramowania i promienia zaokrąglenia obramowania
  4. Klasa szerokości, chyba że szerokość ustawiono na „automatyczną”
  5. Stałe klasy rozmiaru i grubości czcionki
  6. Klasy stanów interaktywnych (hover, focus, active), różne w zależności od typu komponentu
  7. Klasy stanu wyłączenia, jeśli zaznaczono opcję „wyłączone”

Przyciski otrzymują hover:bg-opacity-90, focus:ring-2, focus:ring-offset-2 oraz focus:ring-blue-500. Przycisk, który nie jest wyłączony, otrzymuje także cursor-pointer. Pola tekstowe, obszary tekstowe i listy wyboru otrzymują zamiast tego focus:outline-none, focus:ring-2, focus:ring-blue-500 oraz focus:border-blue-500. Okruchy nawigacyjne nie otrzymują żadnej z tych klas interaktywnych, a stan wyłączenia nigdy ich nie dotyczy, ponieważ listy nawigacyjnej nie można wyłączyć.

Przykład: przycisk

Przy ustawieniach domyślnych (biały tekst, niebieskie tło 500, średnie dopełnienie, zaokrąglone narożniki) narzędzie generuje:

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

Przykład: pole tekstowe

Z szarym tekstem, białym tłem, małym dopełnieniem, dużym promieniem zaokrąglenia obramowania, pełną szerokością i zaznaczoną opcją „wymagane”:

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

Przykład: obszar tekstowy i lista wyboru

Obszary tekstowe i listy wyboru podlegają tej samej zasadzie tworzenia klas co pola tekstowe. Obszar tekstowy z czarnym tekstem, średnim dopełnieniem, średnim zaokrągleniem, pełną szerokością i 4 wierszami:

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

Lista wyboru z takimi samymi kolorami i odstępami jak w powyższym przykładzie pola tekstowego oraz z trzema opcjami:

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

Przykład: okruchy nawigacyjne

Linki i separatory okruszków nawigacyjnych zawsze używają stałych klas (hover:text-blue-600 w linkach, mx-2 text-gray-400 w separatorze „/”). Tylko zewnętrzna lista otrzymuje pięć wspólnych właściwości stylu. Z szarym tekstem oraz bez dopełnienia i zaokrąglenia:

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

Podgląd responsywny a klasy responsywne

Narzędzie ma element „Widok responsywny” z trzema opcjami: urządzenie mobilne, tablet i komputer. Przełączanie między nimi zmienia tylko szerokość pola podglądu, dzięki czemu można z grubsza zobaczyć, jak komponent wyglądałby na węższym ekranie. Nie dodaje ono do wygenerowanego kodu żadnego prefiksu punktu przerwania Tailwind, takiego jak sm:, md:, lg: lub xl:. Wynikowy kod JSX jest taki sam niezależnie od wybranego widoku responsywnego. Jeśli komponent ma wyglądać inaczej przy różnych szerokościach ekranu, te klasy punktów przerwania trzeba dodać samodzielnie do skopiowanego kodu.

Jak dodać Tailwind CSS do projektu React

  1. Zainstaluj pakiety: npm install -D tailwindcss postcss autoprefixer
  2. Skonfiguruj pliki konfiguracyjne: npx tailwindcss init -p
  3. Wymień pliki źródłowe projektu w tailwind.config.js w sekcji content
  4. Dodaj trzy dyrektywy Tailwind do głównego pliku CSS: @tailwind base; @tailwind components; @tailwind utilities;
  5. Wklej wygenerowany komponent do pliku React

Często zadawane pytania

Co robi generator komponentów React Tailwind? Generuje ostylowany komponent React oraz odpowiadające mu klasy Tailwind CSS, a także wyświetla podgląd na żywo podczas dostosowywania ustawień.

Czy narzędzie automatycznie dodaje klasy responsywnych punktów przerwania, takich jak sm: lub md:? Nie. Element sterujący urządzenie mobilne/tablet/komputer zmienia tylko rozmiar pola podglądu. Eksportowany kod nie zawiera klas sm:, md:, lg: ani xl:; w razie potrzeby trzeba dodać je ręcznie.

Czy mogę zmienić margines, styl obramowania lub rozmiar czcionki? Nie za pomocą interfejsu. Każdy wygenerowany komponent używa tego samego stałego marginesu (m-0), obramowania (border border-transparent), rozmiaru czcionki (text-base) i grubości czcionki (font-medium). Zmień je, bezpośrednio edytując skopiowany kod.

Czy narzędzie zapisuje moje komponenty? Nie. Nie ma funkcji zapisywania. Skopiuj wygenerowany kod i przechowuj go we własnych plikach projektu.

Czy generuje kod TypeScript? Narzędzie generuje JSX (składnię JavaScript). Wynik to zwykły kod JSX, więc można go wkleić do pliku .tsx bez zmian, ale nie są generowane żadne definicje typów.

Czy korzystanie z narzędzia jest bezpłatne? Tak. Działa ono w całości w przeglądarce, bez konta i bez wysyłania żądań do serwera.

Czy działa z Next.js, Gatsby i innymi frameworkami React? Tak. Wygenerowany kod to zwykły JSX z klasami Tailwind, więc działa w każdym frameworku opartym na React, w którym skonfigurowano Tailwind CSS.