Using tailwind_for_wp_editor.css breaks Text Formatting in WordPress Editor

Styling (CSS)
, , ,
1

When creating WordPress Blocks with Tailwind, we’re using tailwind_theme/tailwind_for_wp_editor.css to have those block designs reflected in the WordPress Editor (set using ‘Editor stylesheet 1’).

However, tailwind_theme/tailwind_for_wp_editor.css also removes the text formatting in WP Editor.

How do you correct tailwind_theme/tailwind_for_wp_editor.css to show the text as it would appear naturally in the WordPress editor when tailwind_theme/tailwind_for_wp_editor.css is not applied?

image
image1349×816 271 KB

2

Here is how the content in the WordPress Editor changes when enabling and disabling the ‘Use theme styles’ under WordPress Editor Preferences.

  • Gutenberg Blocks created by Pinegrow display correctly when enabling ‘Use theme styles’.

  • Gutenberg Blocks does not display correctly when disabling ‘Use theme styles’.

  • Formatted Text created in WordPress does not display correctly when enabling ‘Use theme styles.’

  • Formatted Text created in WordPress display correctly when enabling ‘Use theme styles’.

Is there a bug that Gutenberg Blocks and Formatted Text displays differently when using tailwind_theme/tailwind_for_wp_editor.css in the ‘Editor stylesheet 1’ setting for Pinegrow WordPress Theme Settings, or am I possibly missing a step?

image
image1920×1656 304 KB

3

For my Tailwind CSS Options, I am using the ‘Built-in JIT Compiler (3.2.1)’. See the screenshot below. Does anyone else have experience dealing with this issue?

image
image881×325 42.8 KB

4

It looks like tailwind’s Preflight (Preflight - Tailwind CSS ) is affecting your editor styles. There are a few ways around it such as disabling preflight completely, using prose and not-prose classes, or getting crazy with your css.

I also covered this in a recent video. Pinegrow Countdown: Day 4 – WordPress Blocks and Themes - Peak Performance Digital

3 Likes