Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

v4: Automatic content detection in monorepos only finds direct package #13136

Open
adrhumphreys opened this issue Mar 7, 2024 · 4 comments
Open

v4: Automatic content detection in monorepos only finds direct package #13136

adrhumphreys opened this issue Mar 7, 2024 · 4 comments
Labels
v4

Comments

@adrhumphreys
Copy link

adrhumphreys commented Mar 7, 2024 •
edited
Loading

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 😅
@adamwathan adamwathan added the v4 label Mar 7, 2024
@hmbanan666
Copy link
Contributor

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
Copy link

nadeemc commented May 4, 2024 •
edited
Loading

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
Copy link

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

This comment was marked as outdated.

Sign in to view
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
v4
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@nadeemc @adamwathan @adrhumphreys @yinxulai @hmbanan666 @ajayvignesh01 and others