如何调整Laravel Splade默认<x-dropdown>组件的内容宽度？

你直接设置width="w-100"没生效，是因为Splade的<x-dropdown>组件并不通过width属性直接接收Tailwind宽度类，正确的做法是用组件自带的content-class属性给下拉内容容器添加自定义样式。

解决方案一：使用content-class属性 #

修改<x-dropdown>标签，把宽度类传给content-class即可：

<x-dropdown placement="bottom-end" content-class="w-100">
    <x-slot name="trigger">
        <button class="flex items-center text-sm font-medium text-gray-500 bg-white hover:text-gray-700 focus:outline-none transition duration-150 ease-in-out">
            <img class="w-8 h-8 rounded-full" alt="Profile Pic" src="">
        </button>
    </x-slot>

    <x-slot name="content">
        <div class="px-4 py-3" role="none" >
            <p class="text-sm text-gray-900 dark:text-white" role="none">
               {{ Auth::user()->name }}
            </p>
            <p class="text-sm font-medium text-gray-900 truncate dark:text-gray-300" role="none">
               {{ Auth::user()->email }}
            </p>
        </div>

        <x-dropdown-link :href="route('profile.edit')">
            {{ __('Profile') }}
        </x-dropdown-link>

        <!-- Authentication -->
        <form method="POST" action="{{ route('logout') }}">
            @csrf
            <x-dropdown-link as="a" :href="route('logout')" onclick="event.preventDefault(); this.closest('form').submit();">
                {{ __('Log Out') }}
            </x-dropdown-link>
        </form>
     </x-slot>
</x-dropdown>

解决方案二：强制覆盖插槽根元素样式 #

如果content-class不生效，可以直接在content插槽的最外层容器添加宽度类，必要时用!important强制覆盖默认样式：

<x-slot name="content">
    <div class="w-100 !w-100 px-4 py-3" role="none" >
        <p class="text-sm text-gray-900 dark:text-white" role="none">
           {{ Auth::user()->name }}
        </p>
        <p class="text-sm font-medium text-gray-900 truncate dark:text-gray-300" role="none">
           {{ Auth::user()->email }}
        </p>
    </div>
    <!-- 其余内容保持不变 -->
</x-slot>

额外提示 #

如果你用的是Tailwind CSS v3，默认没有w-100这个类（100%宽度对应的默认类是w-full），建议确认项目是否自定义了w-100，或者直接替换为w-full更稳妥。

内容的提问来源于stack exchange，提问作者RCDP