I can't make Spinner component work

[khylpe]

Hi,

Introduction

I'm relatively new to React, Tailwind CSS, and Flowbite. I am currently trying to display the simplest Spinner from Flowbite and could use some assistance. I didn't open a ticket because I believe that I might simply be using it incorrectly.

(Please, let me know if this discussion shouldn't have been opened)

My attempt

I successfully imported the necessary elements as follows:

import { Button, Spinner } from 'flowbite-react';

I then attempted to use it in a form:

<form>
[...]
     {/* Submit button or loading animiation (Spinner)*/}
     <div className="flex justify-center">
          {loading ?
               <Spinner color="info" />
          : <input type="submit" className="rounded-full mb-5 button sm:w-1/6 h-10 w-1/2 hover:cursor-pointer" value={translations[language].contact.contactForm.submit}></input>
           }
     </div>
</form >

The result :

And, as you can see (at the bottom), I do have a white circle but nothing moves and there is no color.
From that we can admit that the import works.

What Have I Done to Try to Fix It?

• I updated packages to the latest version :

npm install flowbite@latest
npm install flowbite-react@latest

• I checked if there was any CSS that might cause the Spinner component to not work properly.

[tulup-conner]

Hi there, I'm wondering if you are missing the following line from the content array in tailwind.config.js

'node_modules/flowbite-react/**/*.{js,jsx,ts,tsx}'

Otherwise, I'm not entirely sure what's wrong here.

[khylpe]

Thank you for your response !

I do have that line in my tailwind.config.js.

After a few days, I decided to rebuild my React project and reinstall all dependencies (a beginner's solution 😅). Surprisingly, with the exact same code, everything worked perfectly... It will remain a mystery...

I apologize if anyone else encounters this same issue. Unfortunately, I haven't been able to find a proper solution to fix it.