[IntelliSense] Make location of tailwindcss executable configurable

[ellismarkf]

Discussed in tailwindlabs/tailwindcss#6727

^{Originally posted by ellismarkf December 24, 2021}
Rather than assuming a project has tailwindcss available in node_modules, users should be able to configure the extension to point to a file path where tailwindcss is installed.

Especially now that the standalone tailwindcss package has been released, it would make using tailwindcss alongside non-JS frameworks (ie Rails, Phoenix) a lot easier for those projects that would otherwise not need a package.json file at all.

[bpo]

I took a quick look into this for a project that uses tailwindcss-rails.

I think this won't be as simple as just providing a configuration option to point to a tailwindcss binary because this extension loads modules from the project's tailwind source (in server.ts).

The extension could accept a tailwind source configuration option, but in the case of tailwindcss-rails even that wouldn't help because the Rails integration wraps just the CLI, not the tailwind source.

To get the ideal experience for non-node environments like Rails, I think this extension would need to ship with the components it needs from tailwind's source (or the CLI could ship a language server).

[bradlc]

Hey @ellismarkf. As @bpo mentioned, it's not as simple pointing the extension at the standalone CLI file, because that file is not the same as the tailwindcss npm module, which is what the extension is powered by.

Having said that, we just released v0.7.5 of the extension, which ships with a built-in version of tailwindcss. This means that IntelliSense now works without a local tailwindcss installation, as long as you have a valid tailwind.config.js file. Try it out and let me know if you run into any issues 🤙

[alexanderMontague]

@bradlc we're working on a rails-tailwind project and attempting to enable intellisense. Given we're using this gem and dont have any JS dependencies locally available, this extension defaults to using the bundled tailwindcss package as you mentioned above. This all works great with a base config until we expand our tailwind.config.js file to include other parts of the tailwind ecosystem. For example:

const plugin = require('tailwindcss/plugin');
const defaultTheme = require('tailwindcss/defaultTheme');

...

plugins: [
    plugin(({addUtilities}) => {
      ...
    }),
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/container-queries'),
  ],

The plugin reasonably struggles to find these external packages with [Error - 8:48:45 PM] Tailwind CSS: Can't resolve 'tailwindcss/plugin' in '/home/....' and 'tailwindcss/defaultTheme', @tailwindcss/forms etc. etc. as they don't exist in our bundle/project. Are there any workarounds to this? We could use a separate basic config and point the extension to use that, but then we would presumably lose some of the extras these plugins provide.

Thanks in advance!