Tailwind Leikkikenttä
Kirjoita HTML:ää Tailwind CSS v4 -apuluokilla ja käännä live selaimessa.
Mikä on Tailwind Leikkikenttä?
Ilmainen selaimessa toimiva editori, jossa kirjoitat HTML:ää Tailwind CSS v4 -apuluokilla ja näet käännetyn tuloksen live-esikatselussa. Virallinen Tailwind v4 -selainkääntäjä on sisäänrakennettu sivuun, mitään ei tarvitse asentaa.
Ladataanko koodini jonnekin?
Ei. Kääntäminen tapahtuu kokonaan selaimessasi paikallisesti paketoidulla Tailwind-moottorilla. HTML:si ei koskaan lähde sivulta, ja luonnokset tallentuvat vain selaimen localStorageen.
Mitä Tailwind-versiota käytetään?
Tailwind CSS v4:ää, uusinta pääversiota, virallisen @tailwindcss/browser-kääntäjän kautta. Kaikki ydinapuluokat, variaatiot ja oletusteema toimivat, myös hakasulkeissa annetut vapaat arvot.
Miten live-esikatselu toimii?
HTML:si syötetään eristettyyn iframeen yhdessä kääntäjän kanssa. Jokaisen muokkauksen jälkeen apuluokat käännetään uudelleen 500 millisekunnin tauon jälkeen, joten kirjoittaminen pysyy sulavana ja esikatselu ajan tasalla.
Miten kokeen tummia tyylejä?
Kytke «Tumma esikatselu» -kytkin päälle. Se lisää dark-luokan esikatseluasiakirjaan, ja kääntäjä sidotaan dark:-variaation tuohon luokkaan, joten apuluokat kuten dark:bg-slate-900 reagoivat heti.
Näenkö Tailwindin tuottaman CSS:n?
Kyllä. Editorien alla oleva «Käännetty CSS» -paneeli näyttää täsmälleen sen tyylisivun, jonka kääntäjä loi merkinnöistäsi, ja «Kopioi CSS» -painike kopioi sen leikepöydälle.
Mitä ladattu HTML sisältää?
Lataa HTML -painike luo itsenäisen tiedoston, jossa on merkintäsi sekä käännetty CSS upotettuna head-osaan. Sivu hahmottuu oikein offline ilman CDN-linkkejä ja ilman verkkoyhteyttä.
Onko aloituspohjia?
On. Mallipohjavalitsin tarjoaa hero-osion, responsiivisen korttiruudukon ja kolmitasoisen hintataulukon – kaikki tuoreilla v4-apuluokilla – sekä minimaalisen tyhjän lähtökohdan.
Näin käytät työkalua Tailwind Leikkikenttä
Tämä leikkikenttä ajtaa Tailwind CSS v4:n virallisen selainkääntäjän kokonaan koneellasi. Kirjoitat vasemmalla yksinkertaista HTML:ää apuluokkineen, kääntäjä tuottaa vastaavan CSS:n eristetyssä esikatselu-iframe:ssä, ja alapuolella oleva paneeli näyttää täsmälleen tuotetun tyylisivun. Mitään ei lähetetä verkkoon: kääntäjä, merkintäsi ja luonnoksesi pysyvät kaikki selaimessa.
- Valitse lähtöpiste Mallipohja-valitsimesta: Hero, korttiruudukko, hintataulukko tai Tyhjä; tekstisi palautuu automaattisesti myös käyntien välillä.
- Muokkaa HTML:ää vasemmanpuoleisessa editorissa. Tab-näppäin lisää kaksi välilyöntiä, ja esikatselu kääntyy uudelleen noin 500 ms sen jälkeen, kun lopetat kirjoittamisen.
- Vaihda Pehmeä rivitys rivinvaihtojen ohjaamiseen, ja kirjasinkokovalitsin asettaa editorin tekstikoon.
- Kytke Tumma esikatselu päälle lisätäksesi "dark"-luokan esikatseluasiakirjaan; apuluokat kuten dark:bg-slate-900 reagoivat välittömästi.
- Lue tuotetut säännöt Käännetty CSS -paneelista ja kopioi ne Kopioi CSS -painikkeella tarvittaessa.
- Käytä Kopioi HTML raakamerkintään, tai Lataa HTML saadaksesi itsenäisen tiedoston upotettuna käännettyine tyyleineen, valmiina avattavaksi offline.
Latauksessa on oikeita tyylejä vasta vähintään yhden käännöksen jälkeen, joten anna esikatselun renderöityä kerran ennen vientiä. Pienentääksesi tuotettua CSS:ää poista mallipohjasta käyttämättömät elementit — paneeli heijastaa aina täsmälleen sen, mitä nykyinen merkintäsi tarvitsee.
Aiheeseen liittyvät työkalut
- Koodileikkikenttä Verkko-HTML-, CSS- ja JavaScript-leikkipaikka live-esikatselulla, rivinumeroisella editorilla ja tallennetulla konsolilla. Testaa koodinpätkiä heti ja lataa tulos yhtenä HTML-tiedostona - kokonaan selaimessasi.
- CSS Grid-generaattori Ilmainen visuaalinen CSS Grid-generaattori live-esikatselulla. Suunnittele responsiivisia grid-asetteluja interaktiivisesti ja vie tuotantovalmis CSS-koodi heti.
- Chmod-laskin Ilmainen online chmod-laskin Linux-tiedostooikeuksien visualisointiin ja laskentaan valintaruuduilla. Muunna heti numeerisen (755, 644) ja symbolisen merkintätavan (rwxr-xr-x) välillä. Tukee erikoisoikeuksia kuten setuid, setgid, sticky bit.
- ASCII-taulukko Täydellinen ASCII-merkkikoodausviite desimaali-, heksadesimaali-, oktaali-, binäärikoodeilla, HTML-entiteeteillä ja merkinkuvauksilla. Välitön haku ja suodatus.
- HTTP-pyyntö Testaaja Testaa REST API:ja suoraan selaimessasi. Lähetä GET-, POST-, PUT-, DELETE-pyyntöjä mukautetuilla otsikoilla, rungolla ja parametreilla. Näe vastauksen tila, otsikot ja JSON-runko heti.
- .htaccess-generaattori Luo Apache .htaccess-sääntöjä uudelleenohjauksille, uudelleenkirjoituksille, turvallisuusotsikoille, välimuistille ja muulle.
- Robots.txt Generaattori Ilmainen online robots.txt generaattori. Luo ja mukauta robots.txt-tiedostoja hallitaksesi hakukoneiden indeksointia, hallitaksesi indeksoijien pääsyä ja optimoidaksesi sivustosi SEO.
- Sivustokartta Generaattori Ilmainen online XML sivustokartta generaattori. Lisää URL-osoitteita, aseta prioriteetit ja luo SEO-sivustokarttoja heti.