Spring til indhold
🛠️
Whiz Tools

React Tailwind Komponent Builder - Live Preview & Kode Generator

Gratis React Tailwind Komponent Builder med live preview. Opret knapper, inputfelter, tekstområder, valgfelter & brødkrumme med Tailwind CSS. Eksporter produktionsklar React-kode øjeblikkeligt.

React Komponent Builder med Tailwind CSS

Byg React komponenter med Tailwind CSS og se et live preview

Komponenttype

Egenskaber

Responsiv Visning

Tilstands Preview

Live Preview

Genereret Kode

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>
Indlæsningsberegner...
📚

Dokumentation

Hvad er React Tailwind-komponentbyggeren?

React Tailwind-komponentbyggeren er et gratis browserværktøj, der genererer en React-komponent stylet med Tailwind CSS. Brugeren vælger en komponenttype, f.eks. en knap eller et tekstfelt, justerer nogle få stilindstillinger, og værktøjet viser en liveforhåndsvisning ved siden af den tilsvarende JSX-kode. Alt kører i browseren. Der kræves hverken en konto eller et serverkald.

Komponenttyper

Værktøjet kan generere fem slags komponenter:

  • Knap — en klikbar knap med brugerdefineret tekst
  • Tekstfelt — et formularfelt med én linje og pladsholdertekst
  • Tekstfelt — et formularfelt med flere linjer og et angivet antal rækker
  • Valgfelt — en rullemenu opbygget fra en liste med valgmuligheder
  • Brødkrummesti — en række links, der viser en sides placering på et websted, f.eks. Hjem / Produkter / Kategori

Hvilke egenskaber kan ændres

Fem stilegenskaber gælder for alle komponenttyper:

  • Tekstfarve — hvid, sort, grå, blå, rød eller grøn
  • Baggrundsfarve — ingen, hvid, lysegrå, blå, rød eller grøn
  • Indvendig afstand — ingen, lille, mellem, stor eller knappens standard
  • Afrunding af hjørner — ingen, lille, mellem, stor eller helt afrundet
  • Bredde — automatisk, fuld, halvdelen, en tredjedel eller en fjerdedel

Nogle egenskaber vises kun for bestemte komponenttyper: knappens tekst, pladsholderteksten i et tekstfelt eller tekstområde, antallet af rækker i et tekstområde, listen med valgmuligheder i en valgliste og listen med elementer i en brødkrummesti. Tekstfelter, tekstområder og valg­lister har også afkrydsningsfelter for "påkrævet" og "deaktiveret"; knapper har også et afkrydsningsfelt for "deaktiveret".

Fire egenskaber er faste og kan ikke ændres via brugerfladen: margen (altid m-0), kanttypografi (altid border border-transparent), skriftstørrelse (altid text-base) og skriftvægt (altid font-medium). Hver genereret komponent indeholder de samme fire klasser. Hvis der skal bruges en anden margen, kant eller skriftstørrelse, skal den kopierede kode redigeres manuelt.

Sådan opbygges klasselisten for den genererede komponent

Værktøjet opbygger Tailwind-klassestrengen for hver komponent i en fast rækkefølge:

  1. Klassen for tekstfarve, hvis der er valgt en
  2. Klassen for baggrundsfarve, hvis der er valgt en
  3. Klasserne for indvendig afstand, margen, kant og hjørneradius
  4. Klassen for bredde, medmindre bredden er indstillet til "automatisk"
  5. De faste klasser for skriftstørrelse og skriftvægt
  6. Klasser for interaktive tilstande (hover, fokus, aktiv), som varierer efter komponenttype
  7. Klasser for den deaktiverede tilstand, hvis "deaktiveret" er markeret

Knapper får hover:bg-opacity-90, focus:ring-2, focus:ring-offset-2 og focus:ring-blue-500. En knap, der ikke er deaktiveret, får også cursor-pointer. Tekstfelter, tekstområder og valg­lister får i stedet focus:outline-none, focus:ring-2, focus:ring-blue-500 og focus:border-blue-500. Brødkrummestier får ingen af disse interaktive klasser, og den deaktiverede tilstand gælder aldrig for en brødkrummesti, eftersom en navigationsliste ikke kan deaktiveres.

