unocss

UnoCSS instant atomic CSS engine, superset of Tailwind CSS. Use when configuring UnoCSS, writing utility rules, shortcuts, or working with presets like Wind, Icons, Attributify.

1. Zanim zaczniesz pisać kod UnoCSS, sprawdź katalog główny projektu – szukaj pliku uno.config.* lub unocss.config.*. Ten plik mówi Ci, które presety są dostępne i jakie reguły są już skonfigurowane. Jeśli projekt nie ma jasnej konfiguracji, przejdź do kroku 2.

2. Jeśli plik konfiguracyjny istnieje, przeczytaj go, aby zrozumieć dostępne presety (np. Wind dla Tailwind-like klas, Icons dla ikon, Attributify dla atrybutów HTML). To określi, jak będziesz pisać style.

3. Zacznij od podstawowych klas CSS – jeśli znasz Tailwind, składnia będzie podobna. Dodawaj klasy do atrybutu class w HTML. Unikaj zaawansowanych funkcji takich jak tryb attributify, jeśli nie jesteś pewny konfiguracji projektu.

4. Jeśli chcesz tworzyć własne utility rules, otwórz plik konfiguracyjny i dodaj sekcję rules. Każda reguła mapuje nazwę klasy na właściwości CSS – na przykład ['m-\\d+', ([, num]) => ({ margin: ${num}px })] tworzy klasy typu m-10, m-20.

5. Aby połączyć wiele reguł w jedną klasę, użyj shortcuts. Na przykład shortcuts: { 'btn': 'px-4 py-2 rounded bg-blue-500' } pozwala pisać class="btn" zamiast powtarzać wszystkie klasy.

6. Jeśli potrzebujesz wariantów (hover, dark mode, responsive), zdefiniuj je w sekcji variants konfiguracji. UnoCSS obsługuje warianty takie jak hover:, dark: i media queries – możesz je stosować do swoich reguł i shortcutów.