Sari la conținut
🛠️
Whiz Tools

Constructor de Componente React Tailwind - Previzualizare Live & Generator de Cod

Constructor gratuit de Componente React Tailwind cu previzualizare live. Creează butoane, câmpuri de introducere, zone de text, selectoare și breadcrumbs cu Tailwind CSS. Exportă cod React gata de producție instant.

Constructor de Componente React cu Tailwind CSS

Construiți componente React cu Tailwind CSS și vedeți o previzualizare live

Tip de Componentă

Proprietăți

Vedere Responsive

Previzualizare Stare

Previzualizare Live

Cod Generat

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>
Calculator de încărcare...
📚

Documentație

Ce este generatorul de componente React cu Tailwind?

Generatorul de componente React cu Tailwind este un instrument gratuit în browser care generează o componentă React stilizată cu Tailwind CSS. Utilizatorul alege un tip de componentă, cum ar fi un buton sau un câmp de introducere a textului, ajustează câteva opțiuni de stil, iar instrumentul afișează o previzualizare live lângă codul JSX corespunzător. Totul rulează în browser. Nu este necesar niciun cont sau apel către server.

Tipuri de componente

Instrumentul poate genera cinci tipuri de componente:

  • Buton — un buton pe care se poate face clic, cu text personalizat
  • Câmp de introducere a textului — un câmp de formular pe un singur rând, cu text substituent
  • Textarea — un câmp de formular pe mai multe rânduri, cu un număr stabilit de rânduri
  • Selectare — o listă derulantă construită dintr-o listă de opțiuni
  • Breadcrumb — un rând de linkuri care indică poziția unei pagini în site, de exemplu Acasă / Produse / Categorie

Ce proprietăți pot fi modificate

Cinci proprietăți de stil se aplică fiecărui tip de componentă:

  • Culoarea textului — alb, negru, gri, albastru, roșu sau verde
  • Culoarea de fundal — fără culoare, alb, gri deschis, albastru, roșu sau verde
  • Spațiere interioară — fără spațiere, mică, medie, mare sau valoarea implicită pentru buton
  • Raza chenarului — fără rotunjire, mică, medie, mare sau complet rotunjit
  • Lățimea — automată, completă, jumătate, o treime sau un sfert

Unele proprietăți apar doar pentru anumite tipuri de componente: textul butonului, textul substituent al unui câmp de introducere a textului sau al unui textarea, numărul de rânduri al unui textarea, lista de opțiuni a unei selectări și lista de elemente a unui breadcrumb. Câmpurile de introducere a textului, textarea-urile și selectările au și casete de selectare „obligatoriu” și „dezactivat”; butoanele au, de asemenea, o casetă de selectare „dezactivat”.

Patru proprietăți sunt fixe și nu pot fi modificate prin interfață: marginea (întotdeauna m-0), stilul chenarului (întotdeauna border border-transparent), dimensiunea fontului (întotdeauna text-base) și grosimea fontului (întotdeauna font-medium). Fiecare componentă generată conține aceleași patru clase. Pentru a utiliza o altă margine, un alt chenar sau o altă dimensiune a fontului, editați manual codul copiat.

Cum este construită lista claselor generate

Instrumentul construiește șirul de clase Tailwind pentru fiecare componentă într-o ordine fixă:

  1. Clasa pentru culoarea textului, dacă este setată
  2. Clasa pentru culoarea de fundal, dacă este setată
  3. Clasele pentru spațiere interioară, margine, chenar și raza chenarului
  4. Clasa pentru lățime, cu excepția cazului în care lățimea este setată la „automată”
  5. Clasele fixe pentru dimensiunea și grosimea fontului
  6. Clasele pentru stările interactive (hover, focus, active), care diferă în funcție de tipul componentei
  7. Clasele pentru starea dezactivată, dacă este bifat „dezactivat”

Butoanele primesc hover:bg-opacity-90, focus:ring-2, focus:ring-offset-2 și focus:ring-blue-500. Un buton care nu este dezactivat primește și cursor-pointer. Câmpurile de introducere a textului, textarea-urile și selectările primesc în schimb focus:outline-none, focus:ring-2, focus:ring-blue-500 și focus:border-blue-500. Breadcrumb-urile nu primesc niciuna dintre aceste clase interactive, iar starea dezactivată nu se aplică niciodată unui breadcrumb, deoarece o listă de navigare nu poate fi dezactivată.

