search

weicheng2138 / vue3-input

A elegant input with tailwind and validator
0 stars 1 forks source link

input - Tailwind cannot dynamicly use arbitrary styles with variables #1

Closed weicheng2138 closed 2 years ago

weicheng2138 commented 2 years ago

In vue3 dynamic class, I cannot use :class="`max-h-[${variable}px]`". Tailwind did tell you not to do this. However, if I do this below

  const getTailwindClassString = (
    tailwindClassHead: string,
    variable: string | number
  ): string => {
    console.log(`${tailwindClassHead}-[${variable}px]`)
    return `${tailwindClassHead}-[${variable}px]`
  }

And return the value to :class="`getTailwindClassString()`". The result still cannot work.

weicheng2138 commented 2 years ago

It's not a bug due to the mechanism of tailwindcss.