props 可以传递到 tailwindcss 类中吗？

Question

我正在尝试做的事情 - 创建一个可重用组件，将值传递到扩展背景图像类中。

问题 - 直到我第一次使用每个背景图像的硬编码类运行 jsx 后，背景图像才会出现

我的tailwindcss配置：

theme: {
    extend: {
      backgroundImage: {
        "race-1": "url('./src/assets/race1.png')",
        "race-2": "url('./src/assets/race2.png')",
        "race-3": "url('./src/assets/race3.png')",
        "class-1": "url('./src/assets/class1.png')",
        "class-2": "url('./src/assets/class2.png')",
        "class-3": "url('./src/assets/class3.png')",
      },
    },
  },

我的组件：

export const SelectionCard = (props) => {
  //passing the props in for 'class,race,etc' and '1,2,etc'
  const selectionCategory = props.category;
  const selectionName = props.name;
  
  //creates the custom class to apply the background image, doesn't work until images are already loaded
  const addSelectionClass = (passedSelectionCategory, passedSelectionName) => {
    const adjustedSelectionCategory = passedSelectionCategory.toLowerCase();
    const adjustedSelectionName = passedSelectionName.toLowerCase();

    return (
      "classBackground bg-" +
      adjustedSelectionCategory +
      "-" +
      adjustedSelectionName +
      " saturate-30 hover:saturate-100 flex justify-center w-full h-full"
    );
  };

  // I have to first load the classes by inserting them on first page load, then I can change them to the 'adjustedSelectionClass' in jsx and they load fine with the above function
  const loadedClassBackgrounds = "bg-class-1 bg-class-2 bg-class-3";
  const loadedRaceBackgrounds = "bg-race-1 bg-race-2 bg-race-3";

  // The variable I'm trying to use on first page load
  const adjustedSelectionClass = addSelectionClass(
    selectionCategory,
    selectionName,
  );

  return (
    <div className="baseLayoutStyles cardShrink">
      <div className={adjustedSelectionClass}>
        <div className="text-center text-white text-xl font-extrabold pt-4 bg-colorHeader rounded-t w-full h-1/6 text-shadow shadow-gray-800">
          {selectionName}
        </div>
      </div>
    </div>
  );
};

// I have to first load the classes by inserting them first, then I can change them to the 'adjustedSelectionClass' in jsx and they load fine
  const loadedClassBackgrounds = "bg-class-1 bg-class-2 bg-class-3";
  const loadedRaceBackgrounds = "bg-race-1 bg-race-2 bg-race-3";

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>

你可以：

• 有一个字典用于将变量映射到 Tailwind 类名：

  const DICTIONARY = {
    race: {
      '1': 'bg-race-1',
      '2': 'bg-race-2',
      '3': 'bg-race-3',
    },
    class: {
      '1': 'bg-class-1',
      '2': 'bg-class-2',
      '3': 'bg-class-3',
    },
  };
  // …
  const addSelectionClass = (passedSelectionCategory, passedSelectionName) => {
    const adjustedSelectionCategory = passedSelectionCategory.toLowerCase();
    const adjustedSelectionName = passedSelectionName.toLowerCase();
  
    return (
      "classBackground " +
      DICTIONARY[adjustedSelectionCategory][adjustedSelectionName] +
      " saturate-30 hover:saturate-100 flex justify-center w-full h-full"
    );
  };
  

• safelist

  课程：

  module.exports = {
    safelist: [
      { pattern: /^bg-(race|class)-[1-3]$/ },
      // …
    ],
    // …
  ];
  

  您已经以一种迂回的方式这样做了：

  // I have to first load the classes by inserting them first, then I can change them to the 'adjustedSelectionClass' in jsx and they load fine
  const loadedClassBackgrounds = "bg-class-1 bg-class-2 bg-class-3";
  const loadedRaceBackgrounds = "bg-race-1 bg-race-2 bg-race-3";