[2.4] Product description rich text renders unstyled without typography styling on frontend

Author: skm15187Created Sep 28, 2026Updated Sep 29, 2026

LabelsBugRefined

Description of the Bug

When adding formatted rich text via the WYSIWYG editor into the product description, the frontend storefront renders all HTML elements unstyled and stripped of visual hierarchy.

Headings (<h1>-<h6>), lists (<ul>, <ol>), tables, and blockquotes display as plain inline text without margins, paddings, list markers, or borders. This occurs because Tailwind CSS Preflight/Reset wipes browser default styles, while the description output container lacks scoped typographic styling (such as @tailwindcss/typography or custom prose styling).

Steps to Reproduce

Go to Admin → Catalog → Products and edit any product.
Switch the Description field to code/HTML mode and paste the snippet below.
Save and view the product on the frontend shop.
Check the Description tab.

Code to Reproduce (Dummy HTML)

xml

<div class="product-description-sample">
    <h1>Executive Elegance Men's Formal Office Suit</h1>
    <p>Elevate your professional presence with our meticulously tailored two-piece office suit, designed specifically for corporate meetings and executive settings.</p>
    
    <hr>
    
    <h2>Fabric & Material Specifications</h2>
    <p>Crafted from <strong>Super 120s wool blend</strong> fabric with an <em>anti-wrinkle inner lining</em> and breathable finish.</p>
    
    <h3>Key Features</h3>
    <ul>
        <li>Two-button single-breasted notch lapel jacket</li>
        <li>Flat-front trousers with an expandable comfort waistband</li>
        <li>Dual side vents and premium horn buttons</li>
    </ul>

    <h3>Recommended Styling Order</h3>
    <ol>
        <li>Crisp white dress shirt</li>
        <li>Navy silk tie and matching pocket square</li>
        <li>Black leather oxford shoes</li>
    </ol>

    <blockquote>
        "Designed to maintain structure and elegance throughout full-day executive negotiations."
    </blockquote>

    <h3>Standard Size Matrix</h3>
    <table border="1" cellpadding="6" cellspacing="0">
        <thead>
            <tr>
                <th>Size</th>
                <th>Chest (Inches)</th>
                <th>Waist (Inches)</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>38R</td>
                <td>38 - 40</td>
                <td>32</td>
            </tr>
            <tr>
                <td>40R</td>
                <td>40 - 42</td>
                <td>34</td>
            </tr>
        </tbody>
    </table>

    <p>Product Code: <code>SUIT-M-EXEC-001</code> | Care: Dry clean only.</p>
</div>

Source: bagisto/bagisto

View original on GitHub View discussion on GitHub