Why your Tailwind styles aren’t working in your Turborepo

I spent 3-4 hours trying to figure out why the heck my Tailwind styles were not making it through to my Next Apps from my UI library.

I had Tailwind installed in the Next apps, and any Tailwind I wrote inside of the Next app would work fine. I also had Tailwind installed in my UI library, but when I imported a component from the UI library into the Next App, it wouldn’t work.

Turns out it’s because the styles from the UI library were being purged because I was not specifying them in the content property in tailwind.config.js.

content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],

Here’s the fix:

content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "../../packages/ui/**/*{.js,.ts,.jsx,.tsx}",
  ],

Shout out to Leo Roese, I found this fix because of this video he put out. Publishing this on my blog to make this issue more searchable!