如何将最大宽度设置为百分比或静态值

Posted 2023-03-07

【中文标题】如何将最大宽度设置为百分比或静态值

【英文标题】：How to set max width as a percentage or static value

【发布时间】：2021-01-19 06:13:50

【问题描述】：

对于带有顺风的元素的宽度，您可以按百分比或固定 rem 值设置它。设置 max-width 只能设置为断点的大小。

这是为什么？

有没有办法将 max-width 设置为不是断点的百分比或固定大小？

【参考方案1】：

有没有办法将最大宽度设置为百分比或固定大小 不是断点吗？

你需要customize tailwind.config.js

  // tailwind.config.js
  module.exports = 
    theme: 
      maxWidth: 
+       '1/4': '25%',
+       '1/2': '300px',
+       '3/4': '75%',
      
    
  

因此，您将最大宽度固定为百分比或 px。

这是为什么？

您不受设置和功能的限制，相反，Tailwind CSS 为您提供了一个在实践中证明了自己的标准。

但如果您需要对您的项目进行微调，您可以随时进行。

享受使用 Tailwind CSS 的乐趣！

【参考方案2】：

德米特里的答案是正确的，但要小心：

如果你像他提到的那样做，除了配置中的值之外，maxWidth 值都不会起作用。 如果您只想扩展基本的maxWidth 值（由tailwind 提供），则必须将配置放在extend 部分中，如下所示：

// tailwind.config.js
module.exports = 
  theme: 
    extend: 
      maxWidth: 
        '1/4': '25%',
        '1/2': '300px',
        '3/4': '75%',
      
    
  

【讨论】：

很好的说明！花点时间解决这个问题。