Problem with Tailwind on Custom tool (dashboard)

[vitaly107]

I have a problem with layouts on custom dashboard / tool page

The HTML code with Tailwind styles applied does not behave as expected.

Not sure is somethin in AVO applicaton / layout file impacts on this.

Please can you add some guidance to your Docs on how to customize styles/layout of pages in AVO?

Thanks

[adrianthedev]

What do you mean "does not behave as expected"? Are you using certain tailwind classes and they don't have styles applied to them?

[vitaly107]

yes, I am unable to get same styling and layout within AVO that I am getting using the same code elsewhere

[vitaly107]

More details:

For example I go to this page and copy the code for those boxes/cards

https://tailwindcomponents.com/component/card-11

Then I insert it into my new custo tool/dashboard view

and this is what I am getting

[vitaly107]

another example
instead of this look
https://tailwindcomponents.com/component/material-color-palette
unsing code below:

<div class="h-screen md:max-w-xl mx-auto flex flex-wrap">
  <div class="w-40 h-40 m-4 bg-white border rounded-2xl border-gray-400 items-center justify-center text-center py-16">Background</div>
  <div class="w-40 h-40 m-4 bg-gray-800 rounded-2xl items-center justify-center text-center text-white">
    <div class="items-center justify-center justify-items-center h-full w-full py-16">Main</div>
  </div>
  <div class="w-40 h-40 m-4 bg-red-500 rounded-2xl items-center justify-center text-center text-white py-16">Accent</div>
  <div class="w-40 h-40 m-4 bg-blue-800 rounded-2xl items-center justify-center text-center text-white py-16">Primary</div>
  <div class="w-40 h-40 m-4 bg-green-500 rounded-2xl items-center justify-center text-center text-white py-16">Secondary</div>
  <div class="w-40 h-40 m-4 bg-yellow-400 rounded-2xl items-center justify-center text-center text-white py-16">Tretiary</div>
  <div class="w-40 h-40 m-4 bg-gradient-to-r from-pink-500 to-red-500 rounded-2xl items-center justify-center text-center text-white py-16">Gradient</div>
  <div class="w-40 h-40 m-4 bg-gray-400 rounded-2xl items-center justify-center text-center text-white py-16">Icon</div>
  <div class="w-40 h-40 m-4 bg-gray-100 rounded-2xl items-center justify-center text-center py-16">Neutral</div>
</div>

[vitaly107]

I am getting

[vitaly107]

[vitaly107]

This is my code:

<div class="flex flex-col">
  <%= render Avo::PanelComponent.new title: 'Dashboard', display_breadcrumbs: true do |c| %>
    <%# c.tools do %>
<!--      <div class="text-sm italic">This is the panels tools section.</div>-->
    <%# end %>

    <% c.body do %>
      <div class="h-screen md:max-w-xl mx-auto flex flex-wrap">
        <div class="w-40 h-40 m-4 bg-white border rounded-2xl border-gray-400 items-center justify-center text-center py-16">Background</div>
        <div class="w-40 h-40 m-4 bg-gray-800 rounded-2xl items-center justify-center text-center text-white">
          <div class="items-center justify-center justify-items-center h-full w-full py-16">Main</div>
        </div>
        <div class="w-40 h-40 m-4 bg-red-500 rounded-2xl items-center justify-center text-center text-white py-16">Accent</div>
        <div class="w-40 h-40 m-4 bg-blue-800 rounded-2xl items-center justify-center text-center text-white py-16">Primary</div>
        <div class="w-40 h-40 m-4 bg-green-500 rounded-2xl items-center justify-center text-center text-white py-16">Secondary</div>
        <div class="w-40 h-40 m-4 bg-yellow-400 rounded-2xl items-center justify-center text-center text-white py-16">Tretiary</div>
        <div class="w-40 h-40 m-4 bg-gradient-to-r from-pink-500 to-red-500 rounded-2xl items-center justify-center text-center text-white py-16">Gradient</div>
        <div class="w-40 h-40 m-4 bg-gray-400 rounded-2xl items-center justify-center text-center text-white py-16">Icon</div>
        <div class="w-40 h-40 m-4 bg-gray-100 rounded-2xl items-center justify-center text-center py-16">Neutral</div>
      </div>
    <% end %>
  <% end %>
</div>

[vitaly107]

What is wrong?

[adrianthedev]

When we ship Avo to you we don't ship it with all tailwind classes. That would decrease performance a lot because of the bloat. We only ship the classes that we use.
That snippet might contain classes that we don't use.

To fix that you need to add your own asset pipeline and your own tailwind setup that goes through the classes you use and strips them. It's easier than it seems. You can find out how to add it here.

[vitaly107]

I see what you mean. However I believe there is something else in my problem. I cannot even get the flex layout work and those classes are surely present in AVO

[adrianthedev]

Are you sure? Here's a recording from avodemo.