Styling CMS text content

CSS Reset

Tailwind CSS resets browser-native styles, enabling consistent styling with its utility classes. However, this removes default styling from all HTML elements. Consequently, CMS content like headings, paragraphs, and lists will appear unstyled on the frontend.

The prose class

The tailwindcss/typography plugin (included with Hyvä) provides the prose utility class to address this. Applying prose to a container automatically styles its text content, making it render nicely. It also offers presets to match your site's look and feel.

Prose max-width

By default, prose presets include a max-width for optimal readability. To override this, use max-w-none alongside prose, for example: class="prose max-w-none".

Adding prose to all static blocks

By default, the prose class must be applied to each CMS block or page individually. To automatically apply it to all static content blocks, override the relevant template in your child theme.

For example, to add prose to all CMS content on category pages, override Magento_Catalog/templates/category/cms.phtml and add the classes as shown:

<?php if ($block->isContentMode() || $block->isMixedMode()) :?>
    <div class="category-cms prose max-w-none">
        <?= $block->getCmsBlockHtml() ?>
    </div>
<?php endif; ?>