Unable to create a custom theme

Hello,

When I follow the documentation, I get the message :

⇂ It looks like you have Tailwind v4 installed. Filament uses Tailwind v3. You should downgrade your project and re-run this command with `--force`, or use the following command to compile the theme with the Tailwind v3 CLI:
⇂ npx tailwindcss@3 --input ./resources/css/filament/admin/theme.css --output ./public/css/filament/admin/theme.css --config ./resources/css/filament/admin/tailwind.config.js --minify
⇂ Make sure to register the theme in the admin panel provider using `->theme(asset('css/filament/admin/theme.css'))`

⇂ It looks like you have Tailwind v4 installed. Filament uses Tailwind v3. You should downgrade your project and re-run this command with `--force`, or use the following command to compile the theme with the Tailwind v3 CLI:
⇂ npx tailwindcss@3 --input ./resources/css/filament/admin/theme.css --output ./public/css/filament/admin/theme.css --config ./resources/css/filament/admin/tailwind.config.js --minify
⇂ Make sure to register the theme in the admin panel provider using `->theme(asset('css/filament/admin/theme.css'))`

So I do it. And I add my css file in the vite.config.js.
But when I try to compile it. I get this error :

[@tailwindcss/vite:generate:build] Can't resolve 'tailwind.config.js' in 'C:\Users\foo\Herd\bar\resources\css\filament\admin'
file: C:\Users\foo\Herd\bar\resources\css\filament\admin\theme.css

[@tailwindcss/vite:generate:build] Can't resolve 'tailwind.config.js' in 'C:\Users\foo\Herd\bar\resources\css\filament\admin'
file: C:\Users\foo\Herd\bar\resources\css\filament\admin\theme.css

Here is my theme.css file

@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;
@import '../../../../vendor/filament/filament/resources/css/base.css';

@config 'tailwind.config.js';

@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;
@import '../../../../vendor/filament/filament/resources/css/base.css';

@config 'tailwind.config.js';

My tailwind.config.js file :

import preset from '../../../../vendor/filament/filament/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
}

import preset from '../../../../vendor/filament/filament/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
}

Could you help me please?

I tried a lot of different thing. When I downgrade tailwind before creating the theme, the compilation works. But the website is broken and the default tailwind style is not applied...

Thanks!

Solution

makes sense, if you don't specify the config file it will try to use the default one.

Jump to solution

Unable to create a custom theme

Hello,

When I follow the documentation, I get the message :

⇂ It looks like you have Tailwind v4 installed. Filament uses Tailwind v3. You should downgrade your project and re-run this command with `--force`, or use the following command to compile the theme with the Tailwind v3 CLI:
⇂ npx tailwindcss@3 --input ./resources/css/filament/admin/theme.css --output ./public/css/filament/admin/theme.css --config ./resources/css/filament/admin/tailwind.config.js --minify
⇂ Make sure to register the theme in the admin panel provider using `->theme(asset('css/filament/admin/theme.css'))`

⇂ It looks like you have Tailwind v4 installed. Filament uses Tailwind v3. You should downgrade your project and re-run this command with `--force`, or use the following command to compile the theme with the Tailwind v3 CLI:
⇂ npx tailwindcss@3 --input ./resources/css/filament/admin/theme.css --output ./public/css/filament/admin/theme.css --config ./resources/css/filament/admin/tailwind.config.js --minify
⇂ Make sure to register the theme in the admin panel provider using `->theme(asset('css/filament/admin/theme.css'))`

So I do it. And I add my css file in the vite.config.js.
But when I try to compile it. I get this error :

[@tailwindcss/vite:generate:build] Can't resolve 'tailwind.config.js' in 'C:\Users\foo\Herd\bar\resources\css\filament\admin'
file: C:\Users\foo\Herd\bar\resources\css\filament\admin\theme.css

[@tailwindcss/vite:generate:build] Can't resolve 'tailwind.config.js' in 'C:\Users\foo\Herd\bar\resources\css\filament\admin'
file: C:\Users\foo\Herd\bar\resources\css\filament\admin\theme.css

Here is my theme.css file

@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;
@import '../../../../vendor/filament/filament/resources/css/base.css';

@config 'tailwind.config.js';

@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;
@import '../../../../vendor/filament/filament/resources/css/base.css';

@config 'tailwind.config.js';

My tailwind.config.js file :

import preset from '../../../../vendor/filament/filament/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
}

import preset from '../../../../vendor/filament/filament/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
}

Solution

makes sense, if you don't specify the config file it will try to use the default one.

Jump to solution

Unable to create a custom theme

Unable to create a custom theme

Similar Threads

Similar Threads

Similar Threads