# Change the order (and names) of properties in the property panel?

**URL:** <https://forum.pinegrow.com/t/change-the-order-and-names-of-properties-in-the-property-panel/6461>\
**Category:** Questions\
**Created:** [April 4, 2022, 3:20am UTC](https://forum.pinegrow.com/t/change-the-order-and-names-of-properties-in-the-property-panel/6461 "2022-04-04T03:20:12Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![JoseFR](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/josefr/32/296_2.png) [@JoseFR](https://forum.pinegrow.com/u/JoseFR)\
**Post date:** [April 4, 2022, 3:20am UTC](https://forum.pinegrow.com/t/change-the-order-and-names-of-properties-in-the-property-panel/6461/1 "2022-04-04T03:20:12Z")

</div>

Hello,

Is it possible to change the order (and names) of properties in the property panel?

The order of properties, sometimes not very logical

![grid](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/8/824589f72f23bbdbf16088814f3614f7b881d62c.png)

Thank you for your reply

---

<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:** [April 4, 2022, 9:15am UTC](https://forum.pinegrow.com/t/change-the-order-and-names-of-properties-in-the-property-panel/6461/3 "2022-04-04T09:15:47Z")

</div>

Hi @JoseFR,  
No, changing the order of controls in the panel isn’t possible.  
Cheers,  
Bob

---

<div class="post-metadata">

**Author:** ![JoseFR](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/josefr/32/296_2.png) [@JoseFR](https://forum.pinegrow.com/u/JoseFR)\
**Post date:** [April 6, 2022, 12:37pm UTC](https://forum.pinegrow.com/t/change-the-order-and-names-of-properties-in-the-property-panel/6461/4 "2022-04-06T12:37:04Z")

</div>

Another question @RobM :  
In Tailwind CSS v3, how to configure: for the `extend:` configurations of the `tailwind.config.js`, are added in the Pinegrow “properties panel” ?  
the “design panel” is far too limited  
Because I got this message:

 ![tyty](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/8/84001044ae67c4d16073cb6f9ce3dca614ee42a2.png)

---

<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:** [April 6, 2022, 1:54pm UTC](https://forum.pinegrow.com/t/change-the-order-and-names-of-properties-in-the-property-panel/6461/5 "2022-04-06T13:54:20Z")

</div>

Hi @JoseFR,  
You can still extend your Tailwind CSS project through the config file and external build. However, you can’t bring the extended controls into the Tailwind Properties panel. You will have to add the classes of any extended properties manually.  
Hope this helps,  
Bob

---

<div class="post-metadata">

**Author:** ![JoseFR](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/josefr/32/296_2.png) [@JoseFR](https://forum.pinegrow.com/u/JoseFR)\
**Post date:** [April 6, 2022, 4:03pm UTC](https://forum.pinegrow.com/t/change-the-order-and-names-of-properties-in-the-property-panel/6461/6 "2022-04-06T16:03:09Z")

</div>

> [@RobM](#):
>
> You will have to add the classes of any extended properties manually.

What do you mean by that?

It’s very limited: if: the configuration file, the source CSS, the output CSS are not scanned, it’s not interesting :(, the concept of utility first is precisely to have everything in utility classes (including my classes)

---

<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:** [April 6, 2022, 6:44pm UTC](https://forum.pinegrow.com/t/change-the-order-and-names-of-properties-in-the-property-panel/6461/7 "2022-04-06T18:44:25Z")

</div>

Hi @JoseFR,  
I’m not sure I fully understand your response, but I’ll try to clarify mine.  
So, with Tailwind CSS v2 you could add to your `theme.extend` section of your configuration file. You could then click on the wrench icon at the top of the Tailwind CSS properties panel - located here on the right:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/1/15fc34cd503340ab431f872748776ffaeba77ade.png)  
This would scan the CSS file and detect any additional rules and add them to the correct dropdown. So the example used in our tutorials is to add a new box-shadow in to the config file:  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/b/bd6ae895c2bc3b47a4e13e81b494d13f089df853.png)  
If you then rebuilt the controls by clicking the wrench it would add “rainbow” into the box shadow controls. Tailwind updated how the compiler works in version 3 and now it isn’t possible to add unused rules to the controls. So now, you have to manually add the `shadow-rainbow` class to your element. All of the standard Tailwind classes can still be accessed from the Properties panel. Only extra classes added through the Design Panel will be available in the visual controls of the Properties panel.  
I hope this makes more sense,  
Bob

---

<div class="post-metadata">

**Author:** ![JoseFR](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/josefr/32/296_2.png) [@JoseFR](https://forum.pinegrow.com/u/JoseFR)\
**Post date:** [April 7, 2022, 12:53am UTC](https://forum.pinegrow.com/t/change-the-order-and-names-of-properties-in-the-property-panel/6461/8 "2022-04-07T00:53:15Z")

</div>

OK @RobM what you explained is exactly what I understood ☹

With Tailwind CSS v3, custom configurations are not usable in Pinegrow’s “property panel” ☹

Why not use a prompt where you provide the path to the `tailwind.config.js` file and then just read the JavaScript for “property panel”, it’s a standard format 🙂
