Hejto.pl
Hejto
/Wpisy
/Dyskusja
Melonusk
Debiutant
w Programowanie
TailwindCSS
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
10

Komentarze (10)

Melonusk

@Fanatyk_Wedkarstwa Nie nie. To jest zupełnie coś innego. Ja mówię o TailwindCSS

Magiczny_Magik

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.

devoxik

A może masz dyrektywa @apply z tailwinda?

Fanatyk_Wedkarstwa

@Melonusk Okej, w takim razie sorki

Melonusk

@Magiczny_Magik To prawda Szymon. Też używam i grupuję sobie według "widzimisie"

Melonusk

@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

Kamil.js

@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ć.

1e6bfae8-221d-475e-a3de-63bb2e85ea21
e2cbcdbb-3aaf-4981-9a8d-82019c24f330
Melonusk

@Kamil.js Cirkawe rozwiązanie, sprawdze na pewno chociaż mam awersję do styled components z powodu częstych problemów z typowaniem

Magiczny_Magik

@Kamil.js Stosowałem i efekt będzie taki sam jak stosowanie @apply, czyli odpada.

Zaloguj się aby komentować