Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug: How to use 3rd party classes in custom named classes? #52

Open
MaskyS opened this issue Mar 7, 2021 · 1 comment
Open

Bug: How to use 3rd party classes in custom named classes? #52

MaskyS opened this issue Mar 7, 2021 · 1 comment
Labels

Comments

@MaskyS
Copy link

MaskyS commented Mar 7, 2021

Hi @Jarzka, thanks for creating stylefy! I've been trying it out and very impressed so far.

I was trying to throw in some 3rd party classes in a custom named class with stylefy, but I can't get it to work:

(stylefy/class "big-text"
               {:transition "background-color 1s"
                ::stylefy/with-classes ["p-4 text-center rounded-lg"]})
(defn simple-example []
  [:main
   [:h1.flex.space-x-2
    [:div.flex-1.bg-red-200.big-text  "hello"]
    [:div.flex-2.bg-green-200.big-text  "the"]]])

It does work when I just use 3rd party classes though. Can you help me figure out what I am/stylefy is doing wrong?

@Jarzka
Copy link
Owner

Jarzka commented Mar 7, 2021

Hi

Unfortunately ::stylefy/with-classes is not supported in style map created via stylefy/class. It only works when a style map is used via stylefy/use-style. So in this case, you need to include p-4 text-center rounded-lg classes manually with big-text class

[:div.flex-1.bg-red-200.big-text.p-4.text-center.rounded-lg "hello"]

Or perhaps create a helper function which returns all these class names if they are commonly used together?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants