Cześć!
Dzisiaj zajmiemy się własnymi klasami divów ułatwiającymi nam pracę z TailwindCSS.
Załóżmy sobie, ze mamy miniaturkę zdjęcia na jakimś blogu np.
Cała linijka dla tej miniaturki przykładowo wygląda tak:
<div class="relative flex items-end justify-start w-full text-left bg-center bg-cover h-96 dark:bg-gray-500 grayscale hover:grayscale-0 transition delay-150" style="background-image: url("https://source.unsplash.com/random/240x320");">...</div>
A teraz macie takich zdjęć np. 7 i za każdym razem musicie taki kod wklepywać.
Tutaj z pomocą przychodzi nam @apply, które wykorzystujemy w moim przypadku z app.css gdzie plik jest składany później do docelowego styles.css (poradnik na forum).
Do app.css dopisujemy sobie
.nazwa_klasy{
@apply relative flex items-end justify-start w-full text-left bg-center bg-cover h-96 dark:bg-gray-500 grayscale hover:grayscale-0 transition delay-150;
}
I teraz zamiast 7 czy więcej razy wklejać tą samą ilość zbędnego kodu wpisujemy:
<div class="nazwa_klasy" style="background-image: url('https://source.unsplash.com/random/240x320');">...</div>
Efekt końcowy jest taki sam jak na początku, ale z mniejszą ilością klas w jednym miejscu 🙂
