-
|
Hi. I want to create a vue 3 / tailwindcss application with theming functionality. I am thinking of doing something like this: <template>
<div data-theme="theme1">
<p class="text-primary">Hey cool my theme1 primary color gets set!</p>
</div>
</template>For themable components my idea would be something like this: <template>
<div class="card">
<p>Some cool card</p>
</div>
</template>
<style>
@layer components {
.card {
background-color: var(--color-primary);
}
}
</style>Unfortunately this doesn't work as I expect. I created a very basic Tailwind Play example here: https://play.tailwindcss.com/gNBIr7vtuP?file=css As you can see, the first My understanding was that I can create css custom properties in the But it seems that I misunderstood something here. So would someone please be so kind and could clarify, why this doesn't work and what a correct way of achieving this would be? |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
Quick solutionYou might as well skip the Explanation
|
Beta Was this translation helpful? Give feedback.
Quick solution
You might as well skip the
--color-primaryintermediary and use--primarydirectly. Or otherwise use--theme()which would "embed" the value of the--color-primarytoken (like whatinlinedoes): https://play.tailwindcss.com/kzGRhuAzkd?file=cssExplanation
.customreferences--color-primary. The CSS engine searches up the HTML tree until it finds its definition. It finds it on:root/<html>. The value isvar(--primary, #abc123). The engine then searches up the HTML from:root/<html>forvar(--primary). It doesn't find it and thus uses fallback#abc123.