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.