Проблема

Я хочу повторно использовать свой компонент React с разными цветами. Я хочу передать цвет дочернему узлу в качестве реквизита, а затем использовать его в className как часть класса Tailwind.

Ниже приведен пример кода, иллюстрирующий проблему:

Приложение.jsx:

import Box from "./Box";

function App() {
  return (
    <div className = "flex flex-row">
      <Box color = {"red-500"} />
      <Box color = {"blue-500"} />
    </div>
  );
}

export default App;

Box.jsx:

export default function Box({color}) {
    return <div className = {`bg-${color} w-10 h-10 m-2`}></div>
}

Результат должен выглядеть примерно так:

Вместо этого цвет не применяется - я получаю белые коробки. Классы попутного ветра bg-red-500 и bg-blue-500 не генерируются.

Возможные решения

1. Полные имена классов

Если я передам полные имена классов Tailwind дочерним элементам и не попытаюсь создать имя класса, соединив 2 жала вместе, это сработает.

<Box color = {"red-500"} /> => <Box color = {"bg-red-500"} />
...
return <div className = {`$bg-{color} w-10 h-10 m-2`}></div> => return <div className = {`${color} w-10 h-10 m-2`}></div>

Однако это не идеальное решение, потому что я хотел бы использовать один и тот же цвет с разными классами, такими как bg-red-500, text-red-500, hover:text-red-500 и т. д. Поэтому я бы предпочел уменьшить дублирование кода.

2. Используйте безопасный список

Полные имена классов можно добавить в список надежных отправителей в конфигурации попутного ветра, чтобы они всегда генерировались.

module.exports = {
...js
  safelist: [
    "bg-red-500",
    "text-red-500",
    "hover:text-red-500",
  ],
...
};

Форма Tailwind документация:

Добавление в безопасный список — это крайняя мера, и его следует использовать только в тех случаях, когда невозможно просканировать определенный контент на наличие имен классов. Такие ситуации случаются редко, и вам почти никогда не понадобится эта функция.

Я не сторонник использования функций последней инстанции, и мне все равно пришлось бы управлять множеством классов в списке безопасных для одного цвета.

Вопрос

Есть ли лучший способ динамического использования классов Tailwind? Какое решение рекомендуется в этом случае?