Topics

Filament•4w ago

ItsNeil 🇮🇳

Filament themes with Webpack

Hey, I am using webpack.config.js. I just installed filament on my laravel application, and I tried to shift to vite but failed ultimately. I would like to add my theme although I don't think it seems possible with my current config? Can anyone help me out by telling me if its possible or telling me how to shift to vite/webpack mix

29 Replies

ItsNeil 🇮🇳OP•4w ago

Bump

Dennis Koch•4w ago

Should be possible with webpack to. You need to add the theme.css to your mix file and then you can reference the output file via ->theme() in the Panel.

ItsNeil 🇮🇳OP•4w ago

That's the problem, I don't use mix, it's just webpack.config.js. Should I start using mix? I currently compile all my stuff using that and I tried to convert to both vite/webpack mix but wasn't able to I get

Error: Failed to find '/vendor/filament/filament/resources/css/theme.css'
  in [
    /var/www/adminsite/resources/css/filament/admin
  ]
    at /var/www/adminsite/node_modules/tailwindcss/node_modules/postcss-import/lib/resolve-id.js:35:13
    at async LazyResult.runAsync (/var/www/adminsite/node_modules/postcss/lib/lazy-result.js:261:11)
    at async build (/var/www/adminsite/node_modules/tailwindcss/lib/cli/build/index.js:49:9)

Error: Failed to find '/vendor/filament/filament/resources/css/theme.css'
  in [
    /var/www/adminsite/resources/css/filament/admin
  ]
    at /var/www/adminsite/node_modules/tailwindcss/node_modules/postcss-import/lib/resolve-id.js:35:13
    at async LazyResult.runAsync (/var/www/adminsite/node_modules/postcss/lib/lazy-result.js:261:11)
    at async build (/var/www/adminsite/node_modules/tailwindcss/lib/cli/build/index.js:49:9)

while trying to run the tailwindcss command:

npx tailwindcss --input ./resources/css/filament/admin/theme.css --output ./public/css/filament/admin/theme.css --config ./resources/css/filament/admin/tailwind.config.js --minify

npx tailwindcss --input ./resources/css/filament/admin/theme.css --output ./public/css/filament/admin/theme.css --config ./resources/css/filament/admin/tailwind.config.js --minify

provided by the create theme command I checked everywhere it just doesnt work well for me atleast

Dennis Koch•4w ago

What does your theme look like? Seems like webpack is using an absolute path. Or your basedir config is messing with it.

ItsNeil 🇮🇳OP•4w ago

At the moment it's has no edits, it's just the generated theme Also I tried to change the font of the headers using fi-header-heading or something like that, that also didn't work

Dennis Koch•4w ago

Yes. But just because the paths usually work with Vite it doesn't mean it works with Webpack. I think you need to check why the file wasn't found Nothing was compiled because it threw an error

ItsNeil 🇮🇳OP•4w ago

Not sure maybe it's because I'm using webpack config js? Instead of mix Yea although my other assets compile normally, just the filament doesnt Also it only threw an error when I tried tailwind cmd Webpack by itself works just that I don't know how to edit it to add filament

Dennis Koch•4w ago

Same as you would compile any CSS with Tailwind or PostCSS

ItsNeil 🇮🇳OP•4w ago

postcss.config.js

module.exports = {
    plugins: [
        require('postcss-import'),
        // We want to make use of nesting following the CSS Nesting spec, and not the
        // SASS style nesting.
        //
        // @see https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting
        require('tailwindcss/nesting')(require('postcss-nesting')),
        require('tailwindcss'),
        require('autoprefixer'),
        require('postcss-preset-env')({
            features: {
                'nesting-rules': false,
            },
        }),
    ],
};

module.exports = {
    plugins: [
        require('postcss-import'),
        // We want to make use of nesting following the CSS Nesting spec, and not the
        // SASS style nesting.
        //
        // @see https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting
        require('tailwindcss/nesting')(require('postcss-nesting')),
        require('tailwindcss'),
        require('autoprefixer'),
        require('postcss-preset-env')({
            features: {
                'nesting-rules': false,
            },
        }),
    ],
};

tailwind.config.js

module.exports = {
    content: [
        './resources/scripts/**/*.{js,ts,tsx}',
    ],
    theme: {
        extend: {
            colors: {
                black: '#131a20',
                // "primary" and "neutral" are deprecated, prefer the use of "blue" and "gray"
                // in new code.
                primary: colors.blue,
                gray: gray,
                neutral: gray,
                cyan: colors.cyan,
            },
            fontSize: {
                '2xs': '0.625rem',
            },
            transitionDuration: {
                250: '250ms',
            },
        },
    },
    plugins: [
        require('@tailwindcss/line-clamp'),
        require('@tailwindcss/forms')({
            strategy: 'class',
        }),
    ]
};

