unocss

UnoCSS to szybki generator atomowych klas CSS, który daje Ci pełną kontrolę nad stylami. W przeciwieństwie do sztywnych frameworków, tutaj wszystkie narzędzia pochodzą z presetów – możesz używać gotowych (Wind, Icons, Attributify) lub tworzyć własne. Znasz Tailwind? Syntaksa będzie Ci znajoma. Potrzebujesz czegoś bardziej zaawansowanego? Skonfiguruj własne reguły, skróty i warianty. Skill pomaga Ci pisać konfigurację, definiować utility rules, tworzyć shortcuts i pracować z presetami.

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.