Skip to content

Intellisense doesn't seem to work in an monorepo setup. #345

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.

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

Closed
rumansaleem opened this issue Jun 7, 2021 · 19 comments
Closed

Intellisense doesn't seem to work in an monorepo setup. #345

rumansaleem opened this issue Jun 7, 2021 · 19 comments

Comments

@rumansaleem
Copy link

Hi, great work on the extension. I was setting up tailwind in a mono-repo setup, I found that the intellisense doesn't detect tailwind config file and no intellisense is provided.

I have a monorepo say "X" opened in vscode, and within that I have a sub project say "Y" containing vue & tailwind setup. So relative to workspace, the path to my tailwind.config.js is X/Y/tailwindcss.config.js. Also, I have package.json & postcss.config.js at the same level as tailwind.config.js

P.S. I'm not sure if it is about the tailwind.config.js being in a subdirectory.

@benjifx
Copy link

benjifx commented Jun 18, 2021

@rumansaleem Did you tried rename the tailwindcss.config.js to tailwind.config.js? It seems like the extension trying to search the config by this glob

@denik1981
Copy link

I'm having the same issue. Glad someone mentioned it.
I have a monorepo and several talwing.config.js are in there for each project that belongs to the mono.

Intellisense work well but for extended utilities in the TW config file, the extension picks up a random TW and show me the utilities I extended there. Not sure the logic behind this. By sure this isn't random but still the point is that I don't get any Intellisense autocomplete function for the project I'm working on.
Might be possible to include an option so you we can instruct the extension where to look for the TW config file?

@benjifx all my config files are named tailwind.config.js

@seahindeniz
Copy link

Have you guys ever tried to create a Multi-root workspaces structure to be able to use multiple config files, before?
I know that it works when I have a workspace like this:
image

@predragnikolic
Copy link

I just noticed that there are a couple of globs that are responsible for finding the config file:

'**/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js'

const CONFIG_FILE_GLOB = '{tailwind,tailwind.config}.{js,cjs}'

@ebrearley
Copy link

Have you guys ever tried to create a Multi-root workspaces structure to be able to use multiple config files, before?
I know that it works when I have a workspace like this:
image

Thanks for the tip. However, in our case it didn't end up getting Intellisence working.

@ebrearley
Copy link

Got it working!

Firstly, make sure that your tailwind config file is named tailwind.config.js. It needs to be this name to align up with both GLOB's used by the extension.

Then at your root, make a new tailwind.config.js file. Add the following:

module.exports = require('./packages/www/tailwind.config.js'); // relative path to your repo that uses tailwindcss

Then move your tailwind and postcss dependencies from the repo that uses taliwind to the root.

cd packages/www
yarn remove tailwindcss postcss

cd ../..
yarn add -W tailwindcss postcss

Restart VS Code and it should be wroking for you.

Note: Relative paths in your purge defition might also need to be overridden if you're running in jit mode.

@aboqasem
Copy link

aboqasem commented Aug 11, 2021

Thank you @ebrearley! In an Nx workspace viewed as a code-workspace in VSCode, I just had to create a dummy tailwind.config.js file in the Nx workspace root where node_modules is.

├── .vscode
│  └── myworkspace.code-workspace
├── apps
│   └── myapp
│       └── tailwind.config.js
├── nx.json
├── tailwind.config.js --> dummy
└── workspace.json
// just to get tailwindcss IntelliSense
module.exports = {};

Running nx build myapp still recognizes apps/myapp/tailwind.config.js and is working properly.

@bradlc
Copy link
Contributor

bradlc commented Aug 12, 2021

Hey all, just want to clarify a few things:

  • Your config file does not need to be at the root. If your config file is in a sub-directory and it isn't working then there's some other issue. If someone is able to share their project with me I would love to take a look to see if I can find the issue. Or, you can open the output panel (by running the Tailwind CSS: Show Output command from the command palette) to check for any errors.
  • As @seahindeniz said, for now you can use a multi-root workspace to work with multiple configs within a project
  • @rumansaleem your config file should be called tailwind.config.js, not tailwindcss.config.js – can you confirm that you still have an issue with tailwind.config.js?

@rumansaleem
Copy link
Author

Hey @bradlc, I already had my config file called tailwind.config.js not tailwindcss.config.js (somehow i ended up calling it tailwindcss.config.js in my question).

I cannot get the extension working, when I have monorepo opened (i.e tailwind.config.js in a subdirectory). I tried looking into it, but couldn't see any errors reported in output panel, infact, I couldn't find any command from Tailwind CSS: prefix.

I cannot really share the project, but I can give you some context, it is not really a mono repo, It is a symfony1.4 (legacy) application 😅 with a subdirectory containing a react application (with custom webpack configuration).

Also, I am able to get extension working when, I open the folder containing sub-project ( i.e. tailwind.config.js in workspace root).

@bradlc
Copy link
Contributor

bradlc commented Aug 12, 2021

If you can't see the Tailwind CSS: Show Output command at all, this typically means that the extension cannot find your config file at all. Do you have any workspace settings that may cause the file to be ignored, for example files.exclude or files.watcherExclude?

@rumansaleem
Copy link
Author

Uh Oh! I had ignored the directory in workspace setting, (I was trying something in a multi root workspace setup, I left it there and forgot about it). Removed that, restarted extension host, It seems all good. Thanks @bradlc. I think we can close this discussion.

@aboqasem
Copy link

aboqasem commented Aug 13, 2021

Thank you @bradlc! This seems to be the issue with me as well, apps/ is excluded.

@shedali
Copy link

shedali commented May 9, 2022

in my case, I am using a preset as documented here

presets: [require("@my-org/my-tailwind-preset")],

Tailwind correctly parses this if code is launched in the package directory, but not from the monorepo root.

@VladymyrPylypchatin
Copy link

I had the same problem.

Updating VS code settings as recommended in their official repo solved it.

@alexmilde
Copy link

i ran into a similar problem.
i forgot to add tailwindcss to the packages/my-ui/package.json

@YuryLandau
Copy link

I'm having some issues using Lerna as monorepo. I've checked all the answers above and it seems that my configurations are ok! Can someone help me?

@SpinBoxx
Copy link

Same for me, i'm using a monorepo and i have onmy my tailwind intelisense working on my apps/front but not on my package/ui

@yt-kevincarrera
Copy link

yt-kevincarrera commented May 23, 2025

Same for me, i'm using a monorepo and i have onmy my tailwind intelisense working on my apps/front but not on my package/ui

Adding an empy tailwind.config.js file in the root is like a patch, you should have intellisense,for the default classes, not the custom ones

@ringoebenezer
Copy link

Thankyou @yt-kevincarrera ,adding an empty tailwind.config.js file in the root fixed it. Works like a charm

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests