Plac Zabaw Tailwind
Pisz HTML z klasami Tailwind CSS v4 i kompiluj na żywo w przeglądarce.
Czym jest Plac Zabaw Tailwind?
To darmowy edytor w przeglądarce, w którym piszesz HTML z klasami narzędziowymi Tailwind CSS v4 i widzisz skompilowany wynik w podglądzie na żywo. Oficjalny kompilator Tailwind v4 dla przeglądarek jest wbudowany w stronę, niczego nie trzeba instalować.
Czy mój kod jest gdzieś wysyłany?
Nie. Kompilacja odbywa się w całości w Twojej przeglądarce na lokalnie spakowanej kopii silnika Tailwind. Twój HTML nigdy nie opuszcza strony, a szkice są przechowywane wyłącznie w localStorage przeglądarki.
Której wersji Tailwind używa narzędzie?
Tailwind CSS v4, najnowszej wersji głównej, za pośrednictwem oficjalnego kompilatora @tailwindcss/browser. Działają wszystkie podstawowe klasy, warianty i motyw domyślny, w tym dowolne wartości w nawiasach kwadratowych.
Jak działa podgląd na żywo?
Twój HTML jest wstrzykiwany do izolowanej ramki iframe razem z kompilatorem. Po każdej edycji klasy są ponownie kompilowane po pauzie 500 milisekund, więc pisanie pozostaje płynne, a podgląd aktualny.
Jak przetestować style trybu ciemnego?
Włącz przełącznik „Ciemny podgląd”. Dodaje on klasę "dark" do dokumentu podglądu, a kompilator wiąże wariant dark: z tą klasą, więc klasy takie jak dark:bg-slate-900 reagują natychmiast.
Czy mogę zobaczyć CSS generowany przez Tailwind?
Tak. Panel „Skompilowany CSS” pod edytorami pokazuje dokładnie arkusz stylów wygenerowany dla Twojego znaczników, a przycisk „Kopiuj CSS” kopiuje go do schowka.
Co zawiera pobrany plik HTML?
Przycisk Pobierz HTML tworzy samodzielny plik z Twoim znacznikami oraz wbudowanym w head skompilowanym CSS, więc strona renderuje się poprawnie offline, bez linków CDN i bez internetu.
Czy są szablony startowe?
Tak. Selektor szablonów oferuje sekcję hero, siatkę kart responsywnych i cennik z trzema poziomami — wszystko na aktualnych klasach v4 — oraz minimalny pusty punkt startowy.
Jak korzystać z Plac Zabaw Tailwind
Ten plac zabaw uruchamia w całości na Twojej maszynie oficjalny kompilator przeglądarkowy Tailwind CSS v4. Po lewej wpisujesz zwykły HTML z klasami narzędziowymi, kompilator generuje pasujący CSS w odizolowanej ramce podglądu, a panel pod spodem pokazuje dokładnie powstały arkusz stylów. Nic nie jest wysyłane: kompilator, Twoje znaczniki i szkice zostają w przeglądarce.
- Wybierz punkt startowy w selektorze Szablon: Hero, siatka kart, cennik lub Pusty; Twój tekst jest też automatycznie przywracany między wizytami.
- Edytuj HTML w edytorze po lewej. Wciśnięcie Tab wstawia dwie spacje, a podgląd kompiluje się ponownie około 500 ms po zaprzestaniu pisania.
- Przełącz Miękkie zawijanie, by sterować łamaniem wierszy, oraz selektor rozmiaru czcionki, by ustawić rozmiar tekstu edytora.
- Włącz Ciemny podgląd, aby dodać klasę "dark" do dokumentu podglądu; narzędzia takie jak dark:bg-slate-900 reagują natychmiast.
- Czytaj wygenerowane reguły w panelu Skompilowane CSS i kopiuj je przyciskiem Kopiuj CSS, gdy ich potrzebujesz.
- Użyj Kopiuj HTML dla surowych znaczników albo Pobierz HTML, by dostać samodzielny plik z wbudowanym skompilowanym CSS, gotowy do otwarcia offline.
Pobieranie zawiera prawdziwe style dopiero po co najmniej jednej kompilacji, więc pozwól podglądowi wyrenderować się raz przed eksportem. Aby zmniejszyć generowane CSS, usuń z szablonu nieużywane elementy — panel zawsze odzwierciedla dokładnie to, czego potrzebuje Twój bieżący znacznik.
Powiązane narzędzia
- Plac zabaw dla kodu Online plac zabaw HTML, CSS i JavaScript z podglądem na żywo, edytorem z numerami linii i przechwyconą konsolą. Testuj fragmenty natychmiast i pobierz wynik jako jeden plik HTML - w całości w przeglądarce.
- Generator CSS Grid Darmowy wizualny generator CSS Grid z podglądem na żywo. Interaktywnie projektuj responsywne układy siatki i eksportuj gotowy kod CSS.
- Kalkulator Chmod Darmowy kalkulator chmod online do wizualizacji i obliczania uprawnień plików Linux za pomocą pól wyboru. Natychmiastowa konwersja między notacją liczbową (755, 644) a symboliczną (rwxr-xr-x). Obsługuje specjalne uprawnienia jak setuid, setgid, sticky bit.
- Tabela ASCII Kompletna referencja kodowania znaków ASCII z kodami dziesiętnymi, szesnastkowymi, ósemkowymi, binarnymi, encjami HTML i opisami znaków. Natychmiastowe wyszukiwanie i filtrowanie.
- Tester Żądań HTTP Testuj API REST bezpośrednio w przeglądarce. Wysyłaj żądania GET, POST, PUT, DELETE z niestandardowymi nagłówkami, ciałem i parametrami. Natychmiast widz status, nagłówki i ciało JSON odpowiedzi.
- Generator .htaccess Generuj reguły .htaccess Apache dla przekierowań, przepisań, nagłówków bezpieczeństwa, buforowania i więcej.
- Generator Robots.txt Darmowy generator robots.txt online. Twórz i dostosowuj pliki robots.txt, aby kontrolować skanowanie przez wyszukiwarki, zarządzać dostępem robotów i optymalizować SEO swojej witryny.
- Generator Sitemap Darmowy generator sitemap XML online. Dodawaj URL, ustawiaj priorytety i częstotliwości, twórz sitemapy SEO natychmiast.