how to make a word wrapper inside a table? - tailwind-css

Question

I'm trying to make a word wrapper inside a table row, using Tailwind CSS, and it doesn't seem to be working. What am I doing wrong?
I am:
Making the table a: "w-full"
Making the td and the p a "break-all"
Giving a max width to the tr
This is the code:
<div className="py-5 ">
<div className="overflow-x-auto">
<table className="w-full max-w-4xl mx-auto overflow-hidden bg-white divide-y divide-gray-300 rounded-lg whitespace-nowrap">
<thead className="bg-gray-900">
<tr className="text-left text-white">
<th className="px-6 py-4 text-lg font-semibold "> n ° </th>
<th className="px-3 py-4 text-lg font-semibold "> Song </th>
<th className="px-3 py-4 text-lg font-semibold text-center "> Best Singers </th>
<th className="px-6 py-4 text-lg font-semibold text-center"> </th>
</tr>
</thead>
<tbody className="divide-y divide-gray-200">
<tr className="max-w-xs break-words">
<td className="px-6 py-4">
<div className="flex items-center space-x-3">
<p>
1
</p>
</div>
</td>
<td
style={{ maxWidth: '100px' }}
className="px-3 py-4 break-all"
>
<p
className="break-all"
>
Vivin la vida loca dsadasdasdasd dasdddddddd saddasdasdad
</p>
</td>
<td className="px-3 py-4 text-center">
<p className="text-blue-600 visited:text-purple-600 hover:text-blue-800 hover:underline">
Donkey
</p>
</td>
<td className="px-3 py-4 text-center">
<p className="text-blue-600 visited:text-purple-600 hover:text-blue-800 hover:underline">
Ricky Martin
</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
This is how it looks:

Answer 1

You just need to remove the whitespace-nowrap from the table, then it should work.
Uploaded the example here: https://stackblitz.com/edit/react-ewzbi6?file=src/App.js

Answer 2

Might be another part of your styling affecting things here. This works for me:
Don't mean this as an answer, just can't attach pics to comments.