FAQ Accordion using React.js

I had some trouble with importing fonts into Tailwind. My paths to the font files are relative and when I ctrl + click them it leads me to the file in VS Code. The import statements for the fonts in globals.css are as follows:

@layer base {
  @font-face {
    font-family: WorkSans;
    font-weight: 400;
    src: url('/public/static/fonts/WorkSans-VariableFont_wght.ttf') format("ttf"); 
  } 
  @font-face {
    font-family: WorkSans;
    font-weight: 400;
    font-style: italic;
    src: url('/public/static/fonts/WorkSans-Italic-VariableFont_wght.ttf') format("ttf");
  }
  @font-face {
    font-family: WorkSans;
    font-weight: 600;
    src: url('/public/static/fonts/WorkSans-VariableFont_wght.ttf') format("ttf");
  }
  @font-face {
    font-family: WorkSans;
    font-weight: 600;
    font-style: italic;
    src: url('/public/static/fonts/WorkSans-Italic-VariableFont_wght.ttf') format("ttf");
  }
  @font-face {
    font-family: WorkSans;
    font-weight: 700;
    src: url('/public/static/fonts/WorkSans-VariableFont_wght.ttf') format("ttf");
  }
  @font-face {
    font-family: WorkSans;
    font-weight: 700;
    font-style: italic;
    src: url('/public/static/fonts/WorkSans-Italic-VariableFont_wght.ttf') format("ttf");
  }
}

Additionally, I found that Tailwind would only animate the accordion expanding if I explicitly defined the height of the container (h-0 to h-32 works, but h-0 to h-auto didn't). However, this means the container for the answer text will either be too small or too large depending on the screen size/amount of text. Is there a way to animate from h-0 to h-auto with Tailwind, or would the best solution be to animate the expanding and collapsing from scratch?