How can i change variant for cards

[ZAAFHachemrachid]

hello every one , am new in js svelte skeleton and i want to if i can do this :

if you see in top left corner you will see that i want to change variant of card but what ever i do the color don`t change
you can visit the web site and see repo :
website :
https://zaafhachem.vercel.app/about_me
repo (the thing in src/routes/aboute_me/+page.svelte) :
https://github.com/ZAAFHachemrachid/myblog2

[endigo9740]

@ZAAFHachemrachid so two things here.

First, so the important thing to note about Tailwind is how it choses to bundle classes into your build's stylesheet. In a nutshell, the Tailwind compiler scans all paths specified in the Tailwind Config > content setting. This typically includes all your local app files, and in the case of Skeleton, the node_modules package path to Skeleton. To ensure Tailwind bundles the styles needed for components too.

When the compiler scans these your local app files, it's looking for a verbatim instance of that class in the files. This is why you cannot dynamically construct classes:
https://tailwindcss.com/docs/content-configuration#dynamic-class-names

So I would do two things:

1. You're passing these select option values through a couple levels of scope. Right click and inspect the card element on the page and ensure the class is being passed and applied where you expect it in the HTML markup. You should see it listed in the "class="" list.
2. If you see the class listed there, it's possible the class is not being included in your bundle for one reason or another. If this is the case, when you inspect the element that has the class, you should be able to use your dev tools to look at the styles applied via that class. It'll look something like this:

Note how not only is the variant-filled-primary class applied to the select element, but we can actually see the styles it applies. And even see what that looks like for both light and dark mode.

If you could please verify you see the same on your end.

[ZAAFHachemrachid]

hello thx for response.
if i understand you correct :


i go to inspect the value is change but the UI no , now i search for how to make it dynamic.

[ZAAFHachemrachid]

thank you i found the fix what i was do :

<script lang="ts">
	export let variant: String;
</script>

<div class="block card card-hover p-4 w-[300px] ${variant} ml-[10px] mb-5">
	<header class="card-header">
		<h2 class="h2">
			<span
				class="bg-gradient-to-br from-blue-900 to-blue-900 bg-clip-text text-transparent box-decoration-clone"
				>Lua Language</span
			>

and i supose to do like this :

<script lang="ts">
	export let variant: string;
</script>

<div>
	<div class={`block card card-hover p-4 w-[300px] ml-[10px] mb-5 ${variant}`}>
		<header class="card-header">
			<h2 class="h2">
				<span
					class="bg-gradient-to-br from-blue-400 to-blue-900 bg-clip-text text-transparent box-decoration-clone"
					>C Language</span

Big THX

[endigo9740]

Oh yeah I see the $ being appended at the beginning of the variant class. Yeah that would definitely cause issues!

Glad you got it sorted though!