Some Tailwind CSS classes not working?
Hey everyone,
I hope you're all doing well. I'm currently working on a project and I've run into a bit of a roadblock. I'm trying to use the "grid-cols-4" class in my project, but for some reason, it doesn't seem to be working as expected.however "grid-cols-2" and "grid-cols-3" working fine.
Here's what I've tried so far:
Ensured that I'm using the class correctly in my HTML markup.
Checked my Tailwind configuration to make sure the "grid" utility variants are enabled.
Verified that I'm running the npm run dev command to update my changes.
Inspected the generated CSS in my browser's developer tools to see if the class is being applied.
Despite these efforts, the "grid-cols-4" class doesn't seem to take effect. I've included the class in the safelist array in my tailwind.config.js file, so it should not be purged during the build process.
If anyone has encountered a similar issue or has expertise with Tailwind CSS, I'd greatly appreciate your input. Please feel free to share any suggestions, insights, or troubleshooting steps that might help me get past this roadblock.
Thank you in advance for your help! 🙏
40 Replies
Are you using it within a Filament component? Can I see what you have?
did you rebuild with npm after adding to the safelist?
Reason I asked is because you can't add extra class attributes to many Filament components.
Component file
<?php
namespace App\Filament\Pages;
use App\Models\Table;
use Filament\Pages\Page;
use Illuminate\Contracts\View\View;
class Pos extends Page
{
protected static ?string $navigationIcon = 'heroicon-o-document-text';
protected static string $view = 'filament.pages.pos';
public $tables;
public function mount()
{
$this->tables = Table::all();
}
}
Blade file
<x-filament-panels::page>
<div class="container mx-auto">
<div class="grid grid-cols-4 gap-4 ">
@foreach ($tables as $item)
<div class="rounded-lg bg-white p-4 shadow-lg dark:bg-gray-800">
<div class="aspect-w-3 aspect-h-4 mb-4">
<img src="image.png" alt="Product 1"
class="object-cover rounded-lg w-full h-48 object-cover">
</div>
<h2 class="text-lg font-semibold">Product 1</h2>
<p class="text-gray-600 dark:text-gray-400">Description of Product 1.</p>
<p class="font-semibold text-green-500">$19.99</p>
<button class="mt-2 rounded-full bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">Add to Cart</button>
</div>
@endforeach
</div>
</div>
</x-filament-panels::page>
Hope this will help
Yes
I also added grid-cols-4 in the safelist of tailwind.config.js
import preset from "./vendor/filament/support/tailwind.config.preset";
export default {
presets: [preset],
content: [
"./app/Filament/**/*.php",
"./resources/views/**/*.blade.php",
"./vendor/filament/**/*.blade.php",
{ raw: '<div class="grid gap-4 grid-cols-4">', extension: 'html' },
],
safelist: ["grid-cols-4"],
};
Try some tailwind classes that do something similar to "grid grid-cols-4", etc...
i already tried h-48 class in img tag it's also not working 😢
I think Filament has a component for grid columns... Try that
Yeah you are right but i want to build my custom desgin 😢
I'm not sure what to tell you... The parent filament component may not be compatable with the tailwind classes. It has happened to me before.
You need to review the grid builder more. You can pass in the widths for full responsive design
Indeed, this technique may work for that situation, however I still require certain more classes, such as h-48.
You should be able to pass in any classes.
Thanks for your help may someone else will help who have knowlege why these classes ara not woking.
I kind already explained why they aren’t, or at least to my knowledge why they might not be working
Yes, you are correct. Infolist may fix my problem, however it complicates my code because I've built some business logic on top of it.
Inspect the css from the browser, are there any tailwind classes that are similar to grid grid-cols-* that would be overriding yours
No
Nice, what's the goal here? You could just use native livewire for such a bespoke display
@waleedgrt So you did all the steps to create a custom theme for your panel? https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme
And this isn't from some plugin as well?
No, i am not creating a custom theme in Filament; i followed this guide to create page https://filamentphp.com/docs/3.x/panels/pages
You have to create a custom theme
Ok, I think this will work, and I'll test it out and let you know if it works or not.
If that doesn't work then do this:
In
theme.css for your panel theme:
And if that doesn't work then sorry your on your own with this one...
@waleedgrt Not work??I followed this guide
⇂ First, add a new item to the
⇂ Next, register the theme in the admin panel provider using
⇂ Finally, run
input array of vite.config.js: resources/css/filament/admin/theme.css⇂ Next, register the theme in the admin panel provider using
->viteTheme('resources/css/filament/admin/theme.css')⇂ Finally, run
npm run build to compile the theme
But there is an another error
GET http://127.0.0.1:5173/resources/css/filament/admin/theme.css net::ERR_CONNECTION_REFUSED
pos:67 GET http://127.0.0.1:5173/@vite/client net::ERR_CONNECTION_REFUSED
Do you have any clue what went wrong? Did I miss some configuration?
Are you using an Adblocker? I've had issues with this before
Yes
Disable it for your local site
Nope
Still not working 😢
Can you try in a inkognito window?
Same
Is your vite server running? With
npm run dev?ohh Vite server was not running its working now 👏
Thanks @Andrew Wallo
Thanks this solved my problem ❤️