Jakie macie lub znacie sposoby na lepszą organizację klas zamiast bezpośrednio w DOM w className?
W jednym z projektów wyciągnąłem klasy do czegoś takiego:
const cls = {
container: "...",
text: "..."
}
I później w DOM'ie można było użyć className={cls.container} z tym że traciłem wtedy wszystkie ficzery związane z podpowiadaniem kodu i sortowaniem klas.
#tailwindcss #frontend #react #angular #vue #programowanie
@Fanatyk_Wedkarstwa Nie nie. To jest zupełnie coś innego. Ja mówię o TailwindCSS
Lekkim ułatwieniem może być użycie clsx i grupowanie klas po typie np. rozmiar, tekst, wygląd, ale dalej nie będzie to super poprawa.
A może masz dyrektywa @apply z tailwinda?
@Melonusk Okej, w takim razie sorki
@Magiczny_Magik To prawda Szymon. Też używam i grupuję sobie według "widzimisie"
@devoxik Użycie tej dyrektywy zaprzecza trochę samej koncepcji Tailwinda + nie da się jej użyć w samym komponencie (trzeba to robić w css/scss). Klasy zawarte po @apply są po prostu destrukturyzowane do klasy css w której chcesz ich użyć więc de facto powstaje nowy, dodatkowy kod CSS i klasy TW nie są używane
@Melonusk https://github.com/ben-rogerson/twin.macro pozwala na połączenie Tailwinda ze styled-components, emotion i innymi bibliotekami.
Dzięki temu używając Tailwinda możesz tworzyć ostylowane komponenty i po prostu je importować z innego pliku zamiast zaśmiecać DOM długimi className'ami. Jeśli chcesz nadal możesz używać Tailwinda w DOM, tylko zamiast w className umieszczasz go w atrybucie "tw", więc przy istniejącym projekcie trochę trzeba zrobić w ramach migracji.
Dopiero wczoraj odkryłem tę bibliotekę, bo tak jak ty chciałem uporządkować trochę DOM bez porzucania Tailwinda, więc jeszcze nie wiem czy jest coś lepszego i jakie potencjalne problemy mogą wyjść przy używaniu tego. W readme są przykładowe projekty w różnych technologiach, więc można szybko sprawdzić i się pobawić.
@Kamil.js Cirkawe rozwiązanie, sprawdze na pewno chociaż mam awersję do styled components z powodu częstych problemów z typowaniem
@Kamil.js Stosowałem i efekt będzie taki sam jak stosowanie @apply, czyli odpada.
Zaloguj się aby komentować