tailwindui css layout support - colon is not accepted by the pattern

[in-session]

I would like to use tailwindui for a project, but unfortunately it is currently not possible because no colon is allowed within the htmlClass.

<!-- Width of 16 by default, 32 on medium screens, and 48 on large screens -->
<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl"></div>

<referenceContainer name="header-wrapper" htmlClass="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl" htmlId="header" />

Element 'referenceContainer', attribute 'htmlClass': [facet 'pattern'] The value 'page-wrapper flex relative md:p-0' is not accepted by the pattern '[a-zA-Z][a-zA-Z\d\-_]*(\s[a-zA-Z][a-zA-Z\d\-_]*)*'. Line: 1306

Is there a way to make this compatible?

[m2-assistant]

Hi @in-session. Thank you for your report.
To speed up processing of this issue, make sure that you provided the following information:

• Summary of the issue
• Information on your environment
• Steps to reproduce
• Expected and actual results

Make sure that the issue is reproducible on the vanilla Magento instance following Steps to reproduce. To deploy vanilla Magento instance on our environment, Add a comment to the issue:

@magento give me 2.4-develop instance - upcoming 2.4.x release

For more details, review the Magento Contributor Assistant documentation.

Add a comment to assign the issue: @magento I am working on this

To learn more about issue processing workflow, refer to the Code Contributions.

---

• Join Magento Community Engineering Slack and ask your questions in #github channel.

⚠️ According to the Magento Contribution requirements, all issues must go through the Community Contributions Triage process. Community Contributions Triage is a public meeting.

🕙 You can find the schedule on the Magento Community Calendar page.

📞 The triage of issues happens in the queue order. If you want to speed up the delivery of your contribution, join the Community Contributions Triage session to discuss the appropriate ticket.

🎥 You can find the recording of the previous Community Contributions Triage on the Magento Youtube Channel

✏️ Feel free to post questions/proposals/feedback related to the Community Contributions Triage process to the corresponding Slack Channel

[in-session]

vendor\magento\framework\View\Layout\etc\elements.xsd

    <xs:simpleType name="htmlClassType">
        <xs:restriction base="xs:string">
            <xs:pattern value="[a-zA-Z][a-zA-Z\d\-_:]*(\s[a-zA-Z][a-zA-Z\d\-_:]*)*"/>
        </xs:restriction>
    </xs:simpleType>

[Nurgiel]

It's really annoying that you can't use some tailwind classes in .xml files.

Is there a way to add a plugin/preference to override this regex from elements.xsd file? Otherwise when is this going to be released as a patch?

Issue was opened for the first time over two years ago and no solution has been given since then:
https://community.magento.com/t5/Can-Magento-do/XSD-regex-override/td-p/312167

<xs:include schemaLocation="urn:magento:framework:View/Layout/etc/elements.xsd"/>
is hardcoded all over the place in vendor/magento/framework/View/Layout/etc/ body.xsd, layout_generic.xsd, layout_merged.xsd, page_layout.xsd, ui_settings.xsd...

[in-session]

@Nurgiel Has already been published as PR and will hopefully be integrated in the next release.
#34559
magento/magento2-page-builder#791

[github-jira-sync-bot]

✅ Jira issue https://jira.corp.magento.com/browse/AC-2055 is successfully created for this GitHub issue.

[m2-assistant]

✅ Confirmed by @engcom-Alfa. Thank you for verifying the issue.
Issue Available: @engcom-Alfa, You will be automatically unassigned. Contributors/Maintainers can claim this issue to continue. To reclaim and continue work, reassign the ticket to yourself.