v4: Automatic content detection in monorepos only finds direct package
Problem
What version of Tailwind CSS are you using? 4.0.0-alpha.6 What build tool (or framework if it abstracts the build tool) are you using? "next": "^14.1.1" "@tailwindcss/postcss": "^4.0.0-alpha.6", "postcss": "^8.4.35", What version of Node.js are you using? v18.18.2 What browser are you using? N/A What operating system are you using? macOS Reproduction URL Attempting to do this inside an existing project, feel free to request a reproduction if you feel it will help and I'll make one (just takes a good chunk of time so wanted to check this level of detail was required first). Describe your issue I'm using tailwind in a mono repo, there is a basic design system which is just a bunch of components with tailwind classes and some config for styles (e.g. `bg-primary`). Upgrading to v4 was seamless for this, we were able to build and publish the design system. When using the design system in the monorepo in a Next.js project we're transpiling the components (rather than using the built version). I noticed that the styles were not being generated, I assumed this was because the automatic detection was not picking it up. Looking at the config code, it seems like we should be passing through the `base` as the config variable based on the config: [code block] At first I tried putting in `"../.."` so that it would map to a relative root directory, but it seems like the only way to use base is with an absolute path eg `"/Users/me/Code/monorepo/" which does work. It would just be n
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Solution: v4: Automatic content detection in monorepos only finds direct package
I'm using turborepo and was able to fix this issue by using the new @source at-rule introduced in 4.0.0-alpha.19 Here's what my project structure looks like: [code block] In my ui package, I have my default tailwind styles in tailwind.css: [code block] Then in my dashboard app, I import that default tailwind.css and also specify content locations [code block]
Trust Score
7 verifications
- 1
I'm using turborepo and was able to fix this issue by using the new @source at-r
I'm using turborepo and was able to fix this issue by using the new @source at-rule introduced in 4.0.0-alpha.19
- 2
Here's what my project structure looks like:
Here's what my project structure looks like:
- 3
In my ui package, I have my default tailwind styles in tailwind.css:
In my ui package, I have my default tailwind styles in tailwind.css:
- 4
Then in my dashboard app, I import that default tailwind.css and also specify co
Then in my dashboard app, I import that default tailwind.css and also specify content locations
Validation
Resolved in tailwindlabs/tailwindcss GitHub issue #13136. Community reactions: 31 upvotes.
Verification Summary
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep