Styling working example

[DzmitryFil]

I can't get global styles from example to work. Not sure if it's a bug or my config is bad, bad global styles from example have no impact at all

[vaheqelyan]

Can you provide more details?

[DzmitryFil]

Sure. I'm trying to change styling with global styles, as in the Usage->How to style from your website It seems like i can't. For instance changing background of :global(.svlt-grid-shadow) has no impact, because svelte-grid build adds .svlt-grid-shadow.svelte-x23om8 class after the .svlt-grid-shadow, so prebuilt one takes precedense. I hope it makes sense, i'm pretty new to css. My rollup plugins config

plugins: [
        svelte({
            preprocess: sveltePreprocess(),
            compilerOptions: {
                // enable run-time checks when not in production
                dev: !isProduction
            },
            emitCss: true
        }),

        typescript({
        }),

        // we'll extract any component CSS out into
        // a separate file - better for performance
        // css({ output: 'ui.css' }),

        resolve({
            browser: true,
            dedupe: ['svelte']
        }),
        commonjs(),

        smelte({
            purge: isProduction,
            output: "dist/ui.css", 
            postcss: [], // Your PostCSS plugins
            whitelist: [], // Array of classnames whitelisted from purging
            whitelistPatterns: [], // Same as above, but list of regexes
            tailwind: {
                plugins: [require('tailwind-scrollbar')],
                variants: {
                    scrollbar: ['rounded']
                },
                theme: {
                    extend: {
                    spacing: {
                        72: "18rem",
                        84: "21rem",
                        96: "24rem"
                    }
                    }
                }, // Extend Tailwind theme
                colors: {
                    primary: "#6a7685",
                    secondary: "#70918e",
                    error: "#f44336",
                    success: "#4caf50",
                    alert: "#ff9800",
                    blue: "#2196f3",
                    dark: "#212121"
                }, // Object of colors to generate a palette from, and then all the utility classes
            }, // Any other props will be applied on top of default Smelte tailwind.config.js
        }),

        copy({
            hook: 'writeBundle',
            targets: [
                {
                    src: 'dist/*',
                    dest: '../../webroot/',
                },
            ],
        }),
    ],

[vaheqelyan]

try this

:global(.svlt-grid-shadow) {
  background: green!important;
}

if you use the !important rule, it will override ALL previous styling rules for that specific property repl

[DzmitryFil]

It worked! Thank you very much.