daisyUI zamienia długie klasy Tailwind CSS w przejrzyste komponenty
Każdy, kto budował interfejsy z Tailwind CSS, zna ten ból. Otwierasz plik z markupem, a zwykły przycisk zajmuje cztery linie kodu. Dziesiątki klas: padding, zaokrąglenie rogów, tła, stany hover, stany focus i aktywne stany naciśnięcia.
Z jednej strony, ten pragmatyczny sposób daje pełną kontrolę nad stylami. Z drugiej strony, czytanie takiego markupu kilka miesięcy później jest bolesnie trudne.
Biblioteka daisyUI rozwiązuje dokładnie ten problem. Przywraca znajome semantyczne klasy jak btn, card lub modal do Tailwind, zachowując przy tym elastyczność konfiguracji.
Co pod maską
Projekt został stworzony i jest rozwijany przez developera Pouya Saadeghi. Repozytorium ma już ponad 42 tysiące gwiazdek na GitHub. Obecnie biblioteka jest aktywnie rozwijana w kierunku piątej głównej wersji.
Zasadniczo daisyUI działa jako wtyczka do Tailwind CSS. Główna cecha jest taka, że pod spodem nie ma żadnego JavaScriptu. To czysty CSS. Dzięki temu komponenty są łatwe do integracji w dowolnym miejscu: w React, Vue, Svelte, Angular czy zwykłych szablonach serwerowych z Django, Laravel i Go.
Jeśli potrzebujesz dropdowna lub okna modalnego, działają na natywnych elementach HTML <dialog> i <details> lub przez selektory CSS. Logikę zarządzania stanem piszesz sam, używając dowolnego stacka, którego już używasz w projekcie.
Czym daisyUI różni się od innych bibliotek UI
Porównajmy markup zwykłego przycisku. W czystym Tailwind, podstawowy niebieski przycisk wymaga napisania długiego łańcucha:
<button class="inline-flex items-center justify-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
Сохранить
</button>
W daisyUI ten sam efekt osiąga się znacznie bardziej zwięźle:
<button class="btn btn-primary">
Сохранить
</button>
Jednocześnie nic nie przeszkadza w selektywnym nadpisaniu dowolnego parametru za pomocą znajomej klasy użytkowej Tailwind. Chcesz, żeby przycisk był trochę szerszy lub zresetować cień? Po prostu dodaj w-full lub shadow-none bezpośrednio do atrybutu class.
Główne funkcje
Biblioteka oferuje kilka fajnych rzeczy od razu po wyjęciu z pudełka.
Gotowe semantyczne komponenty. Katalog zawiera około pięćdziesięciu gotowych elementów: tabele, badge'y, paginację, akordeony, breadcrumbsy i formularze. Markup pozostaje czysty, a tworzenie layoutu przyspiesza.
Wbudowany system motywów. Projekt ma ponad 30 wbudowanych motywów projektowych, w tym ciemny, jasny, retro i cyberpunk. Przełączanie motywów jest tak proste jak ustawienie jednego atrybutu HTML:
<html data-theme="dark">
Możesz skonfigurować własną paletę kolorów przez zmienne CSS w pliku konfiguracyjnym, bez przepisywania stylów każdego pojedynczego elementu.
Oszczędność rozmiaru bundle'a. Ponieważ to wtyczka do Tailwind, bundler usuwa wszystkie nieużywane selektory. Tylko ten CSS, który faktycznie pojawia się w twoich szablonach, trafia do produkcji.
Gdzie biblioteka sprawdza się najlepiej
daisyUI przydaje się w kilku scenariuszach:
- Szybkie prototypowanie i MVP. Gdy musisz złożyć działający panel administracyjny lub interfejs konta osobistego w parę wieczorów, nie spędzając godzin na wyrównywaniu każdego pola formularza.
- Projekty z renderowaniem po stronie serwera i HTMX. Ponieważ nie wymaga runtime JS, komponenty idealnie pasują do aplikacji monolitycznych z Go, Pythonem lub Ruby.
- Projekty hobbystyczne. Świetny sposób na uzyskanie schludnego designu bez zatrudniania projektanta.
Łyżka dziegciu
Jeśli pracujesz nad projektem ze złożonymi, unikalnymi makietami projektowymi ze studia, domyślne style daisyUI mogą przeszkadzać. Będziesz ciągle nadpisywać bazowe zaokrąglenia rogów czy wewnętrzne paddingi komponentów. W takich sytuacjach łatwiej jest pisać w czystym Tailwind lub używać headless bibliotek jak Radix UI czy Headless UI.
daisyUI osiąga dobry balans między szybkością budowania interfejsu a czystością markupu. Jeśli podoba ci się koncepcja Tailwind, ale frustrują cię nieskończone strumienie klas użytkowych w kodzie, projekt zdecydowanie warto przetestować w następnym projekcie hobbystycznym lub panelu administracyjnym.
Instalacja zajmuje parę minut przez npm i -D daisyui@latest, po czym wtyczka jest po prostu dodawana do konfiguracji stylów.
Powiązane projekty