我只是想有动态顺风类的值,改变时,改变一个数据值,这是可能的,用顺风?
在我的例子中,我有一个双面菜单和一个主内容,我想设置菜单宽度,并以编程方式更改包含主内容的边距。
我不知道为什么tailwind不应用我制作的类,即使在浏览器中显示了div元素中的正确类。
左侧菜单:
(权利平等)
<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>
内容物:
<main :class="classes.main">
<slot></slot>
</main>
脚本:
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]`],
}
}
},
我也尝试了leftSidebar:
w-${this.sidebar_left_w},
,但结果相同
1条答案
按热度按时间kmb7vmvb1#
这在Tailwind CSS中是不可能的
Tailwind如何提取类名的最重要的含义是,它只会找到源文件中作为完整的未断开字符串存在的类。
如果使用字符串插值或将部分类名连接在一起,Tailwind将找不到它们,因此不会生成相应的CSS:
在上面的示例中,字符串text-red-600和text-green-600不存在,因此Tailwind不会生成这些类。
始终使用完整的类名
只要你总是在代码中使用完整的类名,Tailwind每次都会完美地生成你所有的CSS。
源