Let 'class' override component styles

[nxy7]

Hello, first of all - great work. I found out about this project on reddit and im really impressed. Whole library looks very promising.
To my suprise it integrates with tailwind very nicely although you cannot really override default styles with it because they are applied before them. If i'm not mistaken classes on the right are applied first, so maybe just changing order and applying classes after component styling would allow easier workflow with tailwind.

I feel like with this implemented you get the best of both worlds - premade component with super easy styling.

[Brisklemonade]

Thank you for checking out the library, I really appreciate you using it! As for overriding styles with classes (such as with tailwind), I don't know how possible that would be as of now. I will explore options on being able to append/prepend styles. However as of now, you could try putting override on the properties you want to change and 'reset' their styles so that tailwind will have a higher specificity.

[Brisklemonade]

Now that I think about it. It may not be the best looking solution but can you try adding !important to your classes and tell me if that overrides them properly?

[nxy7]

I'm sure overriding them with !important would work, but that wouldn't work with tailwind. I've just realized that it's fault of the way svelte adds styling, so i'm not sure either if you can do anything about that. I think your workaround with overriding properties would work, but it kind of misses the point of using tailwind :P
I'll look around, maybe there's way to change the way svelte adds styles to components.

[nxy7]

Okay, i've dug deeper and here's what I found. First - styles do not get passed to components because svelte scopes them. So:

<style global>
	.btn {
		height: 100px !important;
	}
</style>

Using btn class on component will not work even with important if you declare it in .svelte file but it would work if you specify it in external imported css.
There is easier way tho.
Tailwind has important propety which adds !important to all styles.

module.exports = {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {}
  },
  important: true,
  plugins: []
};

So actually tailwind does work out of the box. I think you might even use that as a selling point for svelteui and add short instruction on how to get it working quickly. Pretty excited for future developments as this might be the best combo for rapid prototyping :-)

[Brisklemonade]

Thank you for investigating! That's a pretty neat solution, I didn't even know tailwind provided that as a config option. I will add tailwind integration to the docs!