Установите правильную высоту компонента React после масштабирования с помощью tailwindcss

Question

Я пытаюсь создавать карточные предметы, используя React и tailwindcss. Для разных макетов одни и те же карточки должны отображаться в разных размерах, сохраняя перспективу. Функция масштабирования попутного ветра делает масштабирование по мере необходимости. К сожалению, высота и ширина контейнера не меняются после масштабирования, вместо этого масштабированный элемент имеет некоторое переполнение. Как я могу установить высоту и ширину контейнеров на фактическую высоту и ширину, включая область перелива?

Пример кода:

      //file: Content.js

import React from 'react'
// Card-like box with some Content
const Content = () => {
    return (
        <div className="origin-top-left transform scale-125 border-2 w-28 m-1
                         border-blue-400 bg-gray-900 text-white">
            <p>ABC</p>
            <p>123</p>
        </div>
    )
}

export default Content

Затем два элемента содержимого складываются.

      //file: App.js
import './App.css';
import Content from './components/Content';

function App() {
  return (
    <>
      <Content/>
      <Content/>
    </>
  );
}

export default App;

Перекрываются ли элементы после увеличения:

Ожидаемые
элементы не перекрываются после увеличения:

Я хочу знать, как программно установить для него правильную высоту (и ширину), а не вручную определять конкретные поля или отступы для каждого значения шкалы.

Answer 1

Решением для меня была небольшая модификация нижнего ответа на этот вопрос:Преобразование CSS с изменением размера элемента.

Поэтому измените файл index.css, добавив:

      @layer utilities {
  .box {
    --boxwidth: 7rem;
    --boxheight: 5rem;
    transform-origin: 50% 0;
    width: var(--boxwidth);
    height: var(--boxheight);
  }
  .box.size-100 {
  }
  .box.size-75 {
    --sf: 0.75;
    transform: scale(var(--sf));
    margin: 0 calc((var(--boxwidth) * (var(--sf) - 1)) / 2) calc(var(--boxheight) * (var(--sf) - 1));
  }
  .box.size-150 {
    --sf: 1.5;
    transform: scale(var(--sf));
    margin: 0 calc((var(--boxwidth) * (var(--sf) - 1)) / 2) calc(var(--boxheight) * (var(--sf) - 1));
  }
}

Измененный код Контента:

      //file: Content.js
import React from 'react'

const Content = (props) => {
    return (

            <div className={"box " + props.boxsize + " border-2 rounded border-blue-400 bg-gray-900 text-white"} >
                <p>ABC</p>
                <p>123</p>
            </div>
    )
}

export default Content

Создавайте масштабируемые компоненты, которые не перекрываются

        <Content boxsize="size-100"/>
  <Content boxsize="size-75"/>
  <Content boxsize="size-150"/>
  <Content/>

В результате используемая область макета соответствует размеру содержимого: