I wanted to include a loading spinner from tailwind-css and according to tailwindcss documentation, this should be available with the className="animate-spin".
I'm using React18 created from Vite. I've also installed daisyui in addition to tailwindcss.
When I apply "animate-spin" and inspect in the browser, I can see that it's been added when I select the spinner. It's definitely there and spinning in my button element, but for some reason, it just doesn't show up/is transparent.
Here is my code: `
<div className="bg-gray-50 px-4 py-3 text-right sm:px-6">
<button
type="submit"
className="inline-flex justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
>
<svg className="animate-spin h-5 w-5 mr-3"></svg>
Loading...
</button>
</div>
`
I've tried taking out "border-transparent" from the button className, but it still didn't show.
Appreciate any help from anybody who knows Tailwind. Both my App.css and index.css are blank aside from the tailwind imports and applying a universal font.
I've tried adjusting the color and background-color properties of the svg element with the spinner. So far only making the background-color white has made it shown up but only as a spinning squre.
I've tried adjusting text-white to the svg element but it doesn't show up and changing the color property doesn't make it show up.
Your problem here is because your svg icon doesn't have any content inside it, not tailwindcss
You can change svg to div element and set background color to it, then animate-spin should working correctly