Easy way to remove Prose styles from build

[darcemac]

Hi there,

Fantastic theme by the way, made building my last site a pleasure!

I was wondering whats the best way to remove all Tailwind Prose styles as its playing havoc visually with my ACF blocks in the Editor.

Classes like the one below are just not needed.

.prose :where(h2):not(:where([class~="not-prose"] *))

[gregsullivan]

Hi Darcy,

Very happy to hear _tw worked well for you on the last site you built!

The prose styles are coming from Tailwind Typography. If your concern is just removing the CSS, you can remove these lines from ./tailwind/tailwind.config.js:

presets: [
	// Manage Tailwind Typography's configuration in a separate file.
	require('./tailwind-typography.config.js'),
],

// Add Tailwind Typography.
require('@tailwindcss/typography'),

You can also delete the ./tailwind/tailwind-typography.config.js file entirely.

Then, if you don't want the extra classes being added to your frontend HTML, you can set the value of EVKEEZA_TYPOGRAPHY_CLASSES to an empty string in ./theme/functions.php.

Finally, you can also comment out this line in ./theme/functions.php:

add_action( 'enqueue_block_assets', 'evkeeza_enqueue_typography_script' );

(You could also delete the entire evkeeza_enqueue_typography_script() function and the corresponding add_action—up to you!)

[gregsullivan]

Can you confirm whether the orange border is being applied and then overridden by something, or whether it's never being applied at all?

I've experienced something similar to the underline issue: There are some editor styles that you'll need to explicitly override. Since Tailwind removes the underlines in its Preflight, but we don't use Preflight in the editor, you'll need to add no-underline if you want to remove it. There aren't a huge number of things like that, but that's definitely one I've seen before.

[gregsullivan]

It could also be an example of this for the border:

_tw/tailwind/tailwind-typography.config.js

Lines 24 to 32 in 55a0316

	/**
	* Without Preflight, Tailwind doesn't apply a
	* default border style of `solid` to all elements,
	* so the border doesn't appear in the editor
	* without this addition.
	*/
	blockquote: {
	borderLeftStyle: 'solid',
	},

[darcemac]

Hi Greg,

I believe the link is getting the underline and perhaps the border width 0 from the below inline styles

.editor-styles-wrapper a:where(:not(.wp-element-button)) {
text-decoration: underline;
}

.editor-styles-wrapper .wp-element-button,
.editor-styles-wrapper .wp-block-button__link {
background-color: #32373c;
border-width: 0px;
color: #fff;
font-family: inherit;
font-size: inherit;
line-height: inherit;
padding: calc(0.667em + 2px) calc(1.333em + 2px);
text-decoration: none;
}

When I change it to a button element it get the borders back and the underline is gone.

[darcemac]

Thanks for the typography.config.js link. Perhaps I need to create a custom link class for this?

Im learning a lot about TW and have to say the development process has been a lot more fun using your theme, so thanks very much!

[gregsullivan]

I think you're right about that being where the underline is coming from! You might want to try adding no-underline to your classes for the link, as Tailwind won't be removing the underlines without Preflight.

You could check in dev tools whether the border is zero-width, or whether there's no border style. If it's the latter, adding border-solid might fix the issue.

I'll note that the typography.config.js file isn't meant to be used to style things like ACF blocks—it's specifically for tweaking the output from Tailwind Typography when you need to go beyond what the element modifiers allow.

I'm very happy to hear you've been enjoying the development process—you're very welcome!