How can I add Class to specify screen in tailwind visual editor?

Pinegrow Interactions Add-on
1

How can I add Class to specify screen in tailwind visual editor?
example: lg:block sm:hidden ?

2

You can do it from the Properties panel.

Choose the breakpoint and do the needful edit and it will be applied to that breakpoint.

Screen Shot 2020-07-22 at 4.50.34 PM
Screen Shot 2020-07-22 at 4.50.34 PM780×2066 93.4 KB

For your example:
Choose LG and go to Display and choose Block
Choose SM and got Display and choose Hidden

Let me know if that is not clear.

And Pinegrow is coming with a detailed tutorial for building a page with Tailwind addon. Keep checking our newsletter.

1 Like
3

@abirana

.c

Sorry to be off topic, but is the [.c] relative to something that is already found in the app or related to something yet to be released? Forgive me for asking but I don’t recall noticing that previously in app or the documentation. I see you have the tree detached, but I’m unfamiliar with what the [.c] is relative to?

1 Like
4

Hey no problem, happy to explain.

That actually comes with the new Tailwind Visual Editor to be used for Tailwind projects. It’s called Class Styles which allows you to create group of classes which can be applied to multiple elements.

1 Like
5

Ah ok that explains it then, thank you. (so it was relative to the topic ;–)

6

Hi, can I extracts my custom classes in Class Styles in separate a .css file ?

7

I don’t think you can do that. But Pinegrow will generate a projectdb.pgml file which has all the Class Styles defined.

But why would you need it extracted on a separate CSS file?

Ohhhh, if you are looking to re-use your Class Styles on other projects, then you can update this file for that project.

1 Like
8

Oh ya it was indeed :+1:

9

I created two css class : mobile menu open and mobile menu close and i need save this classes for implementation with javascript in front-end

10

hi Arman, I’ve checked the tailwind css recommendations and I can see the devs are using more and more alpine javascript framework to make their components functional. it’s very similar to vue but even more user friendly. I am going thru their docs at this moment to see what’s the best way to target the inline classes that tailwind produces. maybe you can check it for yourself until I dive deeper into it, but it looks easy to implement.

1 Like
11

Tailwind is just a list of classes. You can add or remove with standard JS.

const element = document.getElementById("my-menu");
element.classList.add("block", "lg:hidden", "other-class-here");
element.classList.remove("other-class");
1 Like
12

When targeting specific element with JS, it is best to use ID whenever possible. In another case you can also app data attributes and target using it.

And like @RobM mentioned, in Tailwind we apply its classes to our elements. Similar way we can remove them using JS. Instead of one class we may need to remove many.

But still if you feel the need to create your own classes, then you can create a separate CSS file for that and included in on the page.
By the way using Tailwind with build tools is a recommended way, for more custom work.

1 Like