Applying Tailwind classes to post content

Pinegrow WP
, ,
1

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 yet, at least not with internal compiler? Or maybe there is another way to sort it?

Thanks.

2

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!

3

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.:

.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 :slight_smile:

1 Like
4

Hi @piootr,

This in fact does require an external compiler.

5

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

@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)

6

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?

7

It’s a function 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.

1 Like