CSS on Wordpress Pages Not Working

[boomspot]

Hello, I'm just digging into Tailpress and noticed that Tailwindcss classes don't work when adding the HTML in the text editor on individual Wordpress pages. When I add the HTML to the custom page-template.php file the styles are compiled. What's the trick to have the classes work for HTML on individual pages?

Thanks!

B

[jeffreyvr]

Not sure if I understand your question, but are you using Tailwind classes inside the block editor?

In that case: the JIT editor of Tailwind won't pick up classes that are typed in to your WordPress block editor, because it only keeps classes that are found in the files you specify in the content option. So if you wan't to use classes inside the editor, you would have to add them to the safelist so they are not purged.

https://tailwindcss.com/docs/content-configuration#safelisting-classes

TailPress uses a safelist.txt file for this.

https://github.com/jeffreyvr/tailpress/blob/master/safelist.txt

[boomspot]

Thanks for the clarification. Makes sense!

[komali2]

To clarify, it sounds like the solution to "wanting to use tailwind classes in the block editor" is:

1. Use the classes in the block editor
2. Take all the classes used, and add them to the safelist.txt file in your local version of tailpress
3. In your local tailpress, re-run npm run prod
4. Depending on how you're loading tailpress, a couple options. I'm a fullstack dev but this is my first time touching wordpress ever, so I'm just naively re-zipping up the folder and uploading it in the "Themes" portion of wp-admin. There's probably much better ways.

Is this correct?

[jeffreyvr]

That is correct!