Custom theme and @layer precedence

[fedenuche]

Package

Panel builder

Package Version

v4.1.6

How can we help you?

Context:

• Upgrading from v3 to v4.
• Using a custom theme.

Problem:
After the migration, I noticed some strange behaviors. For example, I'm adding a border, and it doesn't show. Checking the styles in the browser dev tools, I can observe that the base layer is taking precedence over the utilities layer.

Example:

This is how it should look.

This is how it looks after the migration (without the border, wrong margin, and incorrect padding).

As seen in the styles.

This is my theme.css

Workaround
I test a lot of things, but the only one that solves the precedence issue was adding the @import "tailwindcss" important; at the top of my theme.css file. But this causes another problem, now the style="display: none" is not working.

What am I doing wrong? Can you help me?

[leandrocfe]

Did you add tailwindcss() in the vite.config.js?

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/filament/admin/theme.css',
                'resources/js/app.js'
            ],
            refresh: true,
        }),
        tailwindcss()
    ],
});

[leandrocfe]

You could create a minimal repo on github, using this code, to reproduce this issue. I can take a look

[fedenuche]

@leandrocfe Can I give you access to a private repository?

[leandrocfe]

sure. leandrocfe is my username in github

[fedenuche]

I sent you an invitation. Please let me know if I can assist you, and thank you for your help.

[leandrocfe]

I'll take a look and let you know. Thanks

[howdu]

Ran into a similar issue and found it was due to another plugin including @tailwind utilities; twice.

[fedenuche]

I searched to see if I'm using @tailwind utilities; or just @tailwind, but I didn't find any other occurrences.

What I did:

A) In my app.css I replaced this:

@tailwind base;
@tailwind components;
@tailwind utilities;

for this:
@import "tailwindcss":

B) And in the theme.css I'm using:

@import '../../../../vendor/filament/filament/resources/css/theme.css';
@source '../../../../app/Filament';
@source '../../../../resources/views/filament';

So I think I'm not duplicating that. Thanks for the tip.

[leandrocfe]

Could you please remove temporarily this plugin "blendbyte/filament-title-with-slug": "dev-fila4" and build your project again?

I think this plugin contains @import 'tailwindcss/utilities' layer(utilities)

[fedenuche]

After struggling with this for so long, your solution finally worked! I can't thank you enough. You are the best

[leandrocfe]

no problem ;)