变更

const bgColor = 'bg-' + (dark ? 'black' : 'white')
  const textColor = 'text-' + (dark ? 'white' : 'black')
  const borderColor = 'border-' + (dark ? 'white' : 'black')
  const borderStyle = 'border-' + (dark ? 'solid' : 'dashed')

到

const bgColor = dark ? 'bg-black' : 'bg-white'
  const textColor = dark ? 'text-white' : 'text-black'
  const borderColor = dark ? 'border-white' : 'border-black'
  const borderStyle = dark ? 'border-solid' : 'border-dashed'

解释：

是否建议在tailwind中使用dynamic class？

不

通常不建议在tailwind-css中使用dynamic classes，因为tailwind使用tree-shaking，即任何未在源文件中声明的类，都不会在输出文件中生成。
因此，始终建议使用***完整类名***
根据[文件][1]
如果使用字符串插值或将部分类名连接在一起，Tailwind将找不到它们，因此不会生成相应的CSS

周围没有工作吗？

是

作为最后的手段，Tailwind提供[安全列表课程][2]。
安全列表是最后的手段，应该只在不可能扫描某些内容以查找类名的情况下使用。这种情况很少见，您应该几乎永远不需要此功能。
您可以使用[regular expressions][3]来包含使用pattern所需的所有颜色

注意：您也可以强制Tailwind创建variants：

在tailwind.config.js中

module.exports = {
  content: [
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}',
  ],
  safelist: [
    {
      pattern: /bg-(red|green|blue|orange)/, // You can display all the colors that you need
      variants: ['lg', 'hover', 'focus', 'lg:hover'],      // Optional
    },
  ],
  // ...
}

更新：这仍然不工作的颜色以外的黑色/白色，这是怎么回事？
解决方案：根据tailwindcss文档
不要动态构造类名
始终使用完整的类名
https://tailwindcss.com/docs/content-configuration#dynamic-class-names
工作代码：

// ...
  const bgColor = dark ? 'bg-black' : 'bg-white'
  const textColor = dark ? 'text-white' : 'text-black'
  const borderColor = dark ? 'border-white' : 'border-black'
  const borderStyle = dark ? 'border-solid' : 'border-dashed'
// ...

不同之处在于，整个实用程序类是有条件地构造的，然后插入到jsxclassName属性中的模板字符串文字中。
问：我仍然想知道为什么border-color的情况不同，因为我在有条件地构造实用程序类时遇到过几个类似的情况。