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

[rumansaleem]

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]

@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]

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]

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:

[predragnikolic]

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

https://github.com/tailwindlabs/tailwindcss-intellisense/blob/f5dfe02f74ac9bd68529f1997ae875691b819833/src/index.ts#L24

https://github.com/tailwindlabs/tailwindcss-intellisense/blob/766a5d533dcb68640ce6b3270488f6701dd1173d/packages/vscode-tailwindcss/src/extension.ts#L40

[ebrearley]

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:

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

[ebrearley]

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]

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]

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]

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 :sweat_smile: 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]

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]

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]

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

[shedali]

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]

I had the same problem.

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

[alexmilde]

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