Exemplu: buton

Cu setările implicite (text alb, fundal albastru-500, spațiere interioară medie, colțuri rotunjite), instrumentul generează:

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

Exemplu: câmp de introducere a textului

Cu text gri, fundal alb, spațiere interioară mică, rază mare a chenarului, lățime completă și opțiunea „obligatoriu” bifată:

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

Exemplu: textarea și selectare

Textarea-urile și selectările urmează aceeași regulă de construire a claselor ca și câmpurile de introducere a textului. Un textarea cu text negru, spațiere interioară medie, rotunjire medie, lățime completă și 4 rânduri:

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

O selectare cu aceleași culori și aceeași spațiere ca în exemplul câmpului de introducere a textului de mai sus și cu trei opțiuni:

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

Exemplu: breadcrumb

Linkurile și separatorii breadcrumb folosesc întotdeauna clase fixe (hover:text-blue-600 pentru linkuri, mx-2 text-gray-400 pentru separatorul „/”). Doar lista exterioară preia cele cinci proprietăți de stil comune. Cu text gri și fără spațiere interioară sau rotunjire:

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

Previzualizare adaptivă versus clase adaptive

Instrumentul are un control „Vizualizare adaptivă” cu trei opțiuni: mobil, tabletă și desktop. Comutarea între acestea modifică doar lățimea casetei de previzualizare, astfel încât utilizatorul să poată vedea aproximativ cum ar arăta o componentă pe un ecran mai îngust. Nu adaugă niciun prefix de punct de întrerupere Tailwind, precum sm:, md:, lg: sau xl:, în codul generat. Ieșirea JSX este aceeași indiferent de vizualizarea adaptivă selectată. Orice persoană care are nevoie ca o componentă să arate diferit la lățimi diferite ale ecranului trebuie să adauge manual aceste clase de punct de întrerupere în codul copiat.

Cum se adaugă Tailwind CSS într-un proiect React

  1. Instalați pachetele: npm install -D tailwindcss postcss autoprefixer
  2. Configurați fișierele de configurare: npx tailwindcss init -p
  3. Enumerați fișierele sursă ale proiectului în tailwind.config.js, la content
  4. Adăugați cele trei directive Tailwind în fișierul CSS principal: @tailwind base; @tailwind components; @tailwind utilities;
  5. Lipiți o componentă generată într-un fișier React

Întrebări frecvente

Ce face generatorul de componente React cu Tailwind? Generează o componentă React stilizată și clasele CSS Tailwind corespunzătoare și afișează o previzualizare live în timp ce utilizatorul ajustează setările.

Instrumentul adaugă automat clase adaptive pentru puncte de întrerupere, precum sm: sau md:? Nu. Controlul mobil/tabletă/desktop redimensionează doar caseta de previzualizare. Codul exportat nu conține clasele sm:, md:, lg: sau xl:; acestea trebuie adăugate manual, dacă sunt necesare.

Pot schimba marginea, stilul chenarului sau dimensiunea fontului? Nu prin intermediul interfeței. Fiecare componentă generată utilizează aceeași margine fixă (m-0), același chenar (border border-transparent), aceeași dimensiune a fontului (text-base) și aceeași grosime a fontului (font-medium). Modificați-le editând direct codul copiat.

Îmi salvează instrumentul componentele? Nu. Nu există o funcție de salvare. Copiați codul generat și stocați-l în fișierele proprii ale proiectului.

Generează TypeScript? Instrumentul generează JSX (sintaxă JavaScript). Ieșirea este un marcaj JSX simplu, astfel încât poate fi lipită într-un fișier .tsx fără modificări, deși nu sunt generate definiții de tipuri.

Este gratuit de utilizat? Da. Rulează în întregime în browser, fără cont și fără nicio solicitare trimisă unui server.

Funcționează cu Next.js, Gatsby sau alte cadre React? Da. Codul generat este JSX simplu cu clase Tailwind, astfel încât funcționează în orice cadru bazat pe React în care Tailwind CSS este configurat.