为什么最大宽度在 tailwind css 中不起作用？

Question

我已将最大宽度设置为 max-w-screen-2xl 但导航栏忽略它并超出最大宽度值。我为其他部分设置了 max-w-screen-2xl，它们工作正常。如何解决这个问题？

<div className='flex items-center justify-center max-w-screen-2xl mx-auto'>
            <div className="navbar nav-container bg-base-100 max-w-[90%] w-[90%] fixed top-3 z-50 px-8 py-6">
                <div className="navbar-start">
                    <div className="dropdown">
                        <label tabIndex={0} className="btn btn-ghost lg:hidden">
                            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h8m-8 6h16" /></svg>
                        </label>
                    </div>
                    <button  onClick={()=>navigate('/')} className="btn btn-sm btn-ghost normal-case text-xl">daisyUi</button>
                </div>
                <div className="navbar-center hidden lg:flex">
                    <ul className="menu menu-horizontal p-0">
                        <li><a>Item 1</a></li>
                        <li><a>Item 3</a></li>
                    </ul>
                </div>
                <div className="navbar-end">
                    <button onClick={()=>navigate('/register')} className="btn btn-sm">Register</button>
                </div>
            </div>
        </div>

Answer 1

您可以添加这样的类

w-[100%] max-w-[800px]

。它会起作用的。请参阅此处的代码示例 - https://freetailwindui.co/components/card-component-tailwind-ui-css/

Answer 2

max-w-2xl 的默认设置为 1320px。您应该自定义 max-x-2xl 的主题来扩展它，例如 1500px。为此，请按如下所示修改 tailwind.config.js。

theme: {
        maxWidth: {
            '2xl': '1500px',
        },
        extend: {},
    },

Answer 3

在百分比数字之后，您需要确定用于计算百分比的值。在这段代码中 ''' 最大-w-[90%] w-[90%] '''