# Applying Tailwind classes to post content

**URL:** <https://forum.pinegrow.com/t/applying-tailwind-classes-to-post-content/8759>\
**Category:** Pinegrow WP\
**Tags:** wordpress, tailwind, theme\
**Created:** [March 9, 2024, 10:02pm UTC](https://forum.pinegrow.com/t/applying-tailwind-classes-to-post-content/8759 "2024-03-09T22:02:53Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![piootr](https://avatars.discourse-cdn.com/v4/letter/p/53a042/32.png) [@piootr](https://forum.pinegrow.com/u/piootr)\
**Post date:** [March 9, 2024, 10:02pm UTC](https://forum.pinegrow.com/t/applying-tailwind-classes-to-post-content/8759/1 "2024-03-09T22:02:53Z")

</div>

Hello,

I use Tailwind framework for my ClassicPress theme.

I would like to apply formatting to the post content elements (paragraphs, lists, etc.). What’d be the right way to do it? I guess I could use “@apply” but [apparently it doesn’t work with Pinegrow](https://forum.pinegrow.com/t/use-apply-with-tailwind/5321) yet, at least not with internal compiler? Or maybe there is another way to sort it?

Thanks.

---

<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:** [March 9, 2024, 10:52pm UTC](https://forum.pinegrow.com/t/applying-tailwind-classes-to-post-content/8759/2 "2024-03-09T22:52:51Z")

</div>

Hi @piootr,

Why not apply the tw classes directly to the elements? Or is it done outside of the class attributes list dynamically?

If you are looking for a way to safelist tailwind classes, try adding an empty div (somewhere in your html doc, may be before the body close) with those classes that are to be safelisted.

For eg,  
`<div id=“tw-safelist” class=“bg-blue-100 text-gray-900”></div>`

Its zero height, so should be invisible. Let me know how you go!

---

<div class="post-metadata">

**Author:** ![piootr](https://avatars.discourse-cdn.com/v4/letter/p/53a042/32.png) [@piootr](https://forum.pinegrow.com/u/piootr)\
**Post date:** [March 10, 2024, 12:33pm UTC](https://forum.pinegrow.com/t/applying-tailwind-classes-to-post-content/8759/3 "2024-03-10T12:33:11Z")

</div>

Hi @TechAkayy ,

I want to apply tw classes to elements imported with `the_content` action, so not directly available in the editor. I imagine I might do it in style.css, e.g.:

```auto
.post-content p {
    @apply mb-3;
}

```

But this would require using external compiler. Am I right?  
I’m still pretty fresh Pinegrow user, so I guess I’m not familiar yet with how to do things optimally 🙂

---

<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:** [March 10, 2024, 12:45pm UTC](https://forum.pinegrow.com/t/applying-tailwind-classes-to-post-content/8759/4 "2024-03-10T12:45:05Z")

</div>

Hi @piootr,

This in fact does require an external compiler.

---

<div class="post-metadata">

**Author:** ![piootr](https://avatars.discourse-cdn.com/v4/letter/p/53a042/32.png) [@piootr](https://forum.pinegrow.com/u/piootr)\
**Post date:** [March 11, 2024, 7:46pm UTC](https://forum.pinegrow.com/t/applying-tailwind-classes-to-post-content/8759/5 "2024-03-11T19:46:00Z")

</div>

OK, I managed to set up external compiler and then added something like:

```auto
@layer base {
    .post-content p {
        @apply mb-3;
    }
}

```

in the source.css, as per Tailwind docs (for now instead of using style.css).

Maybe it would be advisable to add this info about the way `the_content` can be formatted, at least with the Tailwind, to the Pinegrow docs? (but sorry if it is already there and I missed it)

---

<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:** [March 12, 2024, 7:22pm UTC](https://forum.pinegrow.com/t/applying-tailwind-classes-to-post-content/8759/6 "2024-03-12T19:22:22Z")

</div>

> [@piootr](#):
>
> in the source.css, as per Tailwind docs (for now instead of using style.css).
> 
> Maybe it would be advisable to add this info about the way `the_content` can be formatted, at least with the Tailwind, to the Pinegrow docs? (but sorry if it is already there and I missed it)

Glad you got it working with the external compiler.

I’m not following what you meant my `the_content` formatting, is this something from the tailwind docs or WP terminology?

---

<div class="post-metadata">

**Author:** ![piootr](https://avatars.discourse-cdn.com/v4/letter/p/53a042/32.png) [@piootr](https://forum.pinegrow.com/u/piootr)\
**Post date:** [March 12, 2024, 7:46pm UTC](https://forum.pinegrow.com/t/applying-tailwind-classes-to-post-content/8759/7 "2024-03-12T19:46:28Z")

</div>

It’s a [function](https://developer.wordpress.org/reference/functions/the_content/) for displaying WP single post content.

When using Tailwind framework in Pinegrow editor, I can apply utility classes to various theme elements, but apparently dynamic content to be displayed with the use of `the_content()` on singular.php/single.php/page.php, etc. requires a bit different approach. You cannot use utility classes on a placeholder and apply any smart action on it, such as in the case of menus for example. For every single post content element (paragraph, list, but also gallery) to be formatted, utility classes need to be defined as indicated in the previous posts.