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

Question

我只想拥有动态顺风 classes 值会在更改数据值时发生变化，是否可以使用顺风来实现？

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

我不知道为什么，但即使在浏览器中 div 元素中显示正确的 class，tailwind 也不会应用我制作的 classes。

左侧菜单：

(对等)

<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

The most important implication of how Tailwind extracts class names is that it will only find classes that exist as complete unbroken strings in your source files.

If you use string interpolation or concatenate partial class names together, Tailwind will not find them and therefore will not generate the corresponding CSS:

Don't construct class names dynamically

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

In the example above, the strings text-red-600 and text-green-600 do not exist, so Tailwind will not generate those classes.

Instead, make sure any class names you’re using exist in full:

Always use complete class names

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

As long as you always use complete class names in your code, Tailwind will generate all of your CSS perfectly every time.

source

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

Programmatically craft Tailwind classes with Vue

vue.js

tailwind-css

tailwind-in-js

左侧菜单：

内容：

脚本：

Tailwind 无法做到这一点 CSS