Set correct height of React component after scaling with tailwindcss

Question

I try to design card like items using React and tailwindcss. For different Layouts the exact same cards should show up in different sizes, keeping the perspective. Tailwind's scale feature does the scaling as I need. Unfortunately the height and width of the container does not adjust after scaling, instead the scaled item has some overflow. How can I set the containers height and width to the actual height and width including the overflow area?

Code example:

//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

Then two of the Content Items are stacked up

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

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

export default App;

Is
Items overlap after scaling up:

Expected
Items don't overlap after scaling up:

I want to know how to programatically set it to the correct height (and width), but not by manually figuring out specific margins or padding for each scale value.

score 0 · Answer 1 · answered Aug 05 '21 at 08:32

Solution for me was a slight modification of the bottom answer to this question: CSS Transform with element resizing

Therfore modify the index.css file by adding:

@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));
  }
}

Modified code of the Content:

//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

Create scaled components that don't overlap

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

As a result the layout area used matches the content size:

Set correct height of React component after scaling with tailwindcss

1 Answers1