如何使用 TailwindCSS 指定高度：适合内容？答案

【问题标题】：How to specify height: fit-content with TailwindCSS?如何使用 TailwindCSS 指定高度：适合内容？
【发布时间】：2021-06-06 19:24:49
【问题描述】：

使用 TailwindCSS，我试图让 <div> 适合其孩子的高度，即 <button>。我的代码如下：

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

通读the docs 并进行谷歌搜索我似乎找不到这样做的方法，理想情况下我想设置一个类，例如h-fit-content（类似这样）但它没有似乎存在。

提前致谢！

【问题讨论】：

标签： css reactjs tailwind-css

【解决方案1】：

您可以在顺风配置中创建自定义类以供将来使用。

示例：

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

【讨论】：

实际上是高度：{'fit-content': 'fit-content'} 不是 h-fit-content，h- 是自动添加的。

【解决方案2】：

我设法通过在<textarea> 中设置h-full 并在有问题的<div> 中设置flex-none 来解决我的问题，从而产生以下代码：

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

【讨论】：