# Activating Tailwind CSS on Existing Project Isn't Working (solved)

**URL:** <https://forum.pinegrow.com/t/activating-tailwind-css-on-existing-project-isnt-working-solved/8822>\
**Category:** Beginners\
**Created:** [March 29, 2024, 2:58pm UTC](https://forum.pinegrow.com/t/activating-tailwind-css-on-existing-project-isnt-working-solved/8822 "2024-03-29T14:58:58Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![MageHD](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/magehd/32/6060_2.png) [@MageHD](https://forum.pinegrow.com/u/MageHD)\
**Post date:** [March 29, 2024, 2:58pm UTC](https://forum.pinegrow.com/t/activating-tailwind-css-on-existing-project-isnt-working-solved/8822/1 "2024-03-29T14:58:58Z")

</div>

Hello,  
I’m trying to activate Tailwind css on an existing project but I noticed that the Tailwind classes aren’t showing in the active panel when I select an element. I also noticed Pinegrow did not create the Tailwind theme folder. Did I select the wrong option when activating Tailwind?

 ![2024-03-29_10-56](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/1/10bfb030d746eb1385ab714eddf8de878b818782.jpeg)  
 ![2024-03-29_10-48](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/0/08eaf548bf66393816cb0d5ce1d860e19fbe2dc0.jpeg)

---

<div class="post-metadata">

**Author:** ![Cary](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/cary/32/6029_2.png) [@Cary](https://forum.pinegrow.com/u/Cary)\
**Post date:** [March 29, 2024, 11:25pm UTC](https://forum.pinegrow.com/t/activating-tailwind-css-on-existing-project-isnt-working-solved/8822/2 "2024-03-29T23:25:35Z")

</div>

Did you activate the Design panel?

---

<div class="post-metadata">

**Author:** ![MageHD](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/magehd/32/6060_2.png) [@MageHD](https://forum.pinegrow.com/u/MageHD)\
**Post date:** [March 30, 2024, 1:01am UTC](https://forum.pinegrow.com/t/activating-tailwind-css-on-existing-project-isnt-working-solved/8822/3 "2024-03-30T01:01:11Z")

</div>

Where would I find the option to activate the design panel? FYI: This is Pinegrow Desktop on Mac

---

<div class="post-metadata">

**Author:** ![Cary](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/cary/32/6029_2.png) [@Cary](https://forum.pinegrow.com/u/Cary)\
**Post date:** [March 30, 2024, 2:01am UTC](https://forum.pinegrow.com/t/activating-tailwind-css-on-existing-project-isnt-working-solved/8822/4 "2024-03-30T02:01:19Z")

</div>

Click the Pallet icon and if you see a color pallet, then it is activated.

![pallet](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/e/e79a7442ae2369a13a76f2bbdd5c6054f7f45e67.jpeg)

---

<div class="post-metadata">

**Author:** ![MageHD](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/magehd/32/6060_2.png) [@MageHD](https://forum.pinegrow.com/u/MageHD)\
**Post date:** [March 30, 2024, 3:18am UTC](https://forum.pinegrow.com/t/activating-tailwind-css-on-existing-project-isnt-working-solved/8822/5 "2024-03-30T03:18:15Z")

</div>

Yes, it’s activated.

 ![2024-03-29_23-17](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/1/1c6c675fb5176dcdb0317d19097c6ce67a71b2ff.png)

---

<div class="post-metadata">

**Author:** ![Cary](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/cary/32/6029_2.png) [@Cary](https://forum.pinegrow.com/u/Cary)\
**Post date:** [March 30, 2024, 3:47pm UTC](https://forum.pinegrow.com/t/activating-tailwind-css-on-existing-project-isnt-working-solved/8822/6 "2024-03-30T15:47:32Z")

</div>

Sorry, that was the only idea I had. I never tried adding a framework to an existing site.

---

<div class="post-metadata">

**Author:** ![MageHD](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/magehd/32/6060_2.png) [@MageHD](https://forum.pinegrow.com/u/MageHD)\
**Post date:** [March 30, 2024, 5:49pm UTC](https://forum.pinegrow.com/t/activating-tailwind-css-on-existing-project-isnt-working-solved/8822/7 "2024-03-30T17:49:27Z")

</div>

I probably should have posted in the bug report section.

---

<div class="post-metadata">

**Author:** ![Emmanuel](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/emmanuel/32/6294_2.png) [@Emmanuel](https://forum.pinegrow.com/u/Emmanuel)\
**Post date:** [March 30, 2024, 7:16pm UTC](https://forum.pinegrow.com/t/activating-tailwind-css-on-existing-project-isnt-working-solved/8822/8 "2024-03-30T19:16:57Z")

</div>

@MageHD

With Pinegrow, you can incorporate Tailwind CSS into an existing HTML project without any issues. However, attempting to add Tailwind CSS on top of a Bootstrap project (or any other framework) can cause disruptions (in the space-time continuum 😛 ) and lead to a situation that should NEVER occur.

Because Pinegrow does not prevent this mixing (yes, this is your responsibility), If you truly want to add Tailwind CSS to a project that previously used another framework, before making any changes, you should eliminate all references to the other framework from your project (CSS, JS, etc.). Even after doing so, any references to the framework specific classes will still exist in your templates, which is not advisable.

I tested today, the result is in this video, in French, but with English subtitles.

[![](https://img.youtube.com/vi/IQLMO5PhlG4/maxresdefault.jpg "Ajouter Tailwind CSS à votre projet HTML avec Pinegrow") ](https://www.youtube.com/watch?v=IQLMO5PhlG4)

---

<div class="post-metadata">

**Author:** ![MageHD](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/magehd/32/6060_2.png) [@MageHD](https://forum.pinegrow.com/u/MageHD)\
**Post date:** [April 1, 2024, 4:22pm UTC](https://forum.pinegrow.com/t/activating-tailwind-css-on-existing-project-isnt-working-solved/8822/9 "2024-04-01T16:22:13Z")

</div>

Hello,  
I’m not sure how the Bootstrap folder got into the project but I removed it. Nothing in the project references it.

According to your video, Pinegrow created the Tailwind theme folder when you activated the design panel. What if the design panel was activated before Tailwind was added? What are the steps to get Pinegrow to create the theme folder? Is there a refresh option?

---

<div class="post-metadata">

**Author:** ![Emmanuel](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/emmanuel/32/6294_2.png) [@Emmanuel](https://forum.pinegrow.com/u/Emmanuel)\
**Post date:** [April 1, 2024, 7:02pm UTC](https://forum.pinegrow.com/t/activating-tailwind-css-on-existing-project-isnt-working-solved/8822/10 "2024-04-01T19:02:20Z")

</div>

@MageHD

In fact, the design panel can be activated not only for Tailwind CSS, but also for Bootstrap, and finally, for any of your HTML projects.

> **[The Design Panel for Plain HTML | Pinegrow Web Editor](https://pinegrow.com/docs/master-pinegrow/the-pinegrow-design-panel-for-plain-html/)**
>
> The Pinegrow Design panel allows you to set project wide styling including color palette and fonts. Plus, the saved design and Surprise me! button allow you to easily explore design alternatives.

> **[Tailwind CSS Design panel | Pinegrow Web Editor](https://pinegrow.com/docs/tailwind/tailwind-css-design-panel/)**
>
> The Pinegrow Design panel for the Tailwind CSS framework allows you to easily set up a custom theme without editing any config file or setting up a complex compiler. It also allows you to test…

> **[Bootstrap Design Panel | Pinegrow Web Editor](https://docs.pinegrow.com/docs/bootstrap-visual-editor/bootstrap-design-panel/)**
>
> The Pinegrow Design panel for the Bootstrap framework allows you to easily set up a custom theme without editing any base files or setting up a complex compiler. It also allows you to test alternative…

If you had activated it BEFORE, it is highly possible that there was an unlikely mix that occurred between the settings related to Bootstrap and those related to Tailwind CSS, which may have led to the malfunction you mention.

Obviously, at the moment I am speaking to you, I do not have absolute certainty since I have never encountered this issue, but given that in a standard setting, the process behaves normally, there is probably a reason of this kind at the origin of your problem.

If - for some reason - you had already activated the design panel in your project before deciding to use Tailwind CSS, it would have been a good idea to deactivate it prior to making the change.

Note: the dropdown menu next to the “Surprise me!” button allows you deactivate the Design panel for the project.

 ![SCR-20240401-shkv](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/b/b36fb02d6cd3fec57a782ac8ab31c55f277de802.jpeg)

---

<div class="post-metadata">

**Author:** ![MageHD](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/magehd/32/6060_2.png) [@MageHD](https://forum.pinegrow.com/u/MageHD)\
**Post date:** [April 3, 2024, 2:56pm UTC](https://forum.pinegrow.com/t/activating-tailwind-css-on-existing-project-isnt-working-solved/8822/11 "2024-04-03T14:56:36Z")

</div>

Deactivating the design panel resulted in Pinegrow closing the project. When I reopened the project, all of my work was gone.

 ![2024-04-03_10-55](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/0/07bee660e2ce7b3e3d7832762a2b2808c52e6f50.png)

---

<div class="post-metadata">

**Author:** ![Emmanuel](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/emmanuel/32/6294_2.png) [@Emmanuel](https://forum.pinegrow.com/u/Emmanuel)\
**Post date:** [April 4, 2024, 8:38am UTC](https://forum.pinegrow.com/t/activating-tailwind-css-on-existing-project-isnt-working-solved/8822/12 "2024-04-04T08:38:17Z")

</div>

Hello @MageHD

First, the project should automatically reload and there may be a tiny bug there, **but there is no code in Pinegrow that would delete project content like this**.

Also, the name of the project in one of your earlier images is different from the empty project shown in your last image. Are you absolutely sure you didn’t open another project?

I just tested the process (video on demand) that confirms the small bug causing the project to close with the need to reopen it from the dashboard (already fixed for the next version) but upon reopening my project, I can confirm that no files are deleted after deactivating the design panel.

---

<div class="post-metadata">

**Author:** ![MageHD](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/magehd/32/6060_2.png) [@MageHD](https://forum.pinegrow.com/u/MageHD)\
**Post date:** [April 4, 2024, 7:40pm UTC](https://forum.pinegrow.com/t/activating-tailwind-css-on-existing-project-isnt-working-solved/8822/13 "2024-04-04T19:40:14Z")

</div>

Hey @Emmanuel , I think you’re right. The project I was using closed but didn’t reopen. Since the thumbnails look the same, I think I opened the wrong one. I did re-open the other project and the tailwind theme folder is there.

I appreciate your time and patience on this.

Side note: how can I update the thumbnails for a project?

---

<div class="post-metadata">

**Author:** ![MageHD](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/magehd/32/6060_2.png) [@MageHD](https://forum.pinegrow.com/u/MageHD)\
**Post date:** [April 4, 2024, 7:40pm UTC](https://forum.pinegrow.com/t/activating-tailwind-css-on-existing-project-isnt-working-solved/8822/14 "2024-04-04T19:40:46Z")

</div>

BTW, this issue is solved. 😀

---

<div class="post-metadata">

**Author:** ![Emmanuel](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/emmanuel/32/6294_2.png) [@Emmanuel](https://forum.pinegrow.com/u/Emmanuel)\
**Post date:** [April 4, 2024, 9:25pm UTC](https://forum.pinegrow.com/t/activating-tailwind-css-on-existing-project-isnt-working-solved/8822/15 "2024-04-04T21:25:28Z")

</div>

Awesome.  
Glad everything turned out okay 🙂

As for the screenshot, it’s taken if there are any changes in the last document opened and saved before closing the project.

---

<div class="post-metadata">

**Author:** ![Emmanuel](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/emmanuel/32/6294_2.png) [@Emmanuel](https://forum.pinegrow.com/u/Emmanuel)\
**Post date:** [April 4, 2024, 9:25pm UTC](https://forum.pinegrow.com/t/activating-tailwind-css-on-existing-project-isnt-working-solved/8822/16 "2024-04-04T21:25:43Z")

</div>


