Wpis użytkownika Melonusk w Programowanie

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

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

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

@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

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

@Melonusk Okej, w takim razie sorki

A może masz dyrektywa @apply z tailwinda?

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.

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

@Melonusk To się chyba nazywa styled components https://styled-components.com/

styled-componentsVisual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅🏾styled-components