How to specify height: fit-content with TailwindCSS? - css

Question

Using TailwindCSS I'm trying to have a <div> fit to the height of its child, a <button>. My code is as follows:
<form className="w-full flex h-96 gap-2 mt-8 flex-wrap">
<textarea
role="text-input"
className="resize-none flex-1"
placeholder="INPUT"
/>
<textarea
role="text-output"
className="resize-none flex-1"
placeholder="OUTPUT"
readOnly
/>
<div className="w-full flex flex-none"> // This is the troublesome div
<button>
Submit!
</button>
</div>
</form>
Reading through the docs and doing a google search I can't seem to find a way to do this, ideally I'd like to set a class such as h-fit-content (something like this) but it doesn't seem to exist.
Thanks in advance!

Answer 1

Tailwind has now the class w-fit.

Answer 2

Tailwind has now the class h-fit.

Answer 3

you can create custom classes in your tailwind configuration for future use.
example:
module.exports = {
important: true,
purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
darkMode: 'class', // or 'media' or 'class'
theme: {
extend: {
colors: {
...
},
animation: {
...
},
width: {
...
},
margin: {
...
},
height: {
76: '18rem',
78: '19rem',
82: '22rem',
97: '28rem',
98: '31rem',
99: '38rem',
100: '40rem',
'fit-content': 'fit-content(20em)',
},
fontFamily: {
mps: ['Clarkson', 'Helvetica', 'sans-serif']
},
flex: {
2: '1 1 25%',
3: '1 1 30%',
4: '1 1 40%',
5: '1 1 50%',
6: '1 1 60%',
}
},
},
variants: {
extend: {},
},
plugins: [],
}

Answer 4

I managed to fix my issue by setting h-full in both <textarea> and setting flex-none in my problematic <div>, resulting in the following code:
<form className="w-full flex h-96 gap-2 mt-8 flex-wrap">
<textarea
role="text-input"
className="h-full resize-none flex-1"
placeholder="INPUT"
/>
<textarea
role="text-output"
className="h-full resize-none flex-1"
placeholder="OUTPUT"
readOnly
/>
<div className="w-full flex flex-none"> // This is the troublesome div
<button>
Submit!
</button>
</div>
</form>