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

**URL:** <https://forum.pinegrow.com/t/how-can-i-add-class-to-specify-screen-in-tailwind-visual-editor/4374>\
**Category:** Pinegrow Interactions Add-on\
**Created:** [July 22, 2020, 10:06am UTC](https://forum.pinegrow.com/t/how-can-i-add-class-to-specify-screen-in-tailwind-visual-editor/4374 "2020-07-22T10:06:00Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![arman](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/arman/32/2779_2.png) [@arman](https://forum.pinegrow.com/u/arman)\
**Post date:** [July 22, 2020, 10:06am UTC](https://forum.pinegrow.com/t/how-can-i-add-class-to-specify-screen-in-tailwind-visual-editor/4374/1 "2020-07-22T10:06:00Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![abirana](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/abirana/32/4162_2.png) [@abirana](https://forum.pinegrow.com/u/abirana)\
**Post date:** [July 22, 2020, 11:20am UTC](https://forum.pinegrow.com/t/how-can-i-add-class-to-specify-screen-in-tailwind-visual-editor/4374/2 "2020-07-22T11:20:11Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/1/176042476251df0a69e7e0558367738e94a4f37c.png)

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.

---

<div class="post-metadata">

**Author:** ![Pinegrow\_User](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/pinegrow_user/32/4919_2.png) [@Pinegrow\_User](https://forum.pinegrow.com/u/Pinegrow_User)\
**Post date:** [July 22, 2020, 1:25pm UTC](https://forum.pinegrow.com/t/how-can-i-add-class-to-specify-screen-in-tailwind-visual-editor/4374/3 "2020-07-22T13:25:43Z")

</div>

@abirana

![.c](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/b/b352c9c26f727a688d4aab4577f840fc3fe21411.png)

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?

---

<div class="post-metadata">

**Author:** ![abirana](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/abirana/32/4162_2.png) [@abirana](https://forum.pinegrow.com/u/abirana)\
**Post date:** [July 22, 2020, 1:52pm UTC](https://forum.pinegrow.com/t/how-can-i-add-class-to-specify-screen-in-tailwind-visual-editor/4374/4 "2020-07-22T13:52:32Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Pinegrow\_User](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/pinegrow_user/32/4919_2.png) [@Pinegrow\_User](https://forum.pinegrow.com/u/Pinegrow_User)\
**Post date:** [July 22, 2020, 1:53pm UTC](https://forum.pinegrow.com/t/how-can-i-add-class-to-specify-screen-in-tailwind-visual-editor/4374/5 "2020-07-22T13:53:29Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![arman](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/arman/32/2779_2.png) [@arman](https://forum.pinegrow.com/u/arman)\
**Post date:** [July 22, 2020, 2:07pm UTC](https://forum.pinegrow.com/t/how-can-i-add-class-to-specify-screen-in-tailwind-visual-editor/4374/6 "2020-07-22T14:07:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![abirana](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/abirana/32/4162_2.png) [@abirana](https://forum.pinegrow.com/u/abirana)\
**Post date:** [July 22, 2020, 6:54pm UTC](https://forum.pinegrow.com/t/how-can-i-add-class-to-specify-screen-in-tailwind-visual-editor/4374/7 "2020-07-22T18:54:34Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![abirana](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/abirana/32/4162_2.png) [@abirana](https://forum.pinegrow.com/u/abirana)\
**Post date:** [July 22, 2020, 6:57pm UTC](https://forum.pinegrow.com/t/how-can-i-add-class-to-specify-screen-in-tailwind-visual-editor/4374/8 "2020-07-22T18:57:55Z")

</div>

Oh ya it was indeed 👍

---

<div class="post-metadata">

**Author:** ![arman](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/arman/32/2779_2.png) [@arman](https://forum.pinegrow.com/u/arman)\
**Post date:** [July 23, 2020, 7:23am UTC](https://forum.pinegrow.com/t/how-can-i-add-class-to-specify-screen-in-tailwind-visual-editor/4374/9 "2020-07-23T07:23:15Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![zedbuza](https://avatars.discourse-cdn.com/v4/letter/z/bbce88/32.png) [@zedbuza](https://forum.pinegrow.com/u/zedbuza)\
**Post date:** [July 23, 2020, 9:07am UTC](https://forum.pinegrow.com/t/how-can-i-add-class-to-specify-screen-in-tailwind-visual-editor/4374/10 "2020-07-23T09:07:32Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [July 23, 2020, 9:52am UTC](https://forum.pinegrow.com/t/how-can-i-add-class-to-specify-screen-in-tailwind-visual-editor/4374/11 "2020-07-23T09:52:43Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![abirana](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/abirana/32/4162_2.png) [@abirana](https://forum.pinegrow.com/u/abirana)\
**Post date:** [July 23, 2020, 7:32pm UTC](https://forum.pinegrow.com/t/how-can-i-add-class-to-specify-screen-in-tailwind-visual-editor/4374/12 "2020-07-23T19:32:03Z")

</div>

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.