# Describe The Problem

Tailwind statically analyses your app for tailwind classes and only looks for complete class names. src

So code like this will not work.

<button class="bg-{toggle ? 'blue' : 'red'}-500">click me!</button>

<div class="opacity-[{value}%]">Hi</div>

# Use Static Class Names

<script>
	let toggle = $state(false)
</script>

<button class={[toggle ? 'bg-blue-500' : 'bg-red-500']} onclick={() => (toggle = !toggle)}>
	click me!
</button>

# Use CSS variable

<script>
	let value = $state(20)
</script>

<div style="--opacity:{value}%" class="opacity-(--opacity)">Hi</div>
<input type="range" bind:value />{value}

<style lang="postcss">
	h1 {
		@apply mb-2 text-xl font-bold;
	}
</style>

# Use Vanilla CSS

<script>
	let value = $state(20)
	let percentage = $derived(`${value}%`)
	let opacity = $derived(`${value}%`)
</script>

<div style:opacity="{value}%">Hi!</div>
<div style:opacity={percentage}>Hi!!</div>
<div style:opacity>Hi!!!</div>

<input type="range" bind:value />
{value}