Eksempel: knap

Med standardindstillingerne (hvid tekst, blå 500-baggrund, mellem indvendig afstand og afrundede hjørner) viser værktøjet:

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

Eksempel: tekstfelt

Med grå tekst, hvid baggrund, lille indvendig afstand, stor hjørneradius, fuld bredde og "påkrævet" markeret:

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

Eksempel: tekstområde og valgliste

Tekstområder og valg­lister følger samme regel for opbygning af klasser som tekstfelter. Et tekstområde med sort tekst, mellem indvendig afstand, mellem hjørnerunding, fuld bredde og 4 rækker:

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

En valgliste med samme farver og afstande som tekstfeltseksemplet ovenfor og tre valgmuligheder:

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

Eksempel: brødkrummesti

Links og separatorer i brødkrummestier bruger altid faste klasser (hover:text-blue-600 på links, mx-2 text-gray-400 på "/"-separatoren). Kun den ydre liste får de fem fælles stilegenskaber. Med grå tekst og ingen indvendig afstand eller hjørnerunding:

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

Responsiv forhåndsvisning kontra responsive klasser

Værktøjet har en indstilling kaldet "Responsiv visning" med tre valgmuligheder: mobil, tablet og desktop. Når der skiftes mellem dem, ændres kun bredden på forhåndsvisningsfeltet, så brugeren omtrent kan se, hvordan en komponent vil se ud på en smallere skærm. Det tilføjer ikke noget præfiks for Tailwind-brudpunkter, f.eks. sm:, md:, lg: eller xl:, til den genererede kode. JSX-outputtet er det samme, uanset hvilken responsive visning der er valgt. Hvis en komponent skal se anderledes ud ved forskellige skærmbredder, skal brugeren selv tilføje disse brudpunktsklasser til den kopierede kode.

Sådan føjes Tailwind CSS til et React-projekt

  1. Installer pakkerne: npm install -D tailwindcss postcss autoprefixer
  2. Opret konfigurationsfilerne: npx tailwindcss init -p
  3. Angiv projektets kildefiler i tailwind.config.js under content
  4. Føj de tre Tailwind-direktiver til hoved-CSS-filen: @tailwind base; @tailwind components; @tailwind utilities;
  5. Indsæt en genereret komponent i en React-fil

Ofte stillede spørgsmål

Hvad gør React Tailwind-komponentbyggeren? Den genererer en stylet React-komponent og de tilsvarende Tailwind CSS-klasser og viser en liveforhåndsvisning, mens brugeren justerer indstillingerne.

Tilføjer værktøjet automatisk responsive brudpunktsklasser som sm: eller md:? Nej. Kontrollen til mobil/tablet/computer ændrer kun størrelsen på forhåndsvisningsfeltet. Den eksporterede kode har ingen sm:-, md:-, lg:- eller xl:-klasser; de skal tilføjes manuelt, hvis det er nødvendigt.

Kan jeg ændre margen, kanttypografien eller skriftstørrelsen? Ikke via brugerfladen. Hver genereret komponent bruger den samme faste margen (m-0), kant (border border-transparent), skriftstørrelse (text-base) og skriftvægt (font-medium). Disse ændres ved at redigere den kopierede kode direkte.

Gemmer værktøjet mine komponenter? Nej. Der er ingen gemmefunktion. Kopiér den genererede kode, og gem den i projektets egne filer.

Genererer det TypeScript? Værktøjet genererer JSX (JavaScript-syntaks). Outputtet er almindelig JSX-markup, så det kan indsættes i en .tsx-fil uden ændringer, men der genereres ingen typedefinitioner.

Er værktøjet gratis at bruge? Ja. Det kører udelukkende i browseren, uden konto og uden at sende en forespørgsel til en server.

Virker det med Next.js, Gatsby eller andre React-rammeværk? Ja. Den genererede kode er almindelig JSX med Tailwind-klasser, så den fungerer i alle React-baserede frameworks, der har Tailwind CSS konfigureret.