Selector escape function doesn't support tailwindcss classes
Sorry i found very late this config https://github.com/artf/grapesjs/blob/e52b5c29e4346dba7367b769a44d99a2226e025f/src/selector_manager/config/config.js#L17
Read full answer below βQuestion
GrapesJS version
- I confirm to use the latest version of GrapesJS
What browser are you using?
Chrome v97
Describe the bug
At line https://github.com/artf/grapesjs/blob/dev/src/selector_manager/model/Selector.js#L171 the selector escape function doesn't allow / and . because of that we can't use some tailwind classes such as basis-1/2 and inset-0.5 ... .
maybe this /([^a-z0-9\w-\/.:]+)/gi regex help.
Code of Conduct
- I agree to follow this project's Code of Conduct
Answers (2)
Sorry i found very late this config https://github.com/artf/grapesjs/blob/e52b5c29e4346dba7367b769a44d99a2226e025f/src/selector_manager/config/config.js#L17
Thanks for reporting this, @miladmeidanshahi.
The issue with selector escape function doesn't support tailwindcss classes appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM modifications overlap, creating an inconsistent state.
What to try:
- Add a setTimeout wrapper to ensure the DOM has settled:
setTimeout(() => {
// your operation here
}, 0);
-
Check initialization order β make sure components are fully loaded before you interact with them
-
Use the editor's event system β listen to completion events:
editor.on('component:mount', (component) => {
// safe to interact with component here
});
Recommended next steps:
- Test with the latest GrapesJS version if you haven't
- Provide a minimal reproducible example (CodeSandbox) β this helps the team identify the root cause faster
- Include GrapesJS version, browser, and console errors in your report
Related Questions and Answers
Continue research with similar issue discussions.
Issue #4434
CSS Parser's shape doesn't allow the CSS property to be defined more than once.
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? AnyReproducible demo link https://grapesjs.c...
Issue #5156
Cannot drag drop in mobile screen even add grapejs-touch
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Chrome, IOSReproducible demo link https://ww...
Issue #5089
Error importing codemirror library in SCSS
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Firefox 112.0.1 Reproducible demo link htt...
Issue #4503
Missing inline styles used by CKEditor when adding raw html components
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chromium v96 Reproducible demo link https:...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins βPremium plugins ship with support, regular updates, and production-ready features β save days of integration work.
Browse premium plugins βBrowse Plugin Categories
Jump directly to plugin category pages on the marketplace.