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

[in-session]

https://tailwindcss.com/docs/responsive-design#overview

Fixes #34430

[m2-assistant]

Hi @in-session. Thank you for your contribution
Here are some useful tips how you can test your changes using Magento test environment.
Add the comment under your pull request to deploy test or vanilla Magento instance:

• @magento give me test instance - deploy test instance based on PR changes
• @magento give me 2.4-develop instance - deploy vanilla Magento instance

❗ Automated tests can be triggered manually with an appropriate comment:

• @magento run all tests - run or re-run all required tests against the PR changes
• @magento run <test-build(s)> - run or re-run specific test build(s)
  For example: @magento run Unit Tests

<test-build(s)> is a comma-separated list of build names. Allowed build names are:

1. Database Compare
2. Functional Tests CE
3. Functional Tests EE,
4. Functional Tests B2B
5. Integration Tests
6. Magento Health Index
7. Sample Data Tests CE
8. Sample Data Tests EE
9. Sample Data Tests B2B
10. Static Tests
11. Unit Tests
12. WebAPI Tests
13. Semantic Version Checker

You can find more information about the builds here

ℹ️ Run only required test builds during development. Run all test builds before sending your pull request for review.

For more details, review the Magento Contributor Guide documentation.

⚠️ According to the Magento Contribution requirements, all Pull Requests 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 Pull Requests 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]

@magento run all tests

[magento-automated-testing]

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please re-request them if they don't show in a reasonable amount of time.

[in-session]

@magento run Functional Tests EE, Functional Tests CE, Unit Tests

[magento-automated-testing]

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please re-request them if they don't show in a reasonable amount of time.

[ihor-sviziev]

Failing tests are not related to changes from this PR

[magento-engcom-team]

Hi @ihor-sviziev, thank you for the review.
ENGCOM-9332 has been created to process this Pull Request
✳️ @ihor-sviziev, could you please add one of the following labels to the Pull Request?

Label	Description
Auto-Tests: Covered	All changes in Pull Request is covered by auto-tests
Auto-Tests: Not Covered	Changes in Pull Request requires coverage by auto-tests
Auto-Tests: Not Required	Changes in Pull Request does not require coverage by auto-tests

[magento-engcom-team]

@in-session thank you for contributing. Please accept Community Contributors team invitation here to gain extended permissions for this repository.

[in-session]

@magento give me test instance

[magento-deployment-service]

Hi @in-session. Thank you for your request. I'm working on Magento instance for you.

[magento-deployment-service]

Hi @in-session, here is your Magento Instance: https://5b7bd3eb62d4df337279e14275704f53.instances.magento-community.engineering
Admin access: https://5b7bd3eb62d4df337279e14275704f53.instances.magento-community.engineering/admin_806e
Login: 73834e6f
Password: 0ad567111b07

[BernardRobbins-BMediaLLC]

I created a module that should fix this in the meantime: https://github.com/BernardRobbins/TailWindUiM2Fix
Edit: This didn't fix it.

[barryvdh]

Doesn't this miss some cases? https://docs.hyva.io/hyva-themes/building-your-theme/styling-layout-containers.html
For example w-screen left-1/2 right-1/2 mx-[-50vw] relative
The patch there from @ArjenMiedema does solve it:

@package magento/framework

diff --git View/Layout/etc/elements.xsd View/Layout/etc/elements.xsd
index 51f1931..14baa00 100644
--- View/Layout/etc/elements.xsd
+++ View/Layout/etc/elements.xsd
@@ -119,7 +119,7 @@

     <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:pattern value="[a-zA-Z\-][a-zA-Z\d\-_/:.\[\]]*(\s[a-zA-Z][a-zA-Z\d\-_/:.\[\]]*)*"/>
         </xs:restriction>
     </xs:simpleType>

[in-session]

Doesn't this miss some cases? https://docs.hyva.io/hyva-themes/building-your-theme/styling-layout-containers.html For example w-screen left-1/2 right-1/2 mx-[-50vw] relative The patch there from @ArjenMiedema does solve it:

@package magento/framework

diff --git View/Layout/etc/elements.xsd View/Layout/etc/elements.xsd
index 51f1931..14baa00 100644
--- View/Layout/etc/elements.xsd
+++ View/Layout/etc/elements.xsd
@@ -119,7 +119,7 @@

     <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:pattern value="[a-zA-Z\-][a-zA-Z\d\-_/:.\[\]]*(\s[a-zA-Z][a-zA-Z\d\-_/:.\[\]]*)*"/>
         </xs:restriction>
     </xs:simpleType>

Yes because of change from Version 2 to 3 also for page builder. We need to open a new merge for it.

[in-session]

mx-[-50vw] = -mx-[50vw]?

[barryvdh]

Not sure, that's the example from https://docs.hyva.io/hyva-themes/faqs/full-bleed-cms-content.html

[barryvdh]

Update PR in #36452