Failed to do the line break in Tailwind CSS table

Can someone help to troubleshoot this issue? I want to make the line break while touching the cell's border, but you can see at the bottom right corner ( Last Row, REASON column) there, the This is a long.....reason didn't break when it hit the border. I have tried the table-fixed, word-break..methods, all no use for me. May I ask what might be the cause?

(Sorry, the HTML code might look a bit messy as I have been trying a different way.)

<div class="-my-2 overflow-hidden sm:-mx-6">
    <div class="py-2 align-middle inline-block sm:px-6 lg:px-8">
        <div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
            <table class="divide-y divide-gray-200 table-fixed">
                <thead class="bg-gray-50">
                <tr>
                    <th class="w-1/2 px-6 py-3 bg-gray-200 text-left text-xs font-medium text-gray-800 uppercase tracking-wider">
                        Requestor
                    </th>
                    ......
                    <th class="w-1/2 px-6 py-3 bg-gray-200 text-left text-xs font-medium text-gray-800 uppercase tracking-wider">
                        Reason
                    </th>
                    @can('manage-users')
                        <th scope="col" class="relative px-6 py-3 bg-gray-200 ">
                            <span class="sr-only">Edit</span>
                        </th>
                    @endif
                </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                @foreach ($applications as $application)
                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="flex items-center">
                                <div class="flex-shrink-0 h-10 w-10">
                                    <img class="h-10 w-10 rounded-full"
                                         src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60"
                                         alt="">
                                </div>
                                <div class="ml-4">
                                    <div class="text-sm font-medium text-gray-900">
                                        {{ $application->user->name }}
                                    </div>
                                    <div class="text-sm text-gray-500">
                                        {{ $application->user->email }}
                                    </div>
                                </div>
                            </div>
                        </td>
                        ...
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ $application->request_reason }}
                        </td>
                        @can('manage-users')
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                <button
                                        class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-full"
                                        wire:click="selectItem({{ $application->id }}, 'Approve')">
                                    Approve
                                </button>
                                <button
                                        class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-full"
                                        wire:click="selectItem({{ $application->id }}, 'Reject')">
                                    Reject
                                </button>
                            </td>
                        @endif
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
</div>
</div>