Filament•2y ago

Laravel mix error - when trying to build filament theme

Hello, i followed this guide here: https://filamentphp.com/docs/2.x/admin/appearance#building-themes - when I import filament.css in /resources/css/filament.css with @import '../../vendor/filament/filament/resources/css/app.css';
Mix ends with error:

vendor/filament/filament/resources/css/app.css The `from-gray-200` class does not exist. If `from-gray-200` is a custom class, make sure it is defined within a `@layer` directive.

vendor/filament/filament/resources/css/app.css The `from-gray-200` class does not exist. If `from-gray-200` is a custom class, make sure it is defined within a `@layer` directive.

Filament

Appearance - Admin Panel - Filament

The elegant TALL stack admin panel for Laravel artisans.

Solution:

Moving colors in tailwind config from module.export -> theme to module.export -> theme -> extends and removing plugin with addUtilities() resulted in fixing error, thanks everyone for your time im marking this as solved

Jump to solution

16 Replies

Vp•2y ago

Can you share your postcss.config.js and webpack.mix.js file and what laravel version you're using to build with mix?

toeknee•2y ago

from-gray-200 ? Doesn't sound like a tailwind class. Provide your filament.css too.

MagikstahOP•2y ago

Sure, webpack.mix.js

// webpack.mix.js

let mix = require('laravel-mix');

mix.js("resources/js/app.js", "public/js")
    .postCss("resources/css/app.css", "public/css", [
        require("tailwindcss"),
    ])
    .postCss("resources/css/filament.css", "public/css", [
        require("tailwindcss"),
    ])
    .postCss("resources/css/authpage.css", "public/css", [
        require("tailwindcss"),
    ])
    .copyDirectory('resources/assets/fonts', 'public/fonts');

// webpack.mix.js

let mix = require('laravel-mix');

mix.js("resources/js/app.js", "public/js")
    .postCss("resources/css/app.css", "public/css", [
        require("tailwindcss"),
    ])
    .postCss("resources/css/filament.css", "public/css", [
        require("tailwindcss"),
    ])
    .postCss("resources/css/authpage.css", "public/css", [
        require("tailwindcss"),
    ])
    .copyDirectory('resources/assets/fonts', 'public/fonts');

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Laravel v9.52 filament v2.17.5 Filament.css

@import '../../vendor/filament/filament/resources/css/app.css';

@import '../../vendor/filament/filament/resources/css/app.css';

This from-gray-200 class comes from app.css that is located in Filament package -

 .filament-login-page form::before {
        @apply absolute inset-x-0 mx-auto h-px w-2/3 bg-gradient-to-r from-gray-200 via-primary-400 to-gray-200 dark:from-gray-700 dark:via-primary-400 dark:to-gray-700;

 .filament-login-page form::before {
        @apply absolute inset-x-0 mx-auto h-px w-2/3 bg-gradient-to-r from-gray-200 via-primary-400 to-gray-200 dark:from-gray-700 dark:via-primary-400 dark:to-gray-700;

Directory:

 vendor/filament/filament/resources/css/app.css

 vendor/filament/filament/resources/css/app.css

Vp•2y ago

I used vite a lot and forgot what mix file look like 😂 what if you remove other css file from mix.js? and what is your service provider boot() look like?

MagikstahOP•2y ago

In boot i have

 Filament::registerTheme(
            mix('css/filament.css'),
        );

 Filament::registerTheme(
            mix('css/filament.css'),
        );

But obviously it results in error since mix cant build filament.css, removing other files from mix doesnt change anything tho

wyChoong•2y ago

have you run this npm install tailwindcss @tailwindcss/forms @tailwindcss/typography autoprefixer tippy.js --save-dev ?

MagikstahOP•2y ago

Yop - versions:

        "autoprefixer": "^10.4.14",
        "tailwindcss": "^3.3.3",
        "@tailwindcss/forms": "^0.5.4",
        "@tailwindcss/typography": "^0.5.9",
        "laravel-mix": "^6.0.49",
        "tippy.js": "^6.3.7",

        "autoprefixer": "^10.4.14",
        "tailwindcss": "^3.3.3",
        "@tailwindcss/forms": "^0.5.4",
        "@tailwindcss/typography": "^0.5.9",
        "laravel-mix": "^6.0.49",
        "tippy.js": "^6.3.7",

Vp•2y ago

I think the docs have put wrong data.. should not be mix('resources/css/filament.css')

MagikstahOP•2y ago

 mix('css/filament.css')

 mix('css/filament.css')

is good, since removing

@import '../../vendor/filament/filament/resources/css/app.css';

@import '../../vendor/filament/filament/resources/css/app.css';

from filament.css leads to complete file build and breaking whole css on filament pages

Vp•2y ago

No idea then.. please wait for the core team helps (or use vite 😆 )

MagikstahOP•2y ago

Vite doesnt build aswell:

 /vendor/filament/forms/dist/module.esm.css:1545:3: The `border-gray-300` class does not exist. If `border-gray-300` is a custom class, make sure it is defined within a `@layer` directive.

 /vendor/filament/forms/dist/module.esm.css:1545:3: The `border-gray-300` class does not exist. If `border-gray-300` is a custom class, make sure it is defined within a `@layer` directive.

LeandroFerreira•2y ago

This article can help you https://filamentphp.com/blog/easy-way-to-create-a-filament-theme-in-minutes

Filament

Easy way to create a Filament Theme in minutes! by Leandro C. Ferre...

Filament is a collection of tools for rapidly building beautiful TALL stack apps, designed for humans.

MagikstahOP•2y ago

Seems pretty much like my code, problem comes from Filament's vendor CSS file

LeandroFerreira•2y ago

you should try again step by step..

awcodes•2y ago

What does your tailwind.config.js look like.

Solution

Magikstah•2y ago

Gaming

Programming

Laravel mix error - when trying to build filament theme