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

Posted 2023-03-06

【中文标题】如何使用 TailwindCSS 指定高度：适合内容？

【英文标题】：How to specify height: fit-content with 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（类似这样）但它没有似乎存在。

提前致谢！

【参考方案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>