在 Tailwind CSS 中设置自定义最大和最小高度或宽度

Question

我知道在CSS中，你可以设置min-heightand max-width，但是当我尝试时，min-h-10它max-h-10在Tailwind CSS中没有做任何事情。

这就是我所拥有的：

<div class="flex-col justify-center">
    <div class="h-10 w-10 border bg-blue-300 block">
        h
    </div>
</div>

Answer 1

min-h-10像和这样的值在 Tailwind CSS 中max-h-10不是有效值，唯一有效的值是min-h-0, min-h-full, min-h-screen, min-h-min, min-h-max, min-h-fit。

\n

因此，使用此类值的唯一方法min-h-10是使用自定义值，您可以min-height通过编辑theme.minHeight或theme.extend.minHeight在tailwind.config.js文件中自定义比例，如下例所示。

\n

您的tailwind.config.js文件：

\n

module.exports = {\n  theme: {\n    maxHeight: {\n      \'10\': \'10px\',\n    }\n  }\n}\n

\n

您的 HTML：

\n

<div class="max-h-10 w-32 bg-red-400">\n  I\'m an element!\n</div>\n

\n

看看操场

\n

或者，如果您需要使用一个值，而该值对包含在主题中没有意义，则可以使用如下所示的任意值：

\n

module.exports = {\n  theme: {\n    maxHeight: {\n      \'10\': \'10px\',\n    }\n  }\n}\n

\n

看看操场

\n

在我的回答中，我只使用了max-height和的示例，但它与和min-height没有任何不同。min-widthmax-width

\n