@import statements fail to build with Filament v3.3.34 and Tailwind v3 - PostCSS cannot resolve vendor paths preventing custom themes

[emmanpbarrameda]

Package

Panel builder

Package Version

v3.3.34

How can we help you?

Problem Description:
I cannot use custom themes (including third-party themes like spykapp/filament-flat-theme) with Filament v3.3.34 because @import statements in CSS files consistently fail during the build process with PostCSS errors.
Environment:

• Filament: v3.3.34
• Laravel: 12
• PHP: 8.2+
• Tailwind CSS: 3.4.17 (exact version to match working setup)
• Vite: 5.3.5
• PostCSS: 8.5.6
• postcss-nesting: 13.0.2
• laravel-vite-plugin: 1.0.5
• Node: Latest LTS
• OS: Windows

What I'm trying to achieve:
Install and use the Filament Flat Theme package (or any custom theme) following the official Filament documentation for creating custom themes.

Steps taken:

Installed Tailwind v3 setup (removed all Tailwind v4 packages):
npm remove @tailwindcss/vite tailwindcss
npm install [email protected] @tailwindcss/[email protected] @tailwindcss/[email protected]
npm install [email protected] [email protected] [email protected]
npm install -D [email protected] [email protected]

Created postcss.config.js:

javascriptexport default {
    plugins: {
        'tailwindcss/nesting': 'postcss-nesting',
        tailwindcss: {},
        autoprefixer: {},
    },
}

Updated resources/css/app.css to Tailwind v3 syntax:
@tailwind base;
@tailwind components;
@tailwind utilities;

php artisan make:filament-theme admin

Added theme to vite.config.js:

javascriptinput: [
    'resources/css/app.css',
    'resources/js/app.js',
    'resources/css/filament/admin/theme.css',
],

Updated resources/css/filament/admin/theme.css with ANY of these import attempts:
@import '/vendor/spykapp/filament-flat-theme/resources/css/theme.css';
OR
css@import '../../../../vendor/filament/filament/resources/css/base.css';
OR
css@import '../../../../vendor/filament/filament/resources/css/theme.css';

Registered in AdminPanelProvider.php:
->viteTheme('resources/css/filament/admin/theme.css')

8. Ran npm run build

Error encountered:

C:\...\node_modules\tailwindcss\lib\index.js:1:1: Unknown word "use strict"
file: C:\...\resources\css\filament\admin\theme.css:1:0

The error occurs because:

• PostCSS processes the @import statement
• Follows the import chain through vendor CSS files
• Eventually tries to read Tailwind's JavaScript file (tailwindcss/lib/index.js)
• Fails when encountering JavaScript syntax

Important INFO:
This SAME setup works perfectly in my other project:

• Filament v3.2.142
• Identical package.json dependencies (exact same versions)
• Identical postcss.config.js
• Same @import statements
• Same flat theme package

The only difference is Filament v3.2.142 (works) vs v3.3.34 (fails).

What I've tried (all failed):

✗ Different import path formats (relative, absolute, with/without leading /)
✗ Different import orders (before/after @tailwind directives)
✗ Adding/removing @config directive
✗ Exact version matching with working project
✗ Clean node_modules reinstalls (multiple times)
✗ Different PostCSS configurations
✗ Copying vendor file to resources folder
✗ Using base.css vs theme.css from Filament
✗ Adding postcss-import filters to skip node_modules
✗ Downgrading/upgrading Vite versions

Questions:

• Did something change in Filament v3.3 regarding how themes are built? The fact that v3.2.142 works but v3.3.34 doesn't suggests a breaking change in the theme system.
• Is there a recommended way to use custom themes with Filament v3.3+ when @import statements consistently fail?
• Should we be using a different approach than @import for including vendor CSS files in Filament v3.3?

Is this a known issue with Filament v3.3? Is there an official solution or updated documentation for creating custom themes in v3.3+?

[emmanpbarrameda]

up

[emmanpbarrameda]

up

[leandrocfe]

Are you able to create a minimal repo on Github to reproduce this issue?