ItsNeil 🇮🇳 Comments - Answer Overflow

ItsNeil 🇮🇳

•Created by ItsNeil 🇮🇳 on 1/28/2025 in #❓┊help

Filament themes with Webpack

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

51 replies

FFilament

•Created by ItsNeil 🇮🇳 on 1/28/2025 in #❓┊help

Filament themes with Webpack

51 replies

FFilament

•Created by ItsNeil 🇮🇳 on 1/28/2025 in #❓┊help

Filament themes with Webpack

I checked, its not

51 replies

FFilament

•Created by ItsNeil 🇮🇳 on 1/28/2025 in #❓┊help

Filament themes with Webpack

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

51 replies

FFilament

•Created by ItsNeil 🇮🇳 on 1/28/2025 in #❓┊help

Filament themes with Webpack

Okay yeah I will try to Google I assumed there wouldnt be because I looked alot around on Google before so

51 replies

FFilament

•Created by ItsNeil 🇮🇳 on 1/28/2025 in #❓┊help

Filament themes with Webpack

that is also with the same tailwind command ^

51 replies

FFilament

•Created by ItsNeil 🇮🇳 on 1/28/2025 in #❓┊help

Filament themes with Webpack

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

51 replies

FFilament

•Created by ItsNeil 🇮🇳 on 1/28/2025 in #❓┊help

Filament themes with Webpack

Okay thanks

51 replies

FFilament

•Created by ItsNeil 🇮🇳 on 1/28/2025 in #❓┊help

Filament themes with Webpack

Browser DevTools?

51 replies

FFilament

•Created by ItsNeil 🇮🇳 on 1/28/2025 in #❓┊help

Filament themes with Webpack

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

51 replies

FFilament

•Created by ItsNeil 🇮🇳 on 1/28/2025 in #❓┊help

Filament themes with Webpack

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

51 replies

FFilament

•Created by ItsNeil 🇮🇳 on 1/28/2025 in #❓┊help

Filament themes with Webpack

Is there any way I can do this with webpack though? I don't want to run the npx command everytime

51 replies

FFilament

•Created by ItsNeil 🇮🇳 on 1/28/2025 in #❓┊help

Filament themes with Webpack

wow it built - let me check

51 replies

FFilament

•Created by ItsNeil 🇮🇳 on 1/28/2025 in #❓┊help

Filament themes with Webpack

I'll try to install with yarn, npm usually fails for me

51 replies

FFilament

•Created by ItsNeil 🇮🇳 on 1/28/2025 in #❓┊help

Filament themes with Webpack

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

51 replies

FFilament

•Created by ItsNeil 🇮🇳 on 1/28/2025 in #❓┊help

Filament themes with Webpack

yea looks like I got a different erro

51 replies

FFilament

•Created by ItsNeil 🇮🇳 on 1/28/2025 in #❓┊help

Filament themes with Webpack

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

51 replies

FFilament

•Created by ItsNeil 🇮🇳 on 1/28/2025 in #❓┊help

Filament themes with Webpack

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/

51 replies

FFilament

•Created by ItsNeil 🇮🇳 on 1/28/2025 in #❓┊help

Filament themes with Webpack

those are my configs, the tailwind config is for the frontend (react)

51 replies

FFilament

•Created by ItsNeil 🇮🇳 on 1/28/2025 in #❓┊help

Filament themes with Webpack

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

51 replies

Gaming

Programming