hitComponent not rendering on fresh create-react-app with tailwindcss NEWBIE

Aloha! I am fresh new using Agolia. Our team just started onboarding process so I am playing around. I set up the Agolia demo project using React Instant search and it was a great experience. I was able to set up the create-instantsearch-app demo in only a few minutes. The hit results look good; they look like cards in a row.

However, when I set up a new react app using tailwindcss the hit results are not formatted at all.

What I’ve done:

  • I pasted the code from my working demo app into a component in my fresh create react app
  • I pasted the App.css into my project as well
  • It seems like my InstantSearch component is pulling is some of the css from App.css
  • But the <Hits hitComponent={Hit} /> is not rendering any styles. When I look closer I can not tell where the styles for <Hits hitComponent={Hit} /> are coming from.

Question: where are the styles from <Hits hitComponent={Hit} /> in the demo project coming from?
Question: Could tailwindcss be interfering with the styles for <Hits hitComponent={Hit} />?

  • I can confirm it is not tailwindcss because I just created a fresh npx create-react-app my-app and pasted the same code from the demo (linked above) after installing react-instantsearch-dom and algoliasearch. Same issue, hits are not styled

Oops! Looks like I had to add the stylesheet found in public>index.html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/algolia-min.css">

is there another way of adding this besides this <link> in the index.html file? Just curious.

Signed,
Rubber Duck

Hi,

Yes but it depends on your setup. With create-react-app it should be possible to install the NPM package instantsearch.css and to import it directly from the index.js. Here is the steps:

npm install instantsearch.css
import 'instantsearch.css/themes/algolia.css';

Hope that helps!