My rive component stops working when I add tailwind

Question

Each time I add these tailwind imports:

@tailwind components;
@tailwind utilities;

..my rive component stops rendering. i tried removing the tailwind imports and it works w/o them. but once i add the three lines at the top, it stops appearing. i also tried to console.log the rive component. it starts of as null then it starts to get logged. I have no idea what the problem could be.

Here is my component

import "./App.css";

import ham from "./hamtime.riv";
import { useRive, useStateMachineInput } from "@rive-app/react-canvas";

function App() {
  const { rive, RiveComponent } = useRive({
    src: ham,
    autoplay: true,
    stateMachines: ["Basic State Machine"],
  });
  console.log(rive);
  return (
    <div className="App">
      <h1 className="bg-slate-300">My Rive App</h1>
      <RiveComponent />
    </div>
  );
}

export default App;```


i tried removing the tailwind imports and it works w/o them. but once i add the three lines at the top, it stops appearing. i also tried to console.log the rive component. it starts of as null then it starts to get logged. I have no idea what the problem could be. 

Answer 1

You have to add App.css ( or index.css ) to your React project at once, and load App.css to your App.js or App.tsx, then tailwind css might be applied to all child components which nested by root component ( maybe App.js or index.js)

• App.css

  @tailwind base;

  @tailwind components;

  @tailwind utilities;

• App.js or App.tsx

  import ./App.css