module.exports = {
    content: [
        './resources/scripts/**/*.{js,ts,tsx}',
    ],
    theme: {
        extend: {
            colors: {
                black: '#131a20',
                // "primary" and "neutral" are deprecated, prefer the use of "blue" and "gray"
                // in new code.
                primary: colors.blue,
                gray: gray,
                neutral: gray,
                cyan: colors.cyan,
            },
            fontSize: {
                '2xs': '0.625rem',
            },
            transitionDuration: {
                250: '250ms',
            },
        },
    },
    plugins: [
        require('@tailwindcss/line-clamp'),
        require('@tailwindcss/forms')({
            strategy: 'class',
        }),
    ]
};

those are my configs, the tailwind config is for the frontend (react) theme.css (generated by Filament)

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

@config 'tailwind.config.js';

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

@config 'tailwind.config.js';

tailwind.config.js

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',
    ],
}

Both of these files are in /resources/css/filament/admin/

Dennis Koch•4w ago

Shouldn't this be @import './vendor/filament/filament/resources/css/app.css';?

ItsNeil 🇮🇳OP•4w ago

Regenerated it, got @import '/vendor/filament/filament/resources/css/theme.css'; Also it looks like filament is trying to install something but npm fails

Dennis Koch•4w ago

No wait. Probably ../../../../vendor/filament/filament/resources/css/app.css'; Yes. I mean in your case? Webpack and Vite may work differently with paths

ItsNeil 🇮🇳OP•4w ago

yea looks like I got a different erro

Rebuilding...
Error: Cannot find module '@tailwindcss/typography'
Require stack:
- /var/www/pterodactyl/vendor/filament/support/tailwind.config.preset.js

Rebuilding...
Error: Cannot find module '@tailwindcss/typography'
Require stack:
- /var/www/pterodactyl/vendor/filament/support/tailwind.config.preset.js

I'll try to install with yarn, npm usually fails for me wow it built - let me check Is there any way I can do this with webpack though? I don't want to run the npx command everytime

Dennis Koch•4w ago

I bet there is. I am no Webpack expert though. Quick google search gave me this: https://gist.github.com/bradtraversy/1c93938c1fe4f10d1e5b0532ae22e16a

Gist

Setup Webpack with Tailwind CSS

Setup Webpack with Tailwind CSS. GitHub Gist: instantly share code, notes, and snippets.

ItsNeil 🇮🇳OP•4w ago

Is there a list of all the classes? Looks like my phpstorm doesn't want to auto fill classes anymore - even though it did originally

Dennis Koch•4w ago

What classes? Tailwind? Filament?

ItsNeil 🇮🇳OP•4w ago

Filament classes like .fi-header-heading I saw in the style customizations documentation but those aren't all of them

Dennis Koch•4w ago

There's no complete list. You need to check your DevTools

ItsNeil 🇮🇳OP•4w ago

Browser DevTools?

Dennis Koch•4w ago

Yes

ItsNeil 🇮🇳OP•4w ago

Okay thanks Looks like I'm getting a new error randomly

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

SyntaxError: Cannot use import statement outside a module

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

SyntaxError: Cannot use import statement outside a module

Dennis Koch•4w ago

There should be plenty of results for that error on Google.

ItsNeil 🇮🇳OP•4w ago

that is also with the same tailwind command ^ Okay yeah I will try to Google I assumed there wouldnt be because I looked alot around on Google before so

Dennis Koch•4w ago

You either need to change your file format or a setting your package.json

ItsNeil 🇮🇳OP•4w ago

Hey I set .fi-topbar's background color to green but doesn't show. I am trying to change backgrounds of the topbar, layout and sidebar. Layout and sidebar worked but topbar didn't. I should most likely do this with tailwind or the panel provider's ->color() attribute but I dont know which values from 50-950 are on which thing

Dennis Koch•4w ago

It's probably overwritten by some other declaration. Use your DevTools to figure that out.

ItsNeil 🇮🇳OP•4w ago

I checked, its not

ItsNeil 🇮🇳OP•4w ago

ItsNeil 🇮🇳OP•4w ago

Okay yeah removing dark:bg-gray-900 and bg-white seems to make the green appear, even though I added !important to green

Filament is a collection of beautiful full-stack components for Laravel.You can get help using it on our Discord.

19KMembers

View on Discord

Did you find this page helpful?