Siirry sisältöön
🛠️
Whiz Tools

React Tailwind Komponenttirakentaja - Reaaliaikainen Esikatselu & Koodigeneraattori

Ilmainen React Tailwind Komponenttirakentaja reaaliaikaisella esikatselulla. Luo painikkeita, syöttökenttiä, tekstialueita, valintaruutuja ja leivänmuruja Tailwind CSS:llä. Vie tuotantovalmis React-koodi välittömästi.

React-komponenttirakentaja Tailwind CSS:llä

Luo React-komponentteja Tailwind CSS:llä ja näe reaaliaikainen esikatselu

Komponentin tyyppi

Ominaisuudet

Responsiivinen näkymä

Tilan esikatselu

Reaaliaikainen esikatselu

Luotu koodi

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>
Latauslaskuri...
📚

Dokumentaatio

Mikä on React Tailwind -komponenttien rakennustyökalu?

React Tailwind -komponenttien rakennustyökalu on ilmainen selaintyökalu, joka luo Tailwind CSS:llä tyylitellyn React-komponentin. Käyttäjä valitsee komponentin tyypin, kuten painikkeen tai tekstikentän, säätää muutamia tyyliasetuksia, ja työkalu näyttää reaaliaikaisen esikatselun vastaavan JSX-koodin vieressä. Kaikki suoritetaan selaimessa. Tiliä tai palvelinkutsua ei tarvita.

Komponenttityypit

Työkalu voi luoda viidenlaisia komponentteja:

  • Painike — napsautettava painike, jossa on mukautettu teksti
  • Tekstikenttä — yksirivinen lomakekenttä, jossa on paikkamerkkiteksti
  • Tekstialue — monirivinen lomakekenttä, jossa on määritetty määrä rivejä
  • Valintaluettelo — vaihtoehtoluettelosta muodostettu pudotusvalikko
  • Murupolku — linkkirivi, joka näyttää sivun sijainnin sivustolla, kuten Etusivu / Tuotteet / Luokka

Muutettavat ominaisuudet

Kaikkiin komponenttityyppeihin sovelletaan viittä tyyliominaisuutta:

  • Tekstin väri — valkoinen, musta, harmaa, sininen, punainen tai vihreä
  • Taustaväri — ei mitään, valkoinen, vaaleanharmaa, sininen, punainen tai vihreä
  • Sisämarginaali (sisäinen välistys) — ei mitään, pieni, keskikokoinen, suuri tai painikkeen oletusarvo
  • Reunuksen säde (kulmien pyöristys) — ei mitään, pieni, keskikokoinen, suuri tai täysin pyöristetty
  • Leveys — automaattinen, täysi, puolet, kolmasosa tai neljäsosa

Jotkin ominaisuudet näkyvät vain tietyillä komponenttityypeillä: painikkeen teksti, tekstikentän tai tekstialueen paikkamerkkiteksti, tekstialueen rivimäärä, valintaluettelon vaihtoehtoluettelo sekä luettelo murupolun kohteista. Tekstikentissä, tekstialueissa ja valintaluetteloissa on myös ”pakollinen”- ja ”pois käytöstä” -valintaruudut; painikkeissa on lisäksi ”pois käytöstä” -valintaruutu.

Neljä ominaisuutta on kiinteitä, eikä niitä voi muuttaa käyttöliittymän kautta: marginaali (aina m-0), reunatyyli (aina border border-transparent), fonttikoko (aina text-base) ja fontin lihavuus (aina font-medium). Jokainen luotu komponentti sisältää nämä samat neljä luokkaa. Jos marginaalia, reunaa tai fonttikokoa halutaan muuttaa, kopioitua koodia on muokattava käsin.

Luotavan luokkaluettelon muodostaminen

Työkalu muodostaa kunkin komponentin Tailwind-luokkamerkkijonon kiinteässä järjestyksessä:

  1. Tekstin värin luokka, jos väri on määritetty
  2. Taustavärin luokka, jos väri on määritetty
  3. Sisämarginaalin, marginaalin, reunan ja reunojen pyöristyksen luokat
  4. Leveyden luokka, paitsi jos leveydeksi on määritetty ”automaattinen”
  5. Kiinteät fonttikoon ja fontin lihavuuden luokat
  6. Vuorovaikutustilojen (hover, focus, active) luokat, jotka vaihtelevat komponenttityypin mukaan
  7. Pois käytöstä -tilan luokat, jos ”pois käytöstä” on valittu

Painikkeet saavat luokat hover:bg-opacity-90, focus:ring-2, focus:ring-offset-2 ja focus:ring-blue-500. Painike, joka ei ole pois käytöstä, saa lisäksi luokan cursor-pointer. Tekstikentät, tekstialueet ja valintaluettelot saavat sen sijaan luokat focus:outline-none, focus:ring-2, focus:ring-blue-500 ja focus:border-blue-500. Murupolut eivät saa mitään näistä vuorovaikutusluokista, eikä pois käytöstä -tila koske koskaan murupolkua, koska navigointiluetteloa ei voi poistaa käytöstä.

Esimerkki: painike

Oletusasetuksilla (valkoinen teksti, sininen tausta (sävy 500), keskikokoinen sisämarginaali ja pyöristetyt kulmat) työkalu tuottaa seuraavan:

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

Esimerkki: tekstikenttä

Kun tekstin väri on harmaa, tausta valkoinen, sisämarginaali pieni, reunojen pyöristys suuri, leveys täysi ja ”pakollinen” valittuna:

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

Esimerkki: tekstialue ja valintaluettelo

Tekstialueet ja valintaluettelot noudattavat samaa luokkien muodostussääntöä kuin tekstikentät. Tekstialue, jossa on musta teksti, keskikokoinen sisämarginaali, keskikokoinen reunojen pyöristys, täysi leveys ja 4 riviä:

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

Valintaluettelo, jossa on samat värit ja välistys kuin edellä olevassa tekstikenttäesimerkissä sekä kolme vaihtoehtoa:

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

Esimerkki: murupolku

Murupolun linkit ja erottimet käyttävät aina kiinteitä luokkia (linkeissä hover:text-blue-600 ja ”/”-erottimessa mx-2 text-gray-400). Vain ulompi luettelo saa viisi yhteistä tyyliominaisuutta. Kun tekstin väri on harmaa eikä sisämarginaalia tai reunojen pyöristystä ole:

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

Responsiivinen esikatselu ja responsiiviset luokat

Työkalussa on ”Responsiivinen näkymä” -valitsin, jossa on kolme vaihtoehtoa: mobiili, tabletti ja työpöytä. Vaihtoehdon vaihtaminen muuttaa vain esikatseluruudun leveyttä, jotta käyttäjä voi nähdä suunnilleen, miltä komponentti näyttäisi kapeammalla näytöllä. Se ei lisää luotuun koodiin Tailwindin murtopiste-etuliitteitä, kuten sm:, md:, lg: tai xl:. JSX-tuloste on sama riippumatta valitusta responsiivisesta näkymästä. Jos komponentin on näytettävä erilaiselta eri näyttöleveyksillä, nämä murtopisteluokat on lisättävä kopioituun koodiin käsin.

Tailwind CSS:n lisääminen React-projektiin

  1. Asenna paketit: npm install -D tailwindcss postcss autoprefixer
  2. Määritä asetustiedostot: npx tailwindcss init -p
  3. Luettele projektin lähdetiedostot tailwind.config.js-tiedostossa kohdassa content
  4. Lisää kolme Tailwind-määritettä pääasialliseen CSS-tiedostoon: @tailwind base; @tailwind components; @tailwind utilities;
  5. Liitä luotu komponentti React-tiedostoon

Usein kysyttyä

Mitä React Tailwind -komponenttien rakennustyökalu tekee? Se luo tyylitellyn React-komponentin ja sitä vastaavat Tailwind CSS -luokat sekä näyttää reaaliaikaisen esikatselun, kun käyttäjä säätää asetuksia.

Lisääkö työkalu responsiiviset murtopisteluokat, kuten sm: tai md:, automaattisesti? Ei. Mobiili/tabletti/työpöytä-säädin muuttaa vain esikatseluruudun kokoa. Viedyssä koodissa ei ole luokkia sm:, md:, lg: tai xl:; ne on tarvittaessa lisättävä käsin.

Voinko muuttaa marginaalia, reunatyyliä tai fonttikokoa? Et käyttöliittymän kautta. Jokainen luotu komponentti käyttää samaa kiinteää marginaalia (m-0), reunaa (border border-transparent), fonttikokoa (text-base) ja fontin lihavuutta (font-medium). Muuta niitä muokkaamalla kopioitua koodia suoraan.

Tallentaako työkalu komponenttini? Ei. Tallennustoimintoa ei ole. Kopioi luotu koodi ja tallenna se projektin omiin tiedostoihin.

Luoko työkalu TypeScript-koodia? Työkalu tuottaa JSX:ää (JavaScript-syntaksia). Tuloste on tavallista JSX-merkintää, joten sen voi liittää .tsx-tiedostoon ilman muutoksia, mutta tyyppimäärityksiä ei luoda.

Onko työkalun käyttö ilmaista? Kyllä. Se toimii kokonaan selaimessa ilman käyttäjätiliä, eikä palvelimelle lähetetä mitään pyyntöä.

Toimiiko se Next.js:n, Gatsbyn tai muiden React-kehysten kanssa? Kyllä. Luotu koodi on tavallista JSX:ää Tailwind-luokkineen, joten se toimii kaikissa React-pohjaisissa kehyksissä, joissa Tailwind CSS on määritetty.