3

I'm trying to incorporate tailwind into my react app. So I followed the steps outlined here https://daveceddia.com/tailwind-create-react-app/

When I start my application (freshly created demo app), it loads a blank white screen. After refreshing the page, everything works fine. I'm confused on why the initial screen is a blank page. Any help or explanation would be appreciated.

Now, if I build my tailwindcss without watching, then the react app loads with the correct css however hot-reload doesn't work for the tailwindcss and I'm not watching it for changes, so the generated css doesn't change.

If I use npm-run-all to run the react app and the postcss watch script, I get the blank white screen initially as described above.

If I use npm-run-all to run the react app and the postcss watch scrip AND don't include the tailwind.generated.css file, my react app runs and loads fine but I don't have tailwind css anymore.

Seems that it only does this when I include the tailwind utilities @tailwind utilities;

visualbam
  • 167
  • 15

1 Answers1

6

I'm having the same problem and I found this hack: adding a sleep to the script "start": "yarn watch:css & sleep 5 && react-scripts start"

Victor
  • 166
  • 2
  • 5