I Just want to have dynamic tailwind classes values that changes when change a data value, it is possible to do it using tailwind?
In my example I have a double side menus and a main content, I want to set the menus width and programmatically change the margins that have the main content.
I don't know why but tailwind doesn't apply my crafted classes even if in the browser shows the right class in the div element.
Left side menu:
(right is equal)
<nav
class="fixed overflow-x-scroll bg-gray-700 top-16 h-screen"
:class="classes.leftSidebar"
>
<h1 class="text-xl text-center font-bold pt-5">Menu</h1>
<ul class="list-none text-white text-center">
<li class="my-8">
<a href="#">Teams</a>
</li>
<li class="my-8">
<a href="#">Projects</a>
</li>
<li class="my-8">
<a href="#">Favourites</a>
</li>
<li class="my-8">
<a href="#">Notifications</a>
</li>
<li class="my-8">
<a href="#">Members</a>
</li>
</ul>
</nav>
Content:
<main :class="classes.main">
<slot></slot>
</main>
Script:
data() {
return {
showingNavigationDropdown: false,
sidebar_left_w: 64,
sidebar_right_w: 64,
}
},
computed: {
classes() {
return {
leftSidebar: `w-[${this.sidebar_left_w}rem]`,
rightSidebar: `w-[${this.sidebar_right_w}rem]`,
main: [`mr-[${this.sidebar_right_w}rem]`, `ml-[${this.sidebar_left_w}rem]`],
}
}
},
I also tried leftSidebar: `w-${this.sidebar_left_w}`,
but same results
This is not possible with Tailwind CSS
source