使用 Vue.js 计算方法添加 Tailwindcss 类名

Question

我正在尝试使用一些方法和函数为组件生成预定义的顺风类名称。类名作为静态形式可以很好地工作。但是当我使用计算方法和我的函数时，组件不会有任何样式。

const getClass = computed(()=>{
  return useColorAsBackgroundClass(props.color, props.shade)
})

这个函数生成“-bg--l-green-50”形式的字符串，静态分类完全可以接受

<div class="-bg--l-green-50"></div> <!-- works fine --!>

我尝试在 css 的

v-bind()

方法中使用代码作为

var()

。我还单独尝试了

v-bind()

，为计算的返回文本添加 var() 。

还有

  <button :class="{getClass}" type="button">
    hi
  </button>

不起作用，不是 {} 或 []。

Answer 1

根据文档：

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

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

不要动态构造类名

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

在上面的示例中，字符串

text-red-600

和

text-green-600

不存在，因此 Tailwind 不会生成这些类。 相反，请确保您使用的任何类名完整存在：

始终使用完整的类名

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

你可以：

• 将整个类放在

  prop

  中（确保包含

  component

  usage 的文件被 Tailwind 配置中的

  content

  文件团覆盖）：

  <component color-class="-bg--l-green-50" …>
  

  <button :class="colorClass">
  

• 拥有

  color

  和

  shade

  到 Tailwind 类名的字典（确保定义字典的文件被 Tailwind 配置中的

  content

  文件全局覆盖）：

  const DICTIONARY = {
    'l-green': {
      50: '-bg--l-green-50',
      60: '-bg--l-green-60',
      70: '-bg--l-green-70',
      80: '-bg--l-green-80',
      // …
    }
  }
  const useColorAsBackgroundClass = (color, shade) => {
    // …
    return DICTIONARY[color][shade];
  }
  

• safelist

  类别，如果您的已知颜色数量有限：

  module.exports = {
    safelist: [
      { pattern: /^-bg--l-(green|red|blue)-\d+$/ },
      // …
    ],
    // …
  ];