BUG: Component styles such as md:flex-row(tailwind) are removed

Question

GrapesJS version

I confirm to use the latest version of GrapesJS

What browser are you using?

Chrome 126.0.6478.127

Reproducible demo link

Describe the bug

How to reproduce the bug? I'm looking to use Tailwind with GrapesJS, but this framework uses Utility-First CSS Classes to build quick layouts. The problem is that it also uses 'special' classes to define style variants, eg: hover:bg-blue or md:w-full etc. Styles that include colons such as md:flex-row hover:bg-black in the component style will be deleted. You can check by looking at "view code"

What is the expected behavior?

domc.addType('hero-section-1', {
  model: {
    defaults: {
      attributes: { class: 'hero-section-1' },
      components: `
  <div class="md:p-18">
  </div>
      `,
      styles: `
  @media (min-width: 768px) {
    .md\:p-18 { padding: 4rem; }
  }
      `
    },
  },
})

view code 👇

<body id="icsl">
  <div class="hero-section-1">
    <div class="md:p-18">
    </div>
  </div>
</body>

  @media (min-width: 768px) {
    .md\:p-18 { padding: 4rem; }
  }

What is the current behavior?

domc.addType('hero-section-1', {
  model: {
    defaults: {
      attributes: { class: 'hero-section-1' },
      components: `
  <div class="md:p-18">
  </div>
      `,
      styles: `
  @media (min-width: 768px) {
    .md\:p-18 { padding: 4rem; }
  }
      `
    },
  },
})

Code of Conduct

I agree to follow this project's Code of Conduct

BUG: Component styles such as md:flex-row(tailwind) are removed

Question

GrapesJS version

What browser are you using?

Reproducible demo link

Describe the bug

Code of Conduct

Answers (1)

Related Questions and Answers

BUG: When you delete a component, duplicate classes between components will be deleted.

BUG: Cannot be selected on canvas if tags are nested

BUG: Loading `component` and `styles` from `pageManager`

BUG: component resets attribute values on updating traits ( first time only )

Paid Plugins That Match This Issue

Browse Plugin Categories