Can't style a view in a hook ?

I'm having issues with styling ... none of my styling shows

<div class="flex flex-col items-center justify-center p-4 bg-blue-100 rounded-xl">
    <h4 class="text-xl text-yellow-400 !text-yellow-400 font-bold mb-4">
        Your storage
    </h4>
    <div class="w-full">
        <div class="flex justify-between mb-2">
            <p class="text-sm text-gray-600">25.6 GB</p>
            <p class="text-sm text-gray-600">50 GB</p>
        </div>
        <div class="h-2 w-full bg-blue-400 rounded-full">
            <div class="h-full w-1/2 rounded-full bg-blue-500"></div>
        </div>
    </div>
</div>

<div class="flex flex-col items-center justify-center p-4 bg-blue-100 rounded-xl">
    <h4 class="text-xl text-yellow-400 !text-yellow-400 font-bold mb-4">
        Your storage
    </h4>
    <div class="w-full">
        <div class="flex justify-between mb-2">
            <p class="text-sm text-gray-600">25.6 GB</p>
            <p class="text-sm text-gray-600">50 GB</p>
        </div>
        <div class="h-2 w-full bg-blue-400 rounded-full">
            <div class="h-full w-1/2 rounded-full bg-blue-500"></div>
        </div>
    </div>
</div>

Any idea why ?

13 Replies

CemOP•3w ago

No matter what my text is always black

mohdaftab•3w ago

I think you need to import tailwindcss css separately as I think the default css only has styling for the default classes which are used in Panels.

CemOP•3w ago

@mohdaftab oookay ... how do I do that ? lol

mohdaftab•3w ago

https://filamentphp.com/docs/3.x/support/assets#registering-css-files-from-a-url

Assets - Core Concepts - Filament

CemOP•3w ago

@mohdaftab brilliant ! Thanks mate !

mohdaftab•3w ago

You're welcome.

CemOP•3w ago

Ohh I finally understood ... i should have used the Vite asset ... duh !

mohdaftab•3w ago

I thought you were missing styling in some classes which is why I recommended to add extra css file, but glad that you have found the solution 🙂

CemOP•3w ago

I "thought" filament panels already brought all the Tailwind stuff ... another css mystery

mohdaftab•3w ago

I thought that too but when I tried to use different css classes from tailwind they didn't work. even with ! sign they didn't work, I had to do inline styling or import external css for those classes.

CemOP•3w ago

it's veeeeery nasty indeed

ModestasV•3w ago

Filament only brings the classes it needs to have it's UI working. Bringign all would be a huge load for just a few required classes. That's why, if you need custom styling - they recommend you to create a new theme and use it 🙂 It will inherit original colors as needed, but you can then build your custom stuff

CemOP•3w ago

@ModestasV thanks for the explanation; i'm still very early in the learning process - but yeah filament is indeed awesome !

Gaming

Programming

Can't style a view in a hook ?