Tailwindcss + Nextjs 类 + 变量问题

Question

下午好，我需要帮助解决我在使用 tailwindcss + nextjs 时遇到的一个大问题...

所以问题是在设置类时，我需要使用一个变量，类是在 css 中设置的，但顺风并没有将类转换为样式。

我需要它是这样的：

我已经尝试将类设置为常量，我尝试在组件内部和 getstaticprops 中设置常量，但都没有用。 我试图在 css 本身中设置一个类，但它也没有用。

Answer 1

Tailwind 使用正则表达式查找类名，因此它们需要作为源代码中的完整字符串存在。这样做的结果是您不能按照您尝试的方式使用字符串插值，因为 Tailwind 将无法找到类名。

你可以做的是将你的道具映射到静态类名：

const Component = ({pokemon}) => {
  const pokemonBgVariants = {
    pikachu: 'bg-pokemontype-pikachu',
    bulbasaur: 'bg-pokemontype-bulbasaur',
    // ...
  }

  return (
    <div className=`[...other classes] ${pokemonBgVariants[pokemon.types[0].type.name]}`></div>
  )
}