v4: Automatic content detection in monorepos only finds direct package

[adrhumphreys]

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:

type PluginOptions = {
  // The base directory to scan for class candidates.
  base?: string
}

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 nice to be able to use a relative directory here so that when we look at deploying/cloning the repo it's not hard coded to a user directory.

I imagine this might be solved when:

We’ll introduce a way to configure content paths explicitly in the future for sure, but we’re curious to see how well this automatic approach works for everyone — it’s working awesome in our own projects.

So feel free to also close this and I can be patient 😅

[hmbanan666]

Hi! I'm using NX monorepo, same problem. If we have structure like:

apps
- nextjs
-- app

packages
- ui
-- components

All components will not have correct css output.

Found some hack, using tailwindcss 4.0.0-alpha.8.
In postcss.config.js use join:

const { join } = require('path');

module.exports = {
  plugins: {
    '@tailwindcss/postcss': {
      base: join(__dirname, '../../'),
    },
  },
};

And it's ok for now. Good job on new Tailwind v4, love it!

[nadeemc]

When using workspaces and changing the base directory to the root of the project, I started getting the following error:

Parsing css source code failed
  3306 |   }
  3307 |   .\[host\:\]port\] {
> 3308 |     host: ]port;
       |            ^
  3309 |   }
  3310 |   .\[k\:K\] {
  3311 |     k: K;

That appears to be coming from node_modules/commander/lib/command.js which has the following comments:

function incrementNodeInspectorPort(args) {
  // Testing for these options:
  //  --inspect[=[host:]port]
  //  --inspect-brk[=[host:]port]
  //  --inspect-port=[host:]port

After removing that file, I got the same error for \[keywords\:node-addon-api\] from a different file, node-addon-api/README.md:

Quick links to NPM searches: [keywords:node-addon-api](https://www.npmjs.com/search?q=keywords%3Anode-addon-api).

It doesn't look like there's a way to make this work today. Eventually, I think the approach would be to customize the excluded content directories in oxide. It may make sense to exclude node_modules by default too, allowing for opt-in for that instead of opt-out like the .git folder.

static ref IGNORED_CONTENT_DIRS: Vec<&'static str> = vec![".git"];

In the meantime, the only solution I could come up with was to manually delete the errant files using some RUN commands in my Docker image. This could also work as a postinstall script in the package.json for those not using Docker.

# Remove packages/files that have comments or text triggering Tailwind v4
# to include them as CSS classes. This is a workaround until directories
# can be excluded in the Tailwind config.
RUN rm -rf node_modules/@storybook
RUN rm -rf node_modules/commander
RUN rm -rf node_modules/node-addon-api/README.md

Storybook is only removed here because it nests commander as well.

[ajayvignesh01]

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:

/ (root)
├── apps
│   └── dashboard
│       └── app
│           └── globals.css
└── packages
    └── ui
        └── styles
            └── tailwind.css

In my ui package, I have my default tailwind styles in tailwind.css:

@import 'tailwindcss'

@theme {
  /* Your default styles here */
}

Then in my dashboard app, I import that default tailwind.css and also specify content locations

@import '@lydar/ui/tailwind.css';
@source "../app/**/*.{ts,tsx}"; /* Current app */
@source "../../../packages/ui/**/*.{ts,tsx}"; /* Any components in ui package*/

/* Any other app specific styling you want to do here*/

[yinxulai]

Similar issue, when I remapped my component package using exports, tailwindcss no longer worked

├── LICENSE
├── apps
│   ├── console
│   └── website
├── eslint.config.js
├── package-lock.json
├── package.json
└── packages
    ├── component
    └── openapi

// packages/component/package.json
{
  ...
  "dependencies": {
    "clsx": "^2.1.1",
    "framer-motion": "^11.15.0",
    "@headlessui/react": "^2.2.0"
  },
  "exports": {
    "./*": [
      "./source/*.tsx",
      "./source/*.ts"
    ]
  }
}

[kms0219kms]

@ajayvignesh01 I did the same thing but the problem is, running pnpm dev --filter @apps/www takes too long.
It stucks on Compiling / ... for more than 3 hours

[neoromantic]

Struggled with setting up monorepo with ui package, finally made it work by using @source:

In my packages/ui/globals.css

@import "tailwindcss";
@source "./components/**/*.{ts,tsx}";

@plugin 'tailwindcss-animate';

@custom-variant dark (&:is(.dark *));

@theme {
  ...
}

[khuezy]

Struggled with setting up monorepo with ui package, finally made it work by using @source:

Hi, were you able to get tailwind intellisense working in your packages/ui components? My tailwind classes gets generated properly and everything, but VS Code fails to autocomplete the classes in my packages/ui.

[ericmesmo]

Struggled with setting up monorepo with ui package, finally made it work by using @source:

Hi, were you able to get tailwind intellisense working in your packages/ui components? My tailwind classes gets generated properly and everything, but VS Code fails to autocomplete the classes in my packages/ui.

@khuezy Did u find any solution? Im struggling with this too

[khuezy]

@ericmesmo I wish I could tell you exactly what I did to get intellisense to work but I don't know exactly what I did since I was trying everything I could.

Try:

1. Uninstall/Reinstall the Tailwind VSCode plugin
2. Add a tailwind.config.js at the root of your project with the v3 config contents: ['packages/ui/**/*.tsx']. I think this might trick VSCode into linking the source for the packages/ui. I've since deleted this file and it still works.
3. Honestly I have no clue how it got working.

[RobinMalfait]

Hey!

It looks like there are multiple different issues going on here. For the main issue where automatic source detection doesn't work in monorepos is expected behavior. Auto source detection looks a the current folder and goes down in sub-folders, it won't go up in parent folders.

To solve this, you can use the @source directive to point to other folders/globs. If you provide it a path to another (sibling) folder for other packages, we still apply the same auto source detection rules in that folder (ignoring ignored files, no binaries, etc.).

More info on this subject: https://tailwindcss.com/docs/detecting-classes-in-source-files#explicitly-registering-sources

For other issues mentioned in this issue, if they are still a problem, please open a new issue with a minimal reproduction repo.

Going to close this issue for now, because the main issue can be solved using @source.

Hope this helps!

[XavierGeerinck]

Same issue here (using turborepo), solved it by adding the following:

@source "../../../../apps/frontend/**/*.{ts,tsx}";
@source "../../../../packages/ui/**/*.{ts,tsx}";

This in a monorepo that looks like this:

apps
  frontend/
    src/
      app/
        layout.tsx // this imports `globals.css`
packages
  ui/
    src/
      styles/
        globals.css // this defines the sources

[khuezy]

@ericmesmo and anyone else having issues, this is one way to fix it:
Add this to your .vscode/settings.json: "tailwindCSS.experimental.configFile": "apps/<path to your main app>/globals.css"

If you need to load multiple apps:

"tailwindCSS.experimental.configFile": {"apps/<path to your main app>/globals.css": "**"}

This will force VSCode Intellisense to load those files.

Be sure to delete all your tailwind.config.js file, if VSCode detects those, it loads v3

[ericmesmo]

@khuezy i just added globals.css to my app and installed tailwindcss@4.0.0 as a dev dependency. With that, the intellisense is working great again! But thanks for share