Getting TailwindCSS to play nice in monorepos.

I recently setup a monorepo to host some websites I’m building. Wanting to share components between the sites, I created a @web/components package where all my UI components lived.

But something funny happened when I moved everything over: none of my styles got applied!. I inspected the code and saw that classes were getting applied but that no CSS was attached to the styles.

After some digging I realized the culprit was Tailwind was not reading the classes I had applied to my components and was therefore stripping away all the CSS that I needed. To fix this I just needed to add the following to my globals.css:

@source "../../node_modules/@web/components"

Note that if you are running a version < 4.0, you will need to make the change to your tailwind.config.(js|ts) file.

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        "../../node_modules/@web/components/**/*.{js,ts,jsx,tsx,html}"
    ]
}