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

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!

cssreactjstailwind-css


Solution 1:[1]

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: [],
}

Solution 2:[2]

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>

Solution 3:[3]

Tailwind has now the class w-fit.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Pedro Filipe
Solution 3 richardec

Related Questions