Can I make the AppRail width dynamically change

[adamdva]

Hello, I have an AppRail that, on a button click, hides the AppRailTile text and tries to set the width to a smaller size.
Setting the width to a svelte reactive variable does not seam to work, like
<AppRail width="w-{$railWidth}"
I see the value changing in the developer tools, but the AppRail is not changing size. New to skeleton and svelte, so any suggestions would be appreciated.

[endigo9740]

w-{$railWidth}

Here's Tailwind's documentation on this. In short, constructed classes like this are not supported:
https://tailwindcss.com/docs/content-configuration#dynamic-class-names

The best way to think about this is that Tailwind reads the values verbatim from your code. This means it sees w-{$railWidth} as the actual class value, which of course doesn't exist. Rather than the parsed value after the logic runs.

So the better option is to toggle between a set of canned options like so:

let sizeSmall = false

<AppRail width={sizeSmall ? 'w-[50px]` : 'w-[100px]`}>

You could abstract this further if you wanted to have multiple options, but again, remember when Tailwind inspects the file, the classes it finds must be legit classes.

[adamdva]

Thank you for the quick answer, it worked. I had not dug that far into the Tailwind docs, I appreciate it.