Filament•11mo ago

Weird error in compile theme

I create a custom theme using https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme If I didn't build then I can see all color. Then I run npm run build and all my color are gone.. What can be the problem? Warning is displaying when I build also I didn't install another tailwind, I just create theme using the link above

Solution:

This give me another Idea, now I use style="border-color: {{ $attr['color'] }}" and it's working fine.. thanks

Jump to solution

5 Replies

VpOP•11mo ago

For now I just put all color I have and it's works now..

<div class="hidden border-red-500 border-green-500 border-blue-500"></div> // without this line it's not working

<div class="border-2 rounded-full border-{{ $attr['color'] }}-500">1</div>

<div class="hidden border-red-500 border-green-500 border-blue-500"></div> // without this line it's not working

<div class="border-2 rounded-full border-{{ $attr['color'] }}-500">1</div>

Dennis Koch•11mo ago

border-{{ $attr['color'] }}-500

This will never work with Tailwind. It can't fetch the classes you use, when they are dynamic.

VpOP•11mo ago

Thanks for explanation and what will be the best approach to deal with them?

Dennis Koch•11mo ago

Either write them out, or use Filaments color system:

<div
  class="border-custom-500"
  style="{{ get_color_css_variables('red', [500]) }}"

<div
  class="border-custom-500"
  style="{{ get_color_css_variables('red', [500]) }}"

Solution

Vp•11mo ago

This give me another Idea, now I use style="border-color: {{ $attr['color'] }}" and it's working fine.. thanks

Gaming

Programming

Weird error in compile theme