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

[Vahe]

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

[Vahe]

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.