# Tailwind CSS v3 setup

**URL:** https://forum.pinegrow.com/t/tailwind-css-v3-setup/7452
**Category:** Styling (CSS)
**Created:** [December 15, 2022, 9:03pm UTC](https://forum.pinegrow.com/t/tailwind-css-v3-setup/7452 "2022-12-15T21:03:28Z")
**Posts on this page:** 14
**Page:** 1

<div class="post-metadata">

### Author: ![deirdre\_nic](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/deirdre_nic/32/5140_2.png) [@deirdre\_nic](https://forum.pinegrow.com/u/deirdre_nic)
#### Post date: [December 15, 2022, 9:03pm UTC](https://forum.pinegrow.com/t/tailwind-css-v3-setup/7452/1 "2022-12-15T21:03:28Z")

</div>

Forgive my ignorance, but I have a question about the dev setup for Tailwind CSS (v3). I have a project with Tailwind CSS but I was looking for the tailwind.config.js file to add some custom code but I realised its not present. I found a tutorial for a manual install of Tailwind here\>

> **[The complete guide to customizing a Tailwind CSS theme](https://pinegrow.com/tutorials/customizing-a-tailwind-css-theme/)**
>
> The complete tutorial on creating a custom Tailwind CSS theme, including installing Node.js and setting up the PostCSS build process.

In my current project the usual Tailwind classes are present. Would I need to preform a manual install of Tailwind and the relevant node modules to customise it further? I have already added my custom colours via the visual ‘Colors’ window in Pinegrow. I would like to now customise the font sizes with rem but I can’t manage that without doing so with the tailwind.config.js file. Or else I am writing SASS with custom classes.  
Any help would be appreciated. Thank you!

---

<div class="post-metadata">

### Author: ![adamslowe](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/adamslowe/32/4590_2.png) [@adamslowe](https://forum.pinegrow.com/u/adamslowe)
#### Post date: [December 16, 2022, 1:08am UTC](https://forum.pinegrow.com/t/tailwind-css-v3-setup/7452/2 "2022-12-16T01:08:02Z")

</div>

Pinegrow let’s you use their built in compiler, where you have no real control over the Tailwind config, or an external compiler.

Here is a video I made a while ago showing you how to configure and use it.

Pinegrow’s External Build Process for Tailwind CSS

[![](https://img.youtube.com/vi/ZidufjA1Qww/maxresdefault.jpg "Pinegrow's External Build Process for Tailwind CSS") ](https://www.youtube.com/watch?v=ZidufjA1Qww)

---

<div class="post-metadata">

### Author: ![TechAkayy](https://avatars.discourse-cdn.com/v4/letter/t/ce73a5/32.png) [@TechAkayy](https://forum.pinegrow.com/u/TechAkayy)
#### Post date: [December 16, 2022, 5:55am UTC](https://forum.pinegrow.com/t/tailwind-css-v3-setup/7452/3 "2022-12-16T05:55:18Z")

</div>

Welcome to the community!

1. Pinegrow Design Panel → tailwind.config.js (theme customization)
2. tailwind.config.js → Pinegrow Props Panel (visual controls customization)

With tailwind v2.x, both (1) and (2) works  
With tailwind v3.x, only (1) works. For (2), JIT compiler turned out to be a blocker, and solutioning is underway by the PG team.

---

<div class="post-metadata">

### Author: ![deirdre\_nic](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/deirdre_nic/32/5140_2.png) [@deirdre\_nic](https://forum.pinegrow.com/u/deirdre_nic)
#### Post date: [December 16, 2022, 11:48am UTC](https://forum.pinegrow.com/t/tailwind-css-v3-setup/7452/4 "2022-12-16T11:48:32Z")

</div>

Oh lovely thank you so much I will give it a watch. Very fascinating software. I nearly installed Tailwind as I do for any dev project manually but thought that would be defeating the point of Pinegrow’s integration.

---

<div class="post-metadata">

### Author: ![deirdre\_nic](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/deirdre_nic/32/5140_2.png) [@deirdre\_nic](https://forum.pinegrow.com/u/deirdre_nic)
#### Post date: [December 16, 2022, 11:49am UTC](https://forum.pinegrow.com/t/tailwind-css-v3-setup/7452/5 "2022-12-16T11:49:37Z")

</div>

So I have learned as I have navigated through it. Thank you for the confirmation. Just had to be certain.

---

<div class="post-metadata">

### Author: ![red-rosefields](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/red-rosefields/32/5392_2.png) [@red-rosefields](https://forum.pinegrow.com/u/red-rosefields)
#### Post date: [July 4, 2023, 10:43am UTC](https://forum.pinegrow.com/t/tailwind-css-v3-setup/7452/6 "2023-07-04T10:43:57Z")

</div>

Hello @adamslowe

So, in order to have styled blocks inside the WordPress editor, I should switch back to the internal JIT compiler from time to time to update the file ‘tailwind\_for\_wp\_editor.css’. Should this file update automatically once I switch back to the internal compiler? I did target this file under ‘Blocks Editor Stylesheet’ in the WordPress page settings, but there is no styling in the wordpress block editor. How do I get the PG to compile this file with what I have already built in PG with the external build? Any ideas?

By the way, external build is an awesome option because it lets us use Tailwind component libraries such as [daisyui.com](http://daisyui.com) or [preline.co](http://preline.co) with tons of working interactive components (menus, accordions, carousels, etc.) that are highly customizable inside PG with native Tailwind classes. I can’t say how much time they could save. For me, that’s the real advantage of using any CSS framework

Thanks!

---

<div class="post-metadata">

### Author: ![adamslowe](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/adamslowe/32/4590_2.png) [@adamslowe](https://forum.pinegrow.com/u/adamslowe)
#### Post date: [July 6, 2023, 2:05pm UTC](https://forum.pinegrow.com/t/tailwind-css-v3-setup/7452/7 "2023-07-06T14:05:46Z")

</div>

It’s always worked for me to switch to the internal compiler, do a save (which should generate the editor stylesheet), then switch back to my external build process. There has to be a better way, though. Maybe @matjaz can offer a suggestion or provide insight into what happens behind the scenes to create that stylesheet?

BTW, I fully expect this question to take a while to get answered since I’m sure everyone at Pinegrow is bombarded with questions about today’s Vue Designer launch.

---

<div class="post-metadata">

### Author: ![matjaz](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/matjaz/32/5_2.png) [@matjaz](https://forum.pinegrow.com/u/matjaz)
#### Post date: [July 7, 2023, 7:50am UTC](https://forum.pinegrow.com/t/tailwind-css-v3-setup/7452/8 "2023-07-07T07:50:10Z")

</div>

@adamslowe @red-rosefields the proper solution with the external process would be to somehow build two TW CSS files, and have the editor one use different, more minimal source directives. But, no idea if TW supports something like this, in the same project. My guess is, no.

Another way would be to add some comment markers in the source file and then run an external script that would strip the marked sections out and replace them with some block editor specific code, and save that as the editor CSS file. That’s how PG does it internally. Again, not so straightforward.

---

<div class="post-metadata">

### Author: ![red-rosefields](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/red-rosefields/32/5392_2.png) [@red-rosefields](https://forum.pinegrow.com/u/red-rosefields)
#### Post date: [July 9, 2023, 6:30am UTC](https://forum.pinegrow.com/t/tailwind-css-v3-setup/7452/9 "2023-07-09T06:30:23Z")

</div>

Unfortunately this is not working for me. I switch back to internal compiler, save and export but no css in the editor stylesheet is been generated…

---

<div class="post-metadata">

### Author: ![ShannaKae](https://avatars.discourse-cdn.com/v4/letter/s/848f3c/32.png) [@ShannaKae](https://forum.pinegrow.com/u/ShannaKae)
#### Post date: [March 16, 2024, 9:56pm UTC](https://forum.pinegrow.com/t/tailwind-css-v3-setup/7452/10 "2024-03-16T21:56:53Z")

</div>

Is this a new feature that maybe helps make this process easier? I am new… So wondering if this woulld allow us to use the primary PG Compiler and then add on extra .json type special style sheets from other sources?

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/a/a1b8af28abbd722ec2b05accd83bf1016c76d28c.png)

---

<div class="post-metadata">

### Author: ![adamslowe](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/adamslowe/32/4590_2.png) [@adamslowe](https://forum.pinegrow.com/u/adamslowe)
#### Post date: [March 17, 2024, 2:23pm UTC](https://forum.pinegrow.com/t/tailwind-css-v3-setup/7452/11 "2024-03-17T14:23:06Z")

</div>

Not really. That screen has nothing to do with Tailwind. It’s just the screen that lets you manage your CSS files and attach or detach them from your HTML documents.

---

<div class="post-metadata">

### Author: ![mediacode](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/mediacode/32/6411_2.png) [@mediacode](https://forum.pinegrow.com/u/mediacode)
#### Post date: [October 2, 2024, 1:03am UTC](https://forum.pinegrow.com/t/tailwind-css-v3-setup/7452/12 "2024-10-02T01:03:49Z")

</div>

I am using the WordPress plugin from Pinegrow to create Tailwind themes. Is this configuration also possible with the plugin, or does it only work with the desktop app?

---

<div class="post-metadata">

### Author: ![adamslowe](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/adamslowe/32/4590_2.png) [@adamslowe](https://forum.pinegrow.com/u/adamslowe)
#### Post date: [October 2, 2024, 1:24am UTC](https://forum.pinegrow.com/t/tailwind-css-v3-setup/7452/13 "2024-10-02T01:24:12Z")

</div>

It’s possible with the plugin, with two caveats. The plugin 1) doesn’t allow you to use a custom configuration, and 2) it doesn’t allow you to use any additional Tailwind plugins other than the default ones that are installed with Pinegrow.

For total control you’d want to use the desktop version of Pinegrow which allows you to use an external build process. That removes those two limitations.

---

<div class="post-metadata">

### Author: ![mediacode](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/mediacode/32/6411_2.png) [@mediacode](https://forum.pinegrow.com/u/mediacode)
#### Post date: [October 3, 2024, 8:50am UTC](https://forum.pinegrow.com/t/tailwind-css-v3-setup/7452/14 "2024-10-03T08:50:47Z")

</div>

Thanks, Adam! I want to try out the Webeditor, and I’ve purchased a one-month trial version of the Webeditor, Tailwind & WordPress Plugin to see how it works.

Unfortunaturely i have [my first issue.](https://forum.pinegrow.com/t/tailwind-by-click-on-hamburger-button-basic-menu-doesnt-open/9844)
