Issue #2109💬 AnsweredOpened July 1, 2019by inventorbit1 reactions

Tailwind flex classes are not working

快速解答by artf1

#1703 waiting for a help 😬

Read full answer below ↓

Question

Thanks for providing the amazing framework and making it opensource. I'm looking to use Tailwind with GrapesJS, unfortunately grapesjs replaces "/" with "-" in the selector. Is it possible to override this?

When I try to drag and drop responsive columns in canvas

<!-- Two columns -->
<div class="flex mb-4">
  <div class="w-1/2 bg-gray-400 h-12"></div>
  <div class="w-1/2 bg-gray-500 h-12"></div>
</div>

It replaces them to:

<div class="flex mb-4">
  <div class="w-1-2 bg-gray-400 h-12">Drop Your Content
  </div>
  <div class="w-1-2 bg-gray-500 h-12">Drop Your Content
  </div>
</div>

How can I fix this issue? Please help me.

Answers (3)

artfJuly 12, 2019

#1703 waiting for a help 😬

gavinhewittMarch 13, 2020

Thanks for providing the amazing framework and making it opensource. I'm looking to use Tailwind with GrapesJS, unfortunately grapesjs replaces "/" with "-" in the selector. Is it possible to override this?

When I try to drag and drop responsive columns in canvas

<!-- Two columns -->
<div class="flex mb-4">
  <div class="w-1/2 bg-gray-400 h-12"></div>
  <div class="w-1/2 bg-gray-500 h-12"></div>
</div>

It replaces them to:

<div class="flex mb-4">
  <div class="w-1-2 bg-gray-400 h-12">Drop Your Content
  </div>
  <div class="w-1-2 bg-gray-500 h-12">Drop Your Content
  </div>
</div>

How can I fix this issue? Please help me.

What's your progress on making grapes work with Tailwind @inventorbit? Would love to see!

chrisreedtechJuly 2, 2020

What's your progress on making grapes work with Tailwind @inventorbit? Would love to see!

@artf , I'm also curious if there is any progress on this or an available work around?

Thanks for your time developing grapes!

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

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.