使用 Vue 以编程方式制作 Tailwind 类

Question

我只想拥有在更改数据值时更改的动态顺风类值，可以使用顺风来实现吗？

在我的示例中，我有一个双面菜单和一个主要内容，我想设置菜单宽度并以编程方式更改具有主要内容的边距。

我不知道为什么，但 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}`, 但结果相同

Answer 1

这在 Tailwind CSS 中是不可能的

Tailwind 如何提取类名的最重要的含义是它只会找到在源文件中作为完整的不间断字符串存在的类。

如果您使用字符串插值或将部分类名连接在一起，Tailwind 将找不到它们，因此不会生成相应的 CSS：

不要动态构造类名

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>
<!-- This will not work -->

在上面的示例中，字符串 text-red-600 和 text-green-600 不存在，因此 Tailwind 不会生成这些类。

相反，请确保您使用的所有类名都完整存在：

始终使用完整的类名

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

只要您始终在代码中使用完整的类名，Tailwind 每次都会完美地生成所有 CSS